業務マニュアルやシステム設計書を作っているとき、「PowerPointや作図ツールで四角形と矢印をきれいに並べるだけで何十分もかかってしまった」「仕様が少し変わっただけなのに、元ファイルを探して画像に書き出し直すのが面倒…」と感じたことはありませんか？
そんな作図の手間を劇的に減らしてくれるのが、テキストを書くだけで多彩な図表を自動生成できる「Mermaid（マーメイド）」です。DocBaseやNotion、GitHub、VS Codeなどの定番ツールに標準搭載されているほか、ChatGPTやClaudeなどの生成AIとも相性が良く、現在のドキュメント作成において欠かせない記法となっています。
本記事では、初めてMermaidに触れる方にもイメージしやすいよう基本の仕組みから丁寧に紐解きつつ、フローチャート・シーケンス図・ER図をはじめとする多彩な図表のコピペ用サンプルコードや、表示エラー時の解決法まで分かりやすく解説します。
Mermaid（マーメイド）とは？一言でいうと「文字で描く図解ツール」
Mermaid（マーメイド）とは、シンプルなテキストベースの記法を書くだけで、フローチャートやシーケンス図、ER図、ガントチャートなどの図表（ダイアグラム）をブラウザ上に自動描画できるオープンソースのJavaScriptライブラリです。
見出しや箇条書きを記号で素早く書けるマークダウン（Markdown）記法と同じような感覚で、「要素Aから要素Bへ矢印をつなぐ（A --> B）」と文字で書くだけで、箱の大きさや配置、矢印のルートまでMermaidが自動的に計算して美しい図に仕上げてくれます。
従来の図表作成では、「作図ソフトで描く → PNGやJPEG画像として書き出す → ドキュメントに貼り付ける」という分断された作業が必要でした。一方、Mermaidは「図そのものがプレーンテキスト（文字データ）である」という点が最大の特徴です。この特徴によって、ドキュメント管理のあり方が驚くほど快適になります。
現場でMermaidが選ばれる理由と導入メリット
社内Wiki・ナレッジ共有ツールの「DocBase（ドックベース）のMermaid解説ページ」やGitHubなどの開発現場でも強調されている通り、テキストで図を管理することには実務上の大きなメリットがいくつもあります。
- 文書と図表を同じ場所で一元管理できる
外部の作図ソフトを立ち上げたり画像ファイルをアップロードしたりする必要がありません。エディタ上で文章のすぐ下にMermaid記法を書いてそのままプレビューできるため、文章と図が常にセットで最新に保たれます。 - 専用ソフトがなくてもチーム全員で修正・更新できる
画像で貼られた図は「元のPowerPointファイルを作った担当者しか直せない」という属人化を招きがちです。Mermaidならブラウザ上でテキストを書き換えるだけなので、エンジニアだけでなく企画職やサポート担当のメンバーでも気軽に図を更新できます。 - 変更履歴（バージョン管理）で差分を追跡しやすい
ソースコードと同じテキストデータなので、GitやWikiの編集履歴機能で「誰が・いつ・どの矢印や項目を変更したのか」を文字の差分として明確に追跡できます。 - 図の中の文字がキーワード検索にヒットする
PNGなどの画像ファイルに埋め込まれた文字は検索に引っかかりにくいのが弱点ですが、Mermaidは中身がテキストであるため、API名・テーブル名・業務ステップ名などで検索した際に図解部分もしっかりヒットします。 - 拡大してもぼやけないSVG描画とマルチデバイス対応
ブラウザ上でベクター形式（SVG）の図として描画されるため、高解像度のPCモニターやスマートフォン、タブレットで拡大表示しても文字や線がくっきりと鮮明に表示されます。
Mermaidの基本記法と図が描画される仕組み
Mermaidの使い方はとてもシンプルです。対応しているツールやMarkdownエディタ上で、バッククォート3つ（```）のコードブロックを作り、言語名として mermaid を指定します。
コードブロックの最初の行で「どの種類の図を描くか」を宣言し、次の行から「要素同士のつながり」を書いていきます。まずは一番わかりやすい基本形を見てみましょう。
```mermaid
graph TD;
A[開始] --> B[処理];
B --> C{判断};
C -- はい --> D[処理A];
C -- いいえ --> E[処理B];
D --> F[終了];
E --> F;
```
たったこれだけの記述で、「開始 → 処理 → 判断（ひし形）」から「はい」「いいえ」の2方向に分岐し、最後に「終了」へ合流するきれいなフローチャートが自動的に描かれます。
ここで A や B は各箱を見分けるためのID（識別名）で、その直後の [開始] や {判断} が実際に図の中へ表示される文字と箱の形を表しています。なお、行末のセミコロン（;）は付けても省略しても動作します。
初心者が迷いやすい豆知識：「graph」と「flowchart」の違いは？
フローチャートの1行目には、従来から広く使われている graph TD と、比較的新しい記法である flowchart TD の2種類があります。基本的な書き方はどちらも同じで互換性がありますが、flowchart の方が新しいノード形状や長い矢印表現などに対応しているため、これから新しく書く場合は flowchart（既存ツールとの互換性を重視するなら graph）を使うと覚えておけば安心です。
「今すぐ自分のパソコンで動きを試してみたい！」という方は、インストール不要でブラウザ上からリアルタイムにプレビューできる公式の Mermaid Live Editor や、普段お使いのDocBase・Notion・GitHubのエディタに以下のサンプルコードを貼り付けて試してみてください。
【コピペで使える】まずは押さえたい定番4大ダイアグラムの書き方
Mermaidは10種類以上の多彩な図表に対応していますが、日常のドキュメント作成やシステム開発で特に出番が多いのが「フローチャート」「シーケンス図」「ER図」「ガントチャート」の4種類です。それぞれの書き方と覚えておきたい重要パーツを順番に見ていきましょう。
フローチャート（業務フローや条件分岐の可視化）
業務の作業手順やプログラムの条件分岐を表す最も汎用的な図です。図の流れる方向・箱（ノード）の形・矢印の種類・グループ化（subgraph）を組み合わせるだけで表現力がぐっと広がります。
- 方向の指定：
TDまたはTB（上から下）、LR（左から右）、BT（下から上）、RL（右から左） - ノードの形状：
[四角形：処理]、(角丸：開始や終了)、{ひし形：条件判定}、[[サブルーチン]]、[(円柱：データベース)]、((円：接続点)) - 矢印の種類：
-->（実線矢印）、==>（太線矢印）、-.->（点線矢印）、--o（丸付き線）、--x（バツ印付き線）
```mermaid
flowchart TD
subgraph 受付フェーズ
A(問い合わせ受信) --> B{緊急トラブル?}
end
subgraph 対応フェーズ
B -- Yes ==> C[即時対応チームへ通知]
B -- No --> D[通常サポート枠で回答]
C --> E[(対応履歴DBへ記録)]
D -.-> E
end
```シーケンス図（システム間の通信や時系列のやり取り）
「ブラウザ」「APIサーバー」「データベース」などの登場人物（オブジェクト）の間で、どんな順番でリクエストとレスポンスが飛び交うのかを上から下への時系列で表現する図です。
- 登場人物の定義：
participant 別名 as 表示名で見やすい日本語名を付けられます。 - 矢印と実行中バー：
->>は実線矢印（要求）、-->>は点線矢印（応答）。矢印の直後に+と-を付けると「処理中」を表す縦長の四角バー（アクティベーション）を表示できます。 - 制御ブロック：
Note over A,B（補足メモ）、alt / else / end（条件分岐）、loop / end（繰り返し）、par / and / end（並列処理）が利用できます。
```mermaid
sequenceDiagram
participant Client as クライアント
participant Server as APIサーバー
participant DB as データベース
Note over Client,Server: REST APIによるデータ取得・更新
Client->>+Server: リクエスト送信
Server->>+DB: データ問い合わせ
DB-->>-Server: 検索結果を返却
Server-->>-Client: レスポンス送信
alt データが存在する場合
Client->>Server: データ更新リクエスト
Server->>DB: UPDATEを実行
else データが存在しない場合
Client->>Server: 新規作成リクエスト
Server->>DB: INSERTを実行
end
```ER図（データベースのテーブル構造とリレーション）
データベース設計において「どのテーブルがどんなカラム（列）を持ち、どのテーブルと1対多などの関係で結ばれているか」を表す図です。開発初期でテーブル構成が頻繁に変わる時期でも、テキストなら数秒で修正してチームへ共有できます。
一見記号が難しそうに見える関係線（カーディナリティ）も、「| は 1」「o は 0（ゼロ）」「{ または } は 多（複数）」というパーツの組み合わせだと分かれば、丸暗記しなくても直感的に読み書きできるようになります。
| ER図の記法 | リレーションの意味 |
|---|---|
||--o{ |
1 対 0以上（例：1人のユーザーは0件以上の記事を投稿する） |
||--|{ |
1 対 1以上（例：1つの注文には最低1つ以上の明細行が含まれる） |
||--|| |
1 対 1（左右どちらも必ず1つずつ対応する） |
}|..|{ |
多 対 多（点線 .. は非識別関係・緩やかな関連を表す） |
```mermaid
erDiagram
USER ||--o{ POST : writes
POST ||--o{ COMMENT : has
USER ||--o{ COMMENT : makes
USER {
int id PK
string username
string email
}
POST {
int id PK
int user_id FK
string title
datetime created_at
}
COMMENT {
int id PK
int post_id FK
int user_id FK
string content
}
```ガントチャート（プロジェクトの工程・スケジュール管理）
プロジェクトの各タスクが「いつから何日間かかるのか」「どのタスクが終わってから次に進むのか」を横棒のカレンダー形式で可視化できます。
after タスクID と書いておけば、前のタスクの日程をずらしたときに後続タスクの開始日も自動で連動してスライドしてくれるのがとても便利です。また、done（完了）、crit（重要工程）、milestone（マイルストーン）などの状態ラベルも指定できます。
```mermaid
gantt
title Webサイトリニューアル計画
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 準備・設計
要件定義 :done, a1, 2026-11-01, 5d
基本設計 :crit, a2, after a1, 7d
section 実装・検証
フロント実装 :b1, after a2, 10d
総合テスト :crit, b2, after b1, 5d
本番公開 :milestone, after b2, 0d
```設計・分析・クラウド構成まで！その他の多彩な図表と記法サンプル
定番の4種類以外にも、Mermaidにはソフトウェア設計・UX分析・チーム開発・クラウドインフラ構成まで幅広いダイアグラムが用意されています。用途に合わせて引き出せるよう、主要な8種類の書き方をサンプル付きで紹介します。
クラス図（classDiagram：オブジェクト指向のクラス構造と関連）
クラスが持つ属性（プロパティ）やメソッド、さらにクラス同士の関係性を表現するUML図です。関係記号として <|--（継承）、*--（コンポジション：強い所有）、o--（集約：弱い所有）、..|>（インターフェース実装）、..>（依存）などを使い分けられます。
```mermaid
classDiagram
class Person {
+String name
+int age
+getDetails() String
}
class Employee {
+int salary
+calculateBonus() int
}
class Manager {
-List~Employee~ team
+addMember(Employee) void
}
Person <|-- Employee
Employee <|-- Manager
Manager o-- Employee
```状態図（stateDiagram-v2：ステータス遷移の可視化）
注文ステータスやタスクの実行状態が「どんなきっかけ（イベント）で次の状態へ移り変わるか」を表す図です。[*] が開始点と終了点を表し、state 状態名 { ... } を使えば状態の中にさらに細かいサブ状態を入れ子（ネスト）にすることも可能です。
```mermaid
stateDiagram-v2
[*] --> 待機中
待機中 --> 実行中: 処理開始
実行中 --> 完了: 成功
実行中 --> エラー: 失敗
エラー --> 待機中: リトライ
完了 --> [*]
エラー --> [*]: 中止
```ジャーニーチャート（journey：ユーザー体験と満足度の可視化）
サービスを利用するユーザーが辿る各ステップと、そのときの感情・満足度（1〜5の5段階スコア）を視覚化できます。どこでユーザーがストレスを感じているか（ボトルネック）をチームで議論するときに役立ちます。
```mermaid
journey
title ECサイトでの初回購入体験
section 会員登録
アカウント作成: 5: ユーザー
確認メール認証: 4: ユーザー
section 商品購入
商品の検索: 4: ユーザー
カートに追加: 5: ユーザー
配送先・決済入力: 2: ユーザー
```Gitグラフ（gitGraph：ブランチ戦略とマージ履歴の説明）
開発チームの運用ルール（Git FlowやGitHub Flowなど）を新メンバーへ説明する際、commit・branch・checkout・merge を順番に書くだけで色分けされた分かりやすいブランチ図を生成できます。
```mermaid
gitGraph
commit
branch develop
checkout develop
commit
branch feature-login
checkout feature-login
commit
checkout develop
merge feature-login
checkout main
merge develop tag: "v1.0.0"
```パイチャート（pie：データの構成比率を円グラフで表示）
アンケート結果やアクセス比率、使用言語の割合などをサッと円グラフにしたいときに便利です。ラベルと数値を並べるだけで自動的にパーセンテージが計算されて描画されます。
```mermaid
pie
title 問い合わせチャネル別の割合
"Webフォーム" : 48.5
"チャットサポート" : 31.5
"電話" : 12.0
"その他" : 8.0
```要件図・C4図（システム要件管理と全体アーキテクチャの俯瞰）
より上流の要件定義やアーキテクチャ設計向けに、要件とリスク・検証方法を紐づける要件図（requirementDiagram）や、ユーザー・自社システム・外部システムの全体関係を階層的に俯瞰するC4モデル図（C4Context など）もサポートされています。
```mermaid
C4Context
title 予約システムのコンテキスト図
Person(customer, "顧客", "Webから予約を行うユーザー")
System(booking, "予約管理システム", "空き枠の確認と予約受付を行う")
System_Ext(payment, "外部決済サービス", "クレジットカード決済を処理")
Rel(customer, booking, "予約の作成・確認")
Rel(booking, payment, "決済処理の依頼")
```アーキテクチャダイアグラム（architecture-beta：クラウド・サーバー構成図）
Mermaid v11系で追加された注目の新記法がアーキテクチャダイアグラム（architecture-beta）です。クラウド環境やサーバー、データベース、キャッシュなどのインフラ構成図をアイコン付きで視覚化できます。
標準アイコン（cloud・server・database・disk・internet）に加え、対応環境（DocBaseなどアイコンセットが読み込まれている環境）では logos:aws-s3 や logos:slack-icon のような拡張ロゴアイコンも指定できます。接続方向も :R --> L:（右から左へ）や :B --> T:（下から上へ）と細かく制御可能です。
```mermaid
architecture-beta
group api(cloud)[API Layer]
group app(server)[App Layer]
group data(database)[Data Layer]
service web(internet)[Web Client]
service gateway(cloud)[API Gateway] in api
service auth(server)[Auth Service] in app
service db(database)[Main DB] in data
web:R --> L:gateway
gateway:B --> T:auth
auth:B --> T:db
```実務での活用シーンと「生成AI × Mermaid」の時短ワークフロー
記法を一通り知っておくと便利ですが、現在の実務においてMermaidがさらに脚光を浴びている大きな理由が「定番ツールでの標準サポート」と「生成AIとの組み合わせ」です。
生成AI（ChatGPT・Claude・Gemini）に10秒で図の下書きを作ってもらう方法
生成AIは画像として正確な日本語入りの図表を描くのは苦手とすることがありますが、「テキストであるMermaidコード」を出力させるのは大得意です。会議の箇条書きメモや仕様書の下書きをAIに渡し、次のようなプロンプト（指示文）を添えるだけで、数秒でたたき台のコードが完成します。
【そのまま使えるAI指示プロンプト例】
以下の業務手順メモをもとに、Mermaid記法のフローチャート（flowchart LR）を作成してください。
・構文エラーを防ぐため、日本語ラベルはすべてダブルクォーテーション（""）で囲んでください。
・条件分岐（在庫あり／なし、決済成功／失敗）がひと目で分かるように整理してください。
（ここに箇条書きのメモや仕様文を貼り付ける）AIが出力したコードをDocBaseやNotion、Mermaid Live Editorに貼り付け、「やっぱりこの分岐の後に管理者通知を1つ足そう」と思ったら自分の手で1行書き足すだけ。ゼロから四角形を並べていた作業が数分で完了します。
WebサイトやWordPressブログにMermaidを表示したい場合は？
DocBase・Notion・GitHub・Qiita・Zennなどでは最初からMermaidが組み込まれていますが、自社のWebページやWordPress記事の中でMermaidを描画したい場合は、公式CDNからスクリプトを読み込むだけで簡単に導入できます（ブラウザがHTMLのDOM（Document Object Model）を読み込んだタイミングで、class="mermaid" が付いた要素を自動的にSVG図表へ変換してくれます）。
<!-- Webページ上でMermaidを描画する最小構成サンプル -->
<pre class="mermaid">
flowchart LR
A["下書き作成"] --> B["レビュー確認"] --> C["記事公開"]
</pre>
<script type="module">
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
mermaid.initialize({ startOnLoad: true });
</script>図が表示されない・崩れるときは？よくあるエラー原因と解決法
Mermaidを書いていて「Syntax error in text（構文エラー）」と出て図が表示されなかったり、線がごちゃごちゃに絡まってしまったりしたときは、次の5つのポイントを確認するとほとんどのケースですぐに解決できます。
- ラベルの中に半角カッコ
()や記号が入っている（一番多い原因！）
たとえばA[データ取得(API)]と書くと、Mermaidは中の(API)を「角丸ノードの記号かな？」と誤認して構文エラーになります。日本語やカッコ・スラッシュ・コロンを含むラベルはA["データ取得(API)"]のようにダブルクォーテーションで囲むのがエラーを防ぐ一番確実な鉄則です。 - ノードIDや文字に小文字の「
end」をそのまま使っている
Mermaidでは小文字のendがサブグラフや条件分岐を閉じる予約語として使われています。そのためA --> endと書くとエラーになります。大文字のEND["終了"]やfinish["end"]に変更しましょう。 - コードブロックの閉じ忘れや前後の空行不足
開始の```mermaidと終了の```が正しく対になっているか、全角スペースが紛れ込んでいないかを確認します。また、ツールによってはコードブロックの上下に1行ずつ空行を入れることで描画崩れが解消することがあります。 - 要素が多すぎて線が絡まり、図が小さくなって読めない
1つの図に50個も60個も要素を詰め込むと自動レイアウトが複雑になりすぎてしまいます。「TD（縦向き）とLR（横向き）を切り替えて見やすい方を選ぶ」「subgraphでグループ分けする」「全体概要図と例外処理の詳細図の2枚に分割する」のが読みやすい図解にするコツです。 - 利用ツールのMermaidバージョンによる未対応構文
architecture-betaなどの比較的新しい図表タイプは、お使いのWikiやプラグインに搭載されているMermaidのバージョンが古いと認識されない場合があります。新しい記法が動かないときは、まず公式の Mermaid Live Editor で構文自体が正しいかを確かめてみると原因を切り分けやすくなります。
Mermaidで描ける図の種類と用途の早見表
「今回の資料にはどの図を使えばいいかな？」と迷ったときにすぐ振り返れるよう、本記事で紹介した図表タイプの宣言キーワードと主な用途を一覧表にまとめました。
| 図表の種類 | 1行目の宣言キーワード | 主な用途・おすすめシーン |
|---|---|---|
| フローチャート | flowchart TD / graph LR |
業務マニュアルの手順、条件分岐、処理フローの整理 |
| シーケンス図 | sequenceDiagram |
API通信、フロント・サーバー・DB間の時系列のやり取り |
| ER図 | erDiagram |
データベースのテーブル設計、主キー・外部キーと1対多の関係 |
| ガントチャート | gantt |
プロジェクトの工程表、タスク期間と依存関係の管理 |
| クラス図 | classDiagram |
オブジェクト指向設計のクラス構成・継承・集約の可視化 |
| 状態図 | stateDiagram-v2 |
注文やジョブのステータス遷移、画面状態の移り変わり |
| ジャーニーチャート | journey |
カスタマージャーニーと各行動ステップの満足度分析 |
| Gitグラフ | gitGraph |
チームのブランチ運用ルール・コミットとマージ履歴の解説 |
| パイチャート | pie |
データの内訳やシェア比率を示すシンプルな円グラフ |
| 要件図 | requirementDiagram |
システム要件・リスク度合い・検証方法と構成要素の紐づけ |
| C4モデル図 | C4Context ほか |
ユーザー・自社システム・外部サービス全体の関係俯瞰 |
| アーキテクチャ図 | architecture-beta |
クラウド環境やサーバー・DB・API基盤のインフラ構成図 |
まとめ
本記事のポイント
- Mermaid（マーメイド）は、Markdown感覚のシンプルなテキストを書くだけで図表（SVG）を自動生成できるJavaScriptライブラリ。
- 画像を書き出して貼り直す手間がなくなり、文書と図の一元管理・チーム全員での手軽な更新・Git等での変更履歴追跡・図内テキストのキーワード検索が可能になる。
- まずは出番の多い「フローチャート」「シーケンス図」「ER図」「ガントチャート」の4つから試し、日本語や記号を含むラベルは
""で囲むとエラーを防ぎやすい。 - DocBase・Notion・GitHubなどでそのまま使えるうえ、生成AIにメモを渡してMermaidコードを下書きしてもらう活用法で作図時間を大幅に短縮できる。
「図を作るのは時間がかかるもの」という固定観念も、Mermaidを取り入れるだけで「文章を書く延長でサッと図解を添えられる」という軽快な体験に変わります。まずは本記事のサンプルコードをコピーして1行書き換えるところから、ぜひ日々のマニュアル作成やチームの情報共有に役立ててみてください。
