Mermaid

Mermaid記法

Mermaid記法とは、テキストから図を自動生成するためのコーディング記法です。Mermaidは単なる「図解ツール」ではなく、「思考を構造化して、AIやチームと共有するための言語」へと進化しています。

Mermaid（マーメイド）は、Markdownのようなテキスト形式でグラフや図を描画するためのJavaScriptライブラリ、およびその構文のことです。

通常、フローチャートやシーケンス図を作成するには専用のデザインソフトや描画ツール（VisioやPowerPointなど）を使いますが、Mermaidであれば、コードを書くだけで済みます。

Mermaidの中で最もよく使われるフローチャートを例に、実際のコードを紹介します。記述のルールは非常にシンプルです。

graph TD：図の方向（上から下）を指定
graph LR：図の方向（左から右）を指定
[ ]：四角いノード（工程）
{ }：ひし形のノード（条件分岐）
(( ))：丸いノード（開始/終了など）
 -->：矢印（流れ）

判断分岐を含むフローチャートの事例

graph TD
   A(朝起きる) --> B[顔を洗う]
   B --> C{眠いですか？}
   C -- 眠い --> D[コーヒーを入れて飲む]
   C -- 眠くない --> E[執筆をはじめる]
   D --> E
   E --> F(完了)

Mermaidは一般に普及しているため、専用ソフトをインストールしなくても、普段使っているツールでもそのまま動きます。またコード記法を覚える必要もなく、生成AIを用いてプロンプトから状況をうまく説明できれば、作図の元となるコード自体が生成されます。

今、Mermaidが改めて注目されている最大の理由は「AIとの相性が抜群に良い」からです。

AIが「描画」できる共通言語：
AIは画像を直接ゼロから正確に描く（文字化けせずにフローを作るなど）のはまだ苦手ですが、「論理的なテキスト」を書くのは得意です。Mermaidを介することで、AIに正確な図解を指示できます。
プロンプトによる一括修正：
「このフローに『承認ステップ』を追加して」とAIに頼めば、AIがMermaidコードを書き換えてくれます。マウスで図の矢印を引き直す手間がゼロになります。
トークン効率が良い：
画像データを読み込ませるよりも、軽量なテキストであるMermaidコードを読み込ませる方が、AIは構造を正確に理解し、論理的なミスを指摘しやすくなります。

Mermaidを使いこなす上で知っておくと便利なキーワード