Mermaid記法
Mermaid記法とは、テキストから図を自動生成するためのコーディング記法です。Mermaidは単なる「図解ツール」ではなく、「思考を構造化して、AIやチームと共有するための言語」へと進化しています。
Mermaid記法とは何か
Mermaid（マーメイド）は、Markdownのようなテキスト形式でグラフや図を描画するためのJavaScriptライブラリ、およびその構文のことです。
通常、フローチャートやシーケンス図を作成するには専用のデザインソフトや描画ツール（VisioやPowerPointなど）を使いますが、Mermaidであれば、コードを書くだけで済みます。
注目されている理由
コードサンプル
Mermaidの中で最もよく使われるフローチャートを例に、実際のコードを紹介します。記述のルールは非常にシンプルです。
基本的な構成要素
graph TD：図の方向（上から下）を指定
graph LR：図の方向（左から右）を指定
[ ]：四角いノード（工程）
{ }：ひし形のノード（条件分岐）
(( ))：丸いノード（開始/終了など）
-->：矢印（流れ）
サンプルコード
以下のコードは「朝起きてコーヒーを飲むか」を決めるフロー
graph TD
A((起床)) --> B[顔を洗う]
B --> C{眠いですか？}
C -- はい --> D[コーヒーを淹れる]
C -- いいえ --> E[すぐに作業開始]
D --> F((完了))
E --> F
プレビュー（図のイメージ）
作図ツールと手順
Mermaidは一般に普及しているため、専用ソフトをインストールしなくても、普段使っているツールでもそのまま動きます。
- Notion
/mermaid と入力してブロックを作成し、コードを貼り付けるだけで即座に図が表示されます。
- GitHub
.md ファイル内で「```mermaid」と「 ```」で囲むだけで、リポジトリ上で自動レンダリングされます。
- VS Code拡張機能
「Markdown Preview Mermaid Support」を入れると、プレビュー画面でリアルタイムに図を確認できます。
- Mermaid Live Editor
公式サイトのブラウザエディタ。環境構築不要で、作成した図をPNGやSVGで書き出せます。
- 生成AI（ChatGPT / Gemini など）
「以下の内容をMermaid記法で出力して」と頼むとコードを生成してくれます。
生成AI時代の Mermaid記法
今、Mermaidが改めて注目されている最大の理由は「AIとの相性が抜群に良い」からです。
- AIが「描画」できる共通言語：
AIは画像を直接ゼロから正確に描く（文字化けせずにフローを作るなど）のはまだ苦手ですが、「論理的なテキスト」を書くのは得意です。Mermaidを介することで、AIに正確な図解を指示できます。
- プロンプトによる一括修正：
「このフローに『承認ステップ』を追加して」とAIに頼めば、AIがMermaidコードを書き換えてくれます。マウスで図の矢印を引き直す手間がゼロになります。
- トークン効率が良い：
画像データを読み込ませるよりも、軽量なテキストであるMermaidコードを読み込ませる方が、AIは構造を正確に理解し、論理的なミスを指摘しやすくなります。
APPENDIX
Mermaidを使いこなす上で知っておくと便利なキーワードです。
- Markdown
Mermaidが埋め込まれるベースとなる文書形式。エンジニアの標準的記法
- Text-to-Diagram
「文字から図を作る」という考え方そのもの。Mermaidはその代表格です。
- PlantUML：
Mermaidと同様の存在。より複雑で高度な図が書けます（環境構築は難）
- SVG（Scalable Vector Graphics）：
Mermaidが生成する画像の形式。拡大してもぼやけないため、プレゼン資料に貼り付けても綺麗です。
