Mermaid - テキストで図を描くダイアグラム作成ライブラリ

はじめに

ドキュメントに図を入れたいとき、どうしてますか？正直なところ、DrawioやFigmaで図を作って、スクショ撮って貼り付けて...という作業、面倒ですよね。しかも後から「ここの矢印の向き間違ってた」みたいな修正が入ると、また画像を作り直し。これ、意外と時間取られるんですよ。

そんな悩みを解決してくれるのがMermaidというライブラリです。GitHubで84,000スター超え、月間800万ダウンロードという圧倒的な支持を得ているダイアグラム作成ツールなんですよね。

Mermaidの発想はシンプルで、「テキストで図を定義して、自動でレンダリングする」というもの。Markdownを書くような感覚でフローチャートやシーケンス図が描ける。しかもGitHubのMarkdownやNotionでも標準対応しているので、特別な設定なしで使えることが多いです。

特徴・メリット

テキストベースで図が描ける

これが最大のメリット。図をテキストで定義するので、Gitでバージョン管理できます。「誰がいつどこを変更したか」が追えるのは、チーム開発では非常に助かる。

画像ファイルをリポジトリに含めなくていいので、プルリクエストのレビューも楽になりますね。

対応している図が豊富

Mermaidが対応している図の種類、かなり多いです。

フローチャート：処理の流れを表現
シーケンス図：システム間のやり取り
クラス図：オブジェクト指向設計
状態遷移図：状態の変化を表現
ER図：データベース設計
ガントチャート：プロジェクト管理
パイチャート：データの割合
マインドマップ：アイデアの整理
タイムライン：時系列の表現
Gitグラフ：ブランチ戦略の説明

最近はKanbanボードやレーダーチャート、アーキテクチャ図なんかも追加されています。正直、これだけあれば大体のドキュメントはカバーできますね。

主要プラットフォームで標準対応

GitHub：Markdownのコードブロックで直接表示
Notion：/mermaid で図を挿入可能
VS Code：拡張機能でプレビュー対応
Obsidian：ネイティブサポート

特別な設定なしで使える環境が多いのはありがたいです。

ライブエディタが便利

公式のMermaid Live Editorを使えば、ブラウザ上でリアルタイムにプレビューしながら図を作れます。作った図はPNGやSVGでエクスポートも可能。ちょっとした図を作りたいときに重宝しますね。

インストール方法

npmでインストール

npm install mermaid

CDNで読み込む

手軽に試したいなら、CDNからの読み込みが楽です。

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

環境なしで試す

インストールせずに試したいなら、Mermaid Live Editorがおすすめ。ブラウザだけで完結します。

基本的な使い方

フローチャート

最も使う機会が多いのがフローチャート。処理の流れを表現できます。

flowchart TD
    A[開始] --> B{条件分岐}
    B -->|Yes| C[処理A]
    B -->|No| D[処理B]
    C --> E[終了]
    D --> E

TDは上から下への流れ。LRにすると左から右になります。ノードの形も角括弧[]で四角、波括弧{}でひし形など、直感的に指定できます。

シーケンス図

API設計やシステム間連携の説明に便利。

sequenceDiagram
    participant U as ユーザー
    participant F as フロントエンド
    participant B as バックエンド
    participant D as データベース

    U->>F: ログインリクエスト
    F->>B: 認証API呼び出し
    B->>D: ユーザー情報取得
    D-->>B: ユーザーデータ
    B-->>F: 認証トークン
    F-->>U: ログイン完了

->>は実線矢印、-->>は破線矢印。participantでエイリアスを付けると可読性が上がります。

ER図

データベース設計のドキュメントに。

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"

    USER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        int user_id FK
        date created_at
    }

リレーションの記法（||--o{など）は最初は覚える必要がありますが、慣れれば直感的に書けるようになります。

ガントチャート

プロジェクトのスケジュール表現に。

gantt
    title プロジェクトスケジュール
    dateFormat YYYY-MM-DD

    section 設計
    要件定義     :a1, 2025-01-01, 7d
    基本設計     :a2, after a1, 5d

    section 開発
    フロントエンド :b1, after a2, 14d
    バックエンド   :b2, after a2, 14d

    section テスト
    結合テスト    :c1, after b1, 7d

クラス図

オブジェクト指向設計の可視化に。

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +fetch()
    }
    class Cat {
        +scratch()
    }
    Animal <|-- Dog
    Animal <|-- Cat