Mermaid入門｜テキストで図を描く仕組みとフローチャート・シーケンス図・ガントの書き方

仕様書や設計メモに図を入れたいとき、作図ソフトを開いて四角形を並べ、線をつなぎ、文字を打ち込む——そんな手間に時間を取られた経験はないでしょうか。Mermaid（マーメイド）は、こうした作図を「短いテキストを書くだけ」で済ませてしまう仕組みです。マウスでドラッグする代わりに、図の構造を文章のように記述すると、それが自動的にフローチャートやシーケンス図へと変換されます。本記事では、Mermaidとは何か、どうやってテキストが図になるのか、そして基本的な書き方を順を追って解説します。

Mermaidとは何か

Mermaidとは、テキストで記述した内容をもとに図を自動生成する、オープンソースの作図ツール（記法）です。JavaScriptで実装されており、Markdownのように「人間が読み書きしやすい簡潔な記法」で図の構造を表現できるのが最大の特徴です。フローチャート、シーケンス図、ガントチャート、クラス図、円グラフなど、ソフトウェア開発やドキュメント作成でよく使われる図の多くをカバーしています。

従来の作図ソフトでは、図形の位置や線の引き回しを一つひとつ手で調整する必要がありました。Mermaidでは、「何と何がどうつながっているか」という関係だけを書けば、配置やレイアウトは自動で整えてくれます。見た目の調整に煩わされず、図の中身そのものに集中できるわけです。

実際にどんな記法でどんな図が生成されるのかは、Mermaid図エディタにコードを入力し、リアルタイムで図が描き変わる様子を見てみるのが一番分かりやすいでしょう。テキストを1行足すだけで図にノードが増える感覚を、まず体感してみてください。

テキストが図になる仕組み

Mermaidの図は、必ず「どの種類の図か」を宣言する1行から始まります。たとえばフローチャートなら graph TD、シーケンス図なら sequenceDiagram といった具合です。Mermaidはこの先頭の宣言を読んで、続く行をどう解釈すればよいかを判断します。

graph TD A[開始] --> B[処理] B --> C[終了]

上の例では、graph TD が「上から下へ流れるフローチャート」を宣言し、続く行が「A から B へ、B から C へ矢印を引く」という関係を表しています。A や B はノード（図形）を識別するための名前で、[ ] の中がそのノードに表示される文字です。--> が矢印を意味します。

ポイントは、書いた人は座標を一切指定していないことです。「A から B へつながる」という関係だけを書けば、Mermaidが自動でレイアウトエンジンを使って図形を配置し、線が重ならないように整えてくれます。これが「テキストから図が生まれる」仕組みの核心です。

フローチャート（graph TD）の基本

もっともよく使われるのがフローチャートです。先頭で graph に続けて図の向きを指定します。向きは次の4種類が基本です。

ノードの形は、名前に続くかっこの種類で変わります。これにより「処理」「判断」「開始・終了」などを視覚的に描き分けられます。

• A[テキスト] … 四角形（標準的な処理ステップ）
• B(テキスト) … 角丸の四角形
• C{テキスト} … ひし形（条件分岐・判断）
• D((テキスト)) … 円形

矢印にも種類があり、線にラベル（説明文）を付けることもできます。条件分岐を表すときに便利です。

graph TD A[ログイン画面] --> B{認証成功?} B -->|はい| C[ホーム画面] B -->|いいえ| D[エラー表示]

--> は実線の矢印、-->|ラベル| は矢印に文字を添える書き方です。このほか ---（矢印なしの線）や -.->（点線）など、関係の性質に応じた表現も用意されています。まずは graph TD と -->、そして { } による分岐だけ覚えれば、実用的なフローチャートはほぼ描けます。

シーケンス図とガントチャート

フローチャート以外にも、Mermaidはよく使う図をいくつもサポートしています。ここでは代表的な2つを紹介します。

1. シーケンス図

シーケンス図は、登場人物（やシステム）同士が、どんな順番でやり取りするかを時間の流れに沿って表す図です。APIの呼び出し順序やログイン処理の流れを説明するのに重宝します。先頭で sequenceDiagram を宣言します。

sequenceDiagram ユーザー->>サーバー: ログイン要求 サーバー-->>ユーザー: トークン返却

->> は実線の矢印（要求）、-->> は点線の矢印（応答）を表すのが一般的な使い分けです。コロンの後ろがメッセージの内容になります。上から下へ時間が進み、左右の縦線（ライフライン）の間でやり取りが描かれます。

2. ガントチャート

ガントチャートは、タスクの期間とスケジュールを横棒で表す図で、プロジェクトの進行管理に使われます。先頭で gantt を宣言し、日付の書式やセクション、タスクの開始日・期間を記述します。

gantt title 開発スケジュール dateFormat YYYY-MM-DD section 設計 要件定義 :a1, 2026-07-01, 5d 基本設計 :a2, after a1, 7d

5d は「5日間」、after a1 は「a1のタスクが終わってから開始」という意味です。日付を直接書く代わりに前のタスクとの依存関係で並べられるため、スケジュールの組み替えにも強いのが特徴です。これらの記法も、Mermaid図エディタに貼り付けて、実際の図がどう描かれるかを確認しながら覚えるのが近道です。

GitHubやNotionでの活用

Mermaidが急速に普及した大きな理由が、主要なドキュメントサービスが標準で対応している点です。Markdownのコードブロックに mermaid という言語名を指定して記法を書くだけで、表示時に自動で図へ変換されます。

• GitHub：README.mdやIssue、Pull Requestのコメント内でMermaidが描画されます。設計をテキストで書いておけば、リポジトリを見た人にそのまま図として伝わります。
• Notion：コードブロックの言語にMermaidを選ぶと、図として表示できます。仕様メモやマニュアルに図を埋め込むのが手軽です。
• そのほか：GitLab、Obsidian、Zenn、各種静的サイトジェネレーターなど、対応サービスは年々増えています。

これらの環境では、画像ファイルを別途アップロードする必要がありません。図そのものがテキストとして本文に書かれているため、文章を編集するのと同じ感覚で図を更新できます。レビューの際も、図のどこが変わったのかが文字の差分（diff）として表示されるのは大きな利点です。

図をコードで管理するメリット

Mermaidの本質的な価値は、単に作図が速いことだけではありません。図を「テキスト＝コード」として扱えることにあります。これは従来の画像ファイルとしての図とは決定的に違う性質をもたらします。

図がテキストであれば、ソースコードと同じようにGitでバージョン管理でき、「いつ・誰が・どこを変えたか」が履歴として残ります。チームでのレビューもしやすく、過去の図への巻き戻しも簡単です。また、文章の一部としてコピーや再利用ができ、AIに「この処理のフローチャートをMermaidで書いて」と頼んで生成させることも容易です。図とドキュメントが乖離しがちという長年の課題に対し、テキストとして一元管理できるMermaidは有力な解決策になります。

まずは難しく考えず、Mermaid図エディタで graph TD から1行ずつ書き足し、図が育っていく様子を体験してみてください。手を動かして記法と図の対応を目で確かめることが、習得への一番の近道です。

なお本記事は一般的な情報提供を目的としたものです。Mermaidの記法や対応サービスの仕様は更新されることがあるため、実際に利用する際は最新の公式ドキュメントを確認したうえで判断してください。