キー入力だけでフローチャートができてすげええええええ！ Mermaidを触ってみました

なんて素敵なの！¹ nikkieです。

描画ツールをいじらずにフローチャートを書いてみたく、Mermaidを試してみました🧜‍♀️

2022年2月からサポート。
おぼろげながら話題になっていた覚えがあります。

たとえば、Mermaid ではフローチャート、シーケンス図、円グラフなどをレンダリングできます。

Mermaid ダイアグラムを作成するには、mermaid 言語識別子をもつコードブロック内に Mermaid 構文を追加します。

Issueでぱっと試し、この記事を書く際はVS Code拡張を試しました。

mermaid 言語識別子をもつコードブロック内の書き方です（コードブロック全体はrawで見てください）。

完全一致で写経したわけではなく、ドキュメントを元に細かいところを変えています。

Node
- IDまたはテキスト
- https://mermaid.js.org/syntax/flowchart.html#a-node-default
- https://mermaid.js.org/syntax/flowchart.html#a-node-with-text
- テキストに日本語も書けるが全角の「？」「！」はエラーになった（→半角にしてエラー回避）
NodeどうしにLinkを引いて、Graphにできる
- https://mermaid.js.org/syntax/flowchart.html#graph
- フローチャート！
フローチャートの方向
- https://mermaid.js.org/syntax/flowchart.html#flowchart-orientation
- TD(Top-down)はTB(top to bottom)と同じ
- TB / BT / LR(left to right) / RL
Nodeの形状
- []は長方形
- {}はひし形
  - https://mermaid.js.org/syntax/flowchart.html#a-node-rhombus
Node間のLink
- 有向にできる
- さらにテキストを持たせられる（2通りの書き方）
  - https://mermaid.js.org/syntax/flowchart.html#a-link-with-arrow-head-and-text
  - A-- text -->B
  - A-->|text|B（Lineの前後に空白を入れてもよい）

Node Eに閉じるところは、テキストを書くのを1回だけにできました。
GitHub blogの例では、テキストを2回繰り返しています。
NodeのIDが同じだからうまくいくんじゃないかと思っていますが、ドキュメント中に記載をまだ見つけられていません。

フローチャートは描画ツール不要（キー入力だけ）で作れる！ Mermaidならね

これはなかなか好感触です。
過去、Draw.io拡張³を使ってVS Codeで図を作りました⁴が、全てテキストで完結するのはとてもいいですね！

今回触ったのはフローチャートですが、Mermaidはほかの図も書けるという！
いや〜、これは素晴らしいな〜。引き続き素振りしていこう！

nikkie-ftnextの日記