マウスで四角を並べるかわりに、フローチャートを言葉で説明して描けるとしたら。それをやるのがMermaidです。Markdownの中のただのテキストを、フローチャート、シーケンス図、ガントチャートなどに変える記法で、描画は自動です。このページでは、その仕組みを説明します。
言語そのものについてはMarkdownガイドにまとめてあります。
MarkdownでのMermaidの仕組み
Mermaidの図は、言語名に mermaid と書いたフェンス付きコードブロックの中に書きます。エディタはその名前を見つけると、中身をコードとして表示せず、図として描きます。
```mermaid
flowchart LR
A[思いつく] --> B{Markdownで書く}
B --> C[プレビュー]
C --> D[PDFに書き出す]
```flowchart LR
A[思いつく] --> B{Markdownで書く}
B --> C[プレビュー]
C --> D[PDFに書き出す]この短い説明が、4つのステップを左から右へつなぐフローチャートになります。テキストを直せば図も変わります。描画ツールも、ドラッグもありません。
描ける図の種類
Mermaidは、同じ「ただのテキスト」のやり方で多くの種類の図に対応しています。ふだんの文章で役に立つのは次のあたりです。
- フローチャート — 手順や分岐（
flowchartまたはgraph）。 - シーケンス図 — 時間に沿ったやりとり。APIや業務の流れに向きます。
- ガントチャート — 簡単なプロジェクトの日程。
- クラス図・ER図 — ソフトウェアとデータのモデル。
- 円グラフ・マインドマップ — ざっと見せたいとき。
例：フローチャート
flowchart TD
開始 --> 判断{整形できている？}
判断 -->|はい| 書き出し[PDFに書き出す]
判断 -->|いいえ| 編集[書き続ける]
編集 --> 判断
角かっこ [ ] のノードは四角、波かっこ { } は判断のひし形になります。--> が矢印を引き、|テキスト| がその矢印にラベルを付けます。TD は上から下、LR は左から右です。
例：シーケンス図
sequenceDiagram
書き手->>エディタ: Markdownを打つ
エディタ->>プレビュー: その場で描画
プレビュー-->>書き手: 結果を見せる
ここでは ->> がメッセージ、-->> が返事です。登場人物のあいだのやりとりを、読める形で書き下せます。
図をテキストで持つ強み
- バージョン管理と相性がいい。 図はただのテキストなので、文書の中にあり、すぐ同期し、バージョン履歴でも扱えます。何が変わったかがそのまま見えます。
- 直すのが速い。 ラベルを変えるのも手順を足すのも、図形を並べ直すのではなく、打つだけです。
- 見た目がそろう。 同じ文書の中の図は、放っておいても同じ体裁になります。
- 文章と一緒に動く。 別の画像ファイルを管理して、ずれないように気を配る必要がありません。
Inkiostroで図を描く
Macでは、InkiostroがMarkdownからMermaidの図をその場で描きます。mermaid のコードブロックを書いていくと、フローチャートやシーケンス図が打つそばからプレビューに現れます。LaTeXの数式と同じで、PDFに書き出しても、HTMLでもEPUBでも、図はそのまま残ります。絵は文書と一緒に旅をするわけです。エディタから一歩も出ずに、ただのメモが図解入りの文書になります。
コツ
- まず
flowchartから。 いちばん使い道が広く、読みやすい種類です。 - ノードのラベルは短く。 配置はMermaidが決めるので、短いほうがきれいに収まります。
- 向きを選ぶ。 流れに合うほうを選んでください（
TDは上から下、LRは左から右）。 - こまめにプレビューする。 記法を少し間違えると描画されなくなるので、その場で分かります。
よくある質問
MarkdownのMermaidとは何ですか？
Mermaidは、フローチャート、シーケンス図、ガントチャートといった図を、ただのテキストで説明するための記法です。mermaid と名前を付けたフェンス付きコードブロックに書くと、対応したエディタが図として描きます。InkiostroはMacで標準対応しています。
標準のMarkdownは図に対応していますか？
そのままでは対応していません。図は拡張です。Mermaidに対応したエディタが mermaid のコードブロックを見つけて中身を描きます。素のMarkdownなら、コードがそのまま表示されるだけです。
フローチャートはどう作りますか？
mermaid と名前を付けたフェンス付きコードブロックを書き、先頭に flowchart LR（または TD）と置いて、A --> B の形でノードと矢印を並べます。MacのInkiostroなら、プレビューにその場で描かれます。
図はPDFに書き出せますか？
はい。MacのInkiostroでは、Mermaidの図はプレビューに描画され、PDF、HTML、EPUBに書き出すときも含まれます。
絵心がなくても描けますか？
描けます。図は言葉で説明するもので、四角も矢印も配置も自動で決まります。デザインツールを開かずにきちんとした図がほしい人に向いています。