mermaidでフローチャートを描く
楽にきれいにフローチャートを描く方法を探してたらmermaidに行きついたので、mermaidを使ってフローチャートを描く方法をまとめておきます。
公式docsはこちらです。
ブラウザでmermaidを使う
こちらのエディタを使うとブラウザ上でサクサクmermaidが書けます。
こんな感じで左側がエディタ、右側がプレビューで書いたdiagramをリアルタイムで確認しながら使えます。即書きたい派の人はこれがいいかも。
Sample Diagramsから色んな図のテンプレを挿入することができます
Actionsから画像ファイルにエクスポートしたりも
VSCodeでmermaidを使う
VSCodeでmermaidを使う場合は、こちらの拡張機能を入れるとよいらしい
mermaid記法をハイライトで表示してくれて書きやすくなります
こちらはVSCodeでmermaidで書いた図をプレビューで見せてくれます。
拡張機能を入れた後、
Select Language ModeでMarkdownを選択
Editorで
```mermaid
````
もしくは
:::mermaid
:::
を書いて図を書いていく
矢印の所を選択すると、
mermaidで書いた図をこんな感じでPreviewを表示してくれます
フローチャートを書いてみる
記法はこちらにあります。フローチャートの他にもシークエンス図やクラス図も書けるようです。
フローチャートを書く場合、
flowchart, graphが使えます。
以降はgraphで書いていきます。
チャートの向き(TB/TD/BT/RL/LR)
- 上から下（TD/TB）
graph(←この部分をflowchartにしてもよい) TD(top-down) で上から下向きのチャートが作れます。
graph TB(top to bottom)でもTDと同じように上→下のチャートが作れる
（分ける意味は、、、？）
-
下から上（BT）
あんまり使わないだろうけど、graph BT(bottom to top)で下から上
-
右から左(RL)
graph RL(right to left)で右から左向き
-
左から右(LR)
graph LR(left to right)
図の種類
こういうフローをmermaidで書いてみます
- 処理AからBへ
A(Start Process)-->B[Check contents]
(処理の名称)
でRounded Squareの図を、
[処理の名称]
でSquareを挿入できます。
処理Aと処理Bの間を結ぶ矢印は-->で繋ぎます。
矢印を伸ばしたい時は---->というように-を増やすと矢印が伸びて、
==>
と書くと、矢印の線が太くなります。
- 条件分岐
B-->C{Check result is}
C-->|OK| D[Register Data]
D-->|NG| E[Return Error Message]
{条件文}
でif-elseの条件判定を挿入できます。
条件分岐は
[条件判定処理] -->|TRUE| [TRUE後の処理]
[条件判定処理] -->|NG| [NG後の処理]
みたいな感じで書きます。
- データエンティティの参照
D-.->|Reference| F[(Data Table)]
おなじみデータエンティティの図は
[(DataTable)]
点線の矢印は
-.->
矢印の途中にテキストを入れる時は、
-.->|矢印の途中のテキスト|
みたいな感じで書きます。
点線の矢印を伸ばす場合は、
-...->
という風に.の数を増やすと矢印が伸びます。
最初の図のフローチャートを最後まで書くとこんな感じになりました。
graph TD
A(Start Process)-->B[Check Contents]
B-->C{Check result is}
C-->|OK| D[Register data]
C-->|NG| E[Return error message]
D-.->|Reference| F[(Data Table)]
D--->G(End)
その他の図
平行四辺形
A[/This is the text in the box/]
六角形ノード
A[/This is the text in the box/]
Nodeの色を変える
nodeの色を変える場合、下記のように色を変えたいclassに対してstyleを指定します。
下記の例ではClass A(Start Process)をピンク色にしてます。
A(Start Process) -->B(Check Process)
style A fill:#ff69b4
複数のnodeの色を変える場合、下記のようにclassDefを使ってCssClassを定義して、nodeのclassに対してCssClassを設定します。
A(Start Process) -->B(Check Process)
classDef className fill :#ff69b4;
class A,B className
styleの付与については、公式docsではこの辺りに書かれています。
特定文字のエスケープ、改行
例えば、下記のようにnode内の文字列の中で()を使用したい場合、
文字列を""で囲むことでエスケープできます。
Table1[("Data Table A (See 'Table docs' for table definition)")]
改行したい場合、改行したい場所で<br>を入れると改行できます。
Table1[("Data Table A <br> (See 'Table docs' for table definition)")]
subgraph（Nodeをひとまとめにして色分けする）
flowchartの中でこんな感じで複数のnodeをひとまとめにする場合はsubgrapghを使います。
subgraph Tables
Table1[(Table1)]
Table2[(Table1)]
Table3[(Table1)]
end
以下の形式で書きます。
subgraph 任意のグラフ名
まとめたいNode達
end
invisible linkでNodeを線で繋がずに整列させる
invisible linkを使うと、Node同士を並べることができます。
先程subgraphで作ったテーブル達は横並びになっていますが、これをinvisible linkでこのように~~~で繋ぐと、
subgraph Tables
Table1[(Table1)]
~~~ Table2[(Table1)]
~~~ Table3[(Table1)]
end
縦並びになります。元々フローチャート作成時にgraph TDで設定した縦向きに並びます。
線ではつなげたくないけどNode同士を並べたい時に使えます。
Live editorで作成したflowchartをPNGファイルとしてDL
公式のLive editorでflowchartを作成した場合、PNGやSVGとしてDLできます。
私のおすすめは、左から3番目のボタンでPNGファイルをブラウザ上で開いて
※flowchartがめちゃくちゃ長いときは画像クリックで拡大表示
DevToolでbackgroundcolorを解除
Ctrl+Shift+P でコマンドが入力できるようになるので、ここでCapture full size screenshotを実行
そうすると結構見やすい大きさのPNGファイルがDLできます。
※めちゃくちゃ長いflowcchartだと、live editorから直でDLするPNGファイルだと微妙に小さかったりして見にくい
【番外編】Azure DevOpsのWikiでmermaidを使う
Azure DevOpsのWikiでもここからmermaidの挿入ができます。
WikiのMarkdownと合わせるとそこそこ綺麗なドキュメントが作れそうですね。
プレビューの所がこんな表示になりますが、
Load Diagramをクリックするとちゃんと図がレンダリングされます。
Discussion