2019/10/16 Javascript

【Javascript】簡単に様々な図が作れるmermaid

ブログにフローチャート等の図を導入したいと思い探してたらいいのがありましたのでご紹介。

目次[非表示]

• 1.mermaid
• 2.導入方法
• 3.サンプル
  • 3.1.フローチャート
  • 3.2.シーケンス図
  • 3.3.ガントチャート
  • 3.4.クラス図
  • 3.5.gitグラフ
• 4.ライブエディター
• 5.まとめ
• 6.この記事の関連記事

mermaid

このマーメイド様々な図に対応しております。

• フローチャート
• シーケンス図
• ガントチャート
• クラス図
• gitグラフ

フローチャートだけでもありがたいのに全5種類に対応！

Github

マニュアル

導入方法

今回は普通にJavascriptで使用する方法の紹介です。

他にもnode.jsに入れることが出来るようです。

以下のコードをコピペすれば使用することが出来ます。

1 2 3 4

<script src="https://unpkg.com/mermaid@8.1.0/dist/mermaid.min.js"></script> <script>   mermaid.initialize({startOnLoad: true, theme: 'forest'}); </script>

今回は現在の最新の8.1.0のバージョンを使わせてもらっていますが「https://unpkg.com/mermaid@<version>/dist/mermaid.min.js」の「<version>」の箇所を変更していただくことで使用するバージョンを変更することが出来ます。

themeのところの値を変更すると図のテーマを変更して色を変更することが可能です。

Github上で確認してみると以下のテーマが確認できています。

• default
• forest
• dark
• neutral

注意点でHTMLの要素でclass名に「section」を使用していた場合、mermaidのCSSと競合してしまうので僕は以下のような対応を入れました。

1 2 3 4 5 6 7 8

<style> .section {   opacity: 1!important; } .section0, .section2 {   opacity: .2!important; } </style>

サンプル

前述の導入を行っていることが前提です。

サンプルは全てマニュアルのものを使用しております。

こちらの記事も参考にしてみてください。

【目的無しの泥臭調査⑤】mermaid.jsの記法を覚えて、楽しく図を描く。 - Qiita

フローチャート

各種カスタマイズ方法はコチラを参照ください。

1 2 3 4 5 6 7

<div class="mermaid"> graph TD;     A-->B;     A-->C;     B-->D;     C-->D; </div>

シーケンス図

各種カスタマイズ方法はコチラを参照ください。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="mermaid"> sequenceDiagram     participant Alice     participant Bob     Alice->>John: Hello John, how are you?     loop Healthcheck         John->>John: Fight against hypochondria     end     Note right of John: Rational thoughts prevail!     John-->>Alice: Great!     John->>Bob: How about you?     Bob-->>John: Jolly good! </div>

ガントチャート

各種カスタマイズ方法はコチラを参照ください。

1 2 3 4 5 6 7 8 9 10 11 12

<div class="mermaid"> gantt dateFormat  YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10   section A section Completed task            :done,    des1, 2014-01-06,2014-01-08 Active task               :active,  des2, 2014-01-09, 3d Future task               :         des3, after des2, 5d Future task2               :         des4, after des3, 5d </div>

クラス図

こちらはまだ正式採用されてないのでマニュアルに情報がありません。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div class="mermaid"> classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label </div>

gitグラフ

こちらはまだ正式採用されてないのでマニュアルに情報がありません。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div class="mermaid"> gitGraph: options {     "nodeSpacing": 150,     "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch </div>

ライブエディター

コチラのライブエディターを使用すれば実際に試しつつコーディング出来て、SVG画像としてもダウンロードが可能です。

まとめ

現在のところ全5種類の図に対応しており、現在も拡張しているようです。

ライブエディタも充実しており、ブログにも載せられて簡単に作れるので今後活用していこうかと思います。

仕事で図などを書く際にこれを使用すれば自動で調整もしてくれるの簡単かも知れません。