楽にきれいにフローチャートを描く方法を探してたらmermaidに行きついたので、mermaidを使ってフローチャートを描く方法をまとめておきます。
公式docsはこちらです。
https://mermaid.js.org/intro/

ブラウザでmermaidを使う

こちらのエディタを使うとブラウザ上でサクサクmermaidが書けます。
https://mermaid.live/edit
こんな感じで左側がエディタ、右側がプレビューで書いた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