PART 04 — コードブロックの拡張活用
Mermaidでフローチャートを描く

画像編集ソフトでフローチャートを作っては差し替えが面倒で放置する、を繰り返していました。Mermaidを覚えてからは、図の修正も文章と同じようにテキストの差分で管理できるようになり、随分と気が楽になりました。

Mermaidとは

Mermaidは、テキストベースの簡易な記法でフローチャート・シーケンス図・ガントチャートなどの図を作成できる、JavaScript製の描画ライブラリです。 PART 03で説明した通り、Markdownのフェンス付きコードブロックの言語名にmermaidを指定することで、対応環境ではその中身が図として描画されます。

画像編集ソフトで図を作る場合と違い、Mermaidはテキストなので差分管理がしやすく、記事の文章と同じGitリポジトリで一緒にバージョン管理できることが大きな利点です。

フローチャートの基本記法

フローチャートはflowchartキーワードから始めます。続けて図の向き（TD=上から下、LR=左から右 など）を指定します。

フローチャート例（コードと表示結果）

「記事の執筆フロー」を例に、実際のコードとプレビューでの表示結果を見比べてみます。

```mermaid
flowchart TD
  A[記事執筆開始] --> B
  B{構成は決まった?}
  B -->|Yes| C[執筆する]
  B -->|No| D[構成案を作る]
  D --> B
  C --> E[公開]
```

図1: mermaidコードブロック（左）とVS Codeプレビューでの描画結果（右）

コードを保存すると、拡張機能が自動的にノードと矢印を解析し、四角形・ひし形・矢印ラベルを含む図としてプレビューに描画します。 ノードの位置やレイアウトは自動計算されるため、こちら側で座標を指定する必要はありません。

この自動レイアウトこそがMermaidの最大の利点です。ノードを1つ追加・削除しても、矢印の位置や図全体のバランスは再計算されるため、画像編集ソフトのように配置を手作業で調整し直す必要がありません。 仕様変更でフローが変わった場合も、テキストを数行書き換えるだけで最新の図に更新できます。

他の図の種類（簡易紹介）

Mermaidはフローチャート以外にも複数の図に対応しています。本シリーズではフローチャートを中心に扱いますが、概要だけ紹介します。

図2: Mermaidで描ける主な図の種類

いずれも基本の書き方は```mermaidで囲む点は共通です。より詳しい記法は Mermaid公式ドキュメント（英語）を参照してください。

表示されないときの対処

Mermaidの図がプレビューに描画されない場合、多くは以下のいずれかが原因です。

それでも解決しない場合は、コードブロックの中身だけを一度別ファイルに切り出し、行を減らしながらどこでエラーになるかを二分探索的に絞り込むと原因を特定しやすくなります。 小さな構文ミス1つで図全体が描画されないことが多いため、慌てず1行ずつ確認するのがコツです。