T-CREATOR

Mermaid とは何者か？図をコードで描く“Diagrams as Code”の価値と適用範囲を一気読み

Mermaid とは何者か？図をコードで描く“Diagrams as Code”の価値と適用範囲を一気読み

あなたは日々の開発業務で、図やフローチャートを作成する機会が多いのではないでしょうか。PowerPoint で作った図表が古くなって更新が面倒だったり、チームメンバーとの共有で苦労したりした経験はありませんか。

そんな悩みを一気に解決してくれるのが「Mermaid」です。テキストベースで美しい図表を作成できるこの革新的なツールは、開発現場における図表作成の常識を覆しています。本記事では、Mermaid の基本概念から実際の活用方法まで、初心者の方にも分かりやすく解説していきます。

Mermaid の正体と特徴

JavaScript ベースの図表生成ライブラリ

まず、Mermaid とは一体何なのでしょうか。簡単に言えば、テキストを書くだけで図表が自動的に生成される魔法のようなツールです。

2014 年に Knut Svensen によって開発された Mermaid は、JavaScript ベースの図表生成ライブラリとして、現在 GitHub で活発に開発が続けられています。最大の特徴は、複雑なグラフィカルツールを使わずに、シンプルなテキスト記述だけで美しい図表を作成できることです。

javascript// Mermaidの基本的な実装
import mermaid from 'mermaid';

// 初期化設定
mermaid.initialize({
  startOnLoad: true,
  theme: 'default',
  securityLevel: 'loose',
});

たった数行のコードで Web ページに組み込むことができ、特別なソフトウェアのインストールも不要です。ブラウザさえあれば、誰でも美しい図表を作成・表示できるのが大きな魅力ですね。

html<!-- CDN経由での読み込み -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<!-- Mermaid図表の記述 -->
<div class="mermaid">
  graph TD A[開始] --> B{条件判定} B -->|Yes| C[処理A] B
  -->|No| D[処理B]
</div>

テキストから図表を自動生成する仕組み

「テキストから図表が生成される」なんて、最初は信じられないかもしれません。でも、実際に Mermaid の仕組みを理解すると、その革新性に驚かされるはずです。

Mermaid の核心は、独自の構文解析エンジンにあります。あなたが書いたシンプルなテキストを解析し、美しい SVG 形式の図表として出力してくれるのです。

markdown```mermaid
flowchart LR
  text[テキスト記述] -->|構文解析| parser[パーサー]
  parser -->|AST生成| ast[抽象構文木]
  ast -->|レンダリング| svg[SVG出力]
  svg -->|表示| browser[ブラウザ表示]
```

驚くべきことに、この処理により複雑な図表でも数行のテキストで表現できるようになります。「こんなに簡単でいいの？」と思うかもしれませんが、これが Mermaid の魅力なのです。

実際に見てみましょう。プロジェクトの開発フローを表現する場合、以下のように記述するだけです。

markdown```mermaid
flowchart TD
    start[プロジェクト開始] --> planning[要件定義]
    planning --> design[設計]
    design --> coding[実装]
    coding --> test[テスト]
    test --> deploy[デプロイ]
```

mermaidflowchart TD
    start[プロジェクト開始] --> planning[要件定義]
    planning --> design[設計]
    design --> coding[実装]
    coding --> test[テスト]
    test --> deploy[デプロイ]

Diagrams as Code の概念とメリット

ここで重要な概念「Diagrams as Code（図表をコードとして扱う）」について説明しましょう。これは単なる技術的なトレンドではありません。開発現場のワークフローを根本から変える革新的なアプローチなのです。

従来の図表作成では、PowerPoint や Visio などの GUI ツールを使っていました。しかし、Diagrams as Code では図表をプログラムコードと同様にテキストで管理します。「なぜそんなことをするの？」と思われるかもしれませんが、そのメリットは計り知れません。

バージョン管理との親和性

最大のメリットは、Git などのバージョン管理システムとの完璧な親和性です。これまで PowerPoint ファイルの変更履歴を追うのに苦労した経験はありませんか？テキストベースの Mermaid なら、コードと同じように変更履歴を詳細に追跡できます。

従来の図表ツールMermaid
バイナリファイルテキストファイル
差分確認困難行単位での差分確認
コンフリクト解決困難マージ処理可能

自動化と CI/CD 連携

さらに驚くべきことに、図表の生成を完全に自動化できます。コードの変更と同時に図表も自動更新される仕組みを構築できるのです。

yaml# GitHub Actions での自動図表生成例
name: Generate Diagrams
on: [push]
jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Generate Mermaid diagrams
        uses: mermaidjs/mermaid-cli@v1
        with:
          args: -i docs/*.mmd -o assets/

コードレビューの対象化

そして何より重要なのが、図表もコードレビューの対象にできることです。「設計図についてチームで議論したいけど、どうやって共有しよう？」という悩みが一気に解決されます。プルリクエストで図表の変更内容を行単位で確認し、チーム全体で建設的な議論ができるようになります。

対応している図表の種類

「Mermaid で作れる図表って、どんなものがあるの？」と疑問に思われるかもしれません。実は、開発現場で必要とされるほぼ全ての図表タイプに対応しています。

その豊富さに驚かれるはずです。主要な図表タイプを実際のコード例とともに見ていきましょう。

フローチャート・シーケンス図

フローチャート

プロセスやアルゴリズムの流れを表現するのに最適です。

markdown
```mermaid
flowchart TB
    input[ユーザー入力] --> validate{入力値検証}
    validate -->|有効| process[データ処理]
    validate -->|無効| error[エラー表示]
    process --> save[データ保存]
    save --> success[成功画面]
    error --> input
```

mermaidflowchart TB
    input[ユーザー入力] --> validate{入力値検証}
    validate -->|有効| process[データ処理]
    validate -->|無効| error[エラー表示]
    process --> save[データ保存]
    save --> success[成功画面]
    error --> input

フローチャートは条件分岐、ループ処理、並列処理など、複雑なロジックも直感的に表現できます。開発者だけでなく、非技術者にも理解しやすい形で業務プロセスを可視化できるのが特徴です。

シーケンス図

システム間やオブジェクト間のやり取りを時系列で表現します。

markdown```mermaid
sequenceDiagram
    participant User as ユーザー
    participant App as アプリケーション
    participant API as API サーバー
    participant DB as データベース

    User->>App: ログイン要求
    App->>API: 認証リクエスト
    API->>DB: ユーザー情報取得
    DB-->>API: ユーザーデータ
    API-->>App: 認証結果
    App-->>User: ログイン完了
```

mermaidsequenceDiagram
    participant User as ユーザー
    participant App as アプリケーション
    participant API as API サーバー
    participant DB as データベース

    User->>App: ログイン要求
    App->>API: 認証リクエスト
    API->>DB: ユーザー情報取得
    DB-->>API: ユーザーデータ
    API-->>App: 認証結果
    App-->>User: ログイン完了

シーケンス図は、特に Web アプリケーションの API 設計や、マイクロサービス間の通信設計に威力を発揮します。

ガントチャート・クラス図

ガントチャート

プロジェクト管理における工程管理に活用できます。

markdown```mermaid
gantt
    title プロジェクトスケジュール
    dateFormat  YYYY-MM-DD
    section 要件定義
    要件収集        :a1, 2024-01-01, 10d
    要件分析        :a2, after a1, 5d
    section 設計
    基本設計        :b1, after a2, 15d
    詳細設計        :b2, after b1, 10d
    section 実装
    フロントエンド  :c1, after b2, 20d
    バックエンド    :c2, after b2, 25d
```

mermaidgantt
    title プロジェクトスケジュール
    dateFormat  YYYY-MM-DD
    section 要件定義
    要件収集        :a1, 2024-01-01, 10d
    要件分析        :a2, after a1, 5d
    section 設計
    基本設計        :b1, after a2, 15d
    詳細設計        :b2, after b1, 10d
    section 実装
    フロントエンド  :c1, after b2, 20d
    バックエンド    :c2, after b2, 25d

従来のプロジェクト管理ツールと比べ、テキストベースでの工程管理により、開発プロセスに組み込みやすくなります。

クラス図

オブジェクト指向設計における クラス間の関係を表現します。

markdown```mermaid
classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class Order {
        +String orderId
        +Date orderDate
        +calculateTotal()
    }
    class Product {
        +String productId
        +String name
        +Double price
    }

    %% User 1 ---- 0..* Order
    User "1" -- "0..*" Order : places

    %% Order 0..* ---- 1 Product
    Order "0..*" -- "1" Product : contains

```

mermaidclassDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class Order {
        +String orderId
        +Date orderDate
        +calculateTotal()
    }
    class Product {
        +String productId
        +String name
        +Double price
    }

    %% User 1 ---- 0..* Order
    User "1" -- "0..*" Order : places

    %% Order 0..* ---- 1 Product
    Order "0..*" -- "1" Product : contains

状態遷移図・ER 図

状態遷移図

システムやオブジェクトの状態変化を表現します。

markdown```mermaid
stateDiagram-v2
    [*] --> Inactive
    Inactive --> Pending : start()
    Pending --> Active : approve()
    Pending --> Rejected : reject()
    Active --> Suspended : suspend()
    Suspended --> Active : resume()
    Active --> [*] : complete()
    Rejected --> [*]
```

mermaidstateDiagram-v2
    [*] --> Inactive
    Inactive --> Pending : start()
    Pending --> Active : approve()
    Pending --> Rejected : reject()
    Active --> Suspended : suspend()
    Suspended --> Active : resume()
    Active --> [*] : complete()
    Rejected --> [*]

Web アプリケーションのユーザー認証フローや、注文処理の状態管理など、複雑なビジネスロジックの可視化に適しています。

ER 図

データベース設計における実体関連図を作成できます。

markdown```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER_ITEM }o--|| PRODUCT : references
    PRODUCT }o--|| CATEGORY : belongs_to

    USER {
        int user_id PK
        string name
        string email
        datetime created_at
    }
    ORDER {
        int order_id PK
        int user_id FK
        datetime order_date
        decimal total_amount
    }
```

mermaiderDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER_ITEM }o--|| PRODUCT : references
    PRODUCT }o--|| CATEGORY : belongs_to

    USER {
        int user_id PK
        string name
        string email
        datetime created_at
    }
    ORDER {
        int order_id PK
        int user_id FK
        datetime order_date
        decimal total_amount
    }

その他の特殊な図表

Mermaid は他にも多様な図表タイプをサポートしています。

パイチャート

データの構成比を視覚的に表現します。

markdown```mermaid
pie title 開発工数の割合
    "フロントエンド" : 35
    "バックエンド" : 40
    "インフラ" : 15
    "テスト" : 10
```

mermaidpie title 開発工数の割合
    "フロントエンド" : 35
    "バックエンド" : 40
    "インフラ" : 15
    "テスト" : 10

ジャーニーマップ

ユーザーの行動フローを可視化します。

markdown```mermaid
journey
    title ユーザー登録フロー
    section 発見
      ランディングページ訪問: 3: User
      サービス内容確認: 4: User
    section 登録
      登録フォーム入力: 2: User
      メール認証: 3: User
      アカウント作成完了: 5: User
```

mermaidjourney
    title ユーザー登録フロー
    section 発見
      ランディングページ訪問: 3: User
      サービス内容確認: 4: User
    section 登録
      登録フォーム入力: 2: User
      メール認証: 3: User
      アカウント作成完了: 5: User

Mermaid が解決する課題

従来の図表作成ツールの限界

従来の PowerPoint や Visio、Drawio といったツールには、現代の開発環境において重要な課題がありました。

ファイル形式と互換性の問題

従来ツールの多くはバイナリ形式でファイルを保存するため、以下の問題が発生していました。

課題従来ツールMermaid
ファイルサイズ大容量軽量テキスト
プラットフォーム依存特定ソフト必須ブラウザで表示可能
バージョン間互換性問題発生しやすいテキストベースで安定

編集・更新の複雑さ

図表の部分的な修正や要素の追加時に、レイアウトの再調整が必要になることが多く、工数増加の原因となっていました。

markdown```mermaid
flowchart LR
    old[従来ツール] --> manual[手動レイアウト調整]
    manual --> time[時間消耗]

    new[Mermaid] --> auto[自動レイアウト]
    auto --> efficient[効率的更新]
```


mermaidflowchart LR
    old[従来ツール] --> manual[手動レイアウト調整]
    manual --> time[時間消耗]

    new[Mermaid] --> auto[自動レイアウト]
    auto --> efficient[効率的更新]

Mermaid では自動レイアウト機能により、要素の追加や削除時も適切なレイアウトが維持されます。

バージョン管理とコードレビューの課題

開発プロジェクトにおいて、図表の変更履歴管理は重要な課題でした。

変更履歴の追跡困難

バイナリファイルでは変更点の特定が困難で、どの部分がいつ変更されたかを把握できませんでした。

markdown```mermaid
gitGraph
  commit id: "初期図表作成"
  commit id: "フロー追加（詳細不明）"
  commit id: "レイアウト調整（差分不明）"
  commit id: "要素削除（何を削除？）"

```

mermaidgitGraph
  commit id: "初期図表作成"
  commit id: "フロー追加（詳細不明）"
  commit id: "レイアウト調整（差分不明）"
  commit id: "要素削除（何を削除？）"

レビュープロセスの非効率性

図表の変更内容をチームで確認する際、ファイルを個別にダウンロードして比較する必要がありました。

Mermaid による解決策は以下の通りです。

markdown
```mermaid
sequenceDiagram
    participant Dev as 開発者
    participant Git as Git
    participant Review as レビュアー

    Dev->>Git: 図表変更をプッシュ
    Git->>Review: 差分表示（行単位）
    Review->>Git: コメント・承認
    Git->>Dev: フィードバック通知
```


mermaidsequenceDiagram
    participant Dev as 開発者
    participant Git as Git
    participant Review as レビュアー

    Dev->>Git: 図表変更をプッシュ
    Git->>Review: 差分表示（行単位）
    Review->>Git: コメント・承認
    Git->>Dev: フィードバック通知

チーム開発での図表共有問題

同期とコラボレーションの課題

複数人で同一の図表を編集する際、ファイルロックや競合状態が発生しやすく、効率的なコラボレーションが困難でした。

アクセス権限とツール統一

チームメンバー全員が同じ図表作成ツールを保有している必要があり、ライセンス費用やツール習得コストが課題となっていました。

Mermaid が提供する解決策を図で示します。

markdown```mermaid
flowchart TB
    subgraph "従来の課題"
        license[ライセンス費用]
        sync[同期問題]
        conflict[競合状態]
    end

    subgraph "Mermaidによる解決"
        free[無料利用]
        git[Git管理]
        merge[マージ可能]
    end

    license --> free
    sync --> git
    conflict --> merge
```

mermaidflowchart TB
    subgraph "従来の課題"
        license[ライセンス費用]
        sync[同期問題]
        conflict[競合状態]
    end

    subgraph "Mermaidによる解決"
        free[無料利用]
        git[Git管理]
        merge[マージ可能]
    end

    license --> free
    sync --> git
    conflict --> merge

活用シーンと適用範囲

Mermaid の活用場面は多岐にわたり、技術文書からプレゼンテーション資料まで幅広く対応できます。

ドキュメント作成での活用

技術仕様書での利用

システムアーキテクチャや API 仕様書において、Mermaid は特に威力を発揮します。

markdown```mermaid
flowchart TB
    subgraph "フロントエンド"
        react[React App]
        redux[Redux Store]
    end

    subgraph "バックエンド"
        api[REST API]
        auth[認証サービス]
        db[(データベース)]
    end

    react --> api
    api --> auth
    api --> db
    redux --> react
```

mermaidflowchart TB
    subgraph "フロントエンド"
        react[React App]
        redux[Redux Store]
    end

    subgraph "バックエンド"
        api[REST API]
        auth[認証サービス]
        db[(データベース)]
    end

    react --> api
    api --> auth
    api --> db
    redux --> react

README.md での活用

GitHub リポジトリの README ファイルに直接図表を埋め込めるため、プロジェクトの概要説明が格段に分かりやすくなります。

markdown# システム構成

```mermaid
graph LR
    A[ユーザー] --> B[Load Balancer]
    B --> C[Web Server]
    B --> D[Web Server]
    C --> E[Database]
    D --> E
```

markdown# API ドキュメント

RESTful APIやGraphQLのエンドポイント関係を可視化し、開発者の理解を促進できます。

```mermaid
sequenceDiagram
    participant Client
    participant Gateway as API Gateway
    participant Auth as 認証サービス
    participant Service as マイクロサービス

    Client->>Gateway: API リクエスト
    Gateway->>Auth: トークン検証
    Auth-->>Gateway: 認証結果
    Gateway->>Service: リクエスト転送
    Service-->>Gateway: レスポンス
    Gateway-->>Client: 結果返却
```

開発プロセスでの活用

設計段階での活用

システム設計の初期段階で、アーキテクチャの検討や議論に Mermaid を活用できます。

mermaidflowchart TD
    requirements[要件定義] --> architecture[アーキテクチャ設計]
    architecture --> detail[詳細設計]
    detail --> implementation[実装]

    architecture --> review{設計レビュー}
    review -->|修正必要| architecture
    review -->|承認| detail

テスト設計での活用

テストケースの関係性や、テスト実行フローの可視化にも効果的です。

mermaidstateDiagram-v2
    [*] --> TestPrepare
    TestPrepare --> UnitTest
    UnitTest --> IntegrationTest
    IntegrationTest --> E2ETest
    E2ETest --> TestComplete
    TestComplete --> [*]

    UnitTest --> TestFailed : エラー発生
    IntegrationTest --> TestFailed : エラー発生
    E2ETest --> TestFailed : エラー発生
    TestFailed --> TestPrepare : 修正後再実行

CI/CD パイプライン設計

継続的インテグレーション・継続的デプロイメントのワークフロー設計にも活用できます。

mermaidflowchart LR
    commit[コミット] --> build[ビルド]
    build --> test[テスト実行]
    test --> deploy_dev[開発環境デプロイ]
    deploy_dev --> approval{承認}
    approval -->|承認| deploy_prod[本番環境デプロイ]
    approval -->|却下| commit

    test -->|失敗| notification[通知]
    notification --> commit

プレゼンテーション・教育での活用

技術プレゼンテーション

技術カンファレンスや社内勉強会での発表資料作成時、Mermaid で作成した図表をスライドに埋め込むことで、視覚的に分かりやすいプレゼンテーションが作成できます。

新人研修・教育資料

システムの理解促進や、プログラミング概念の説明に効果的です。

mermaidflowchart TD
    start[プログラム開始] --> input[入力受付]
    input --> process[データ処理]
    process --> output[結果出力]
    output --> end_prog[プログラム終了]

    process --> error{エラー発生？}
    error -->|Yes| error_handle[エラー処理]
    error -->|No| output
    error_handle --> output

オンライン学習コンテンツ

Web 上の技術記事や学習プラットフォームで、複雑な概念を図解で説明する際に活用できます。記事の読者は、コードブロック内の Mermaid 記述を直接コピーして、自分の環境で再現・カスタマイズできるのも大きなメリットです。

まとめ

Mermaid は単なる図表作成ツールを超えた、現代の開発ワークフローに最適化された革新的なソリューションです。

主要なメリット

  • テキストベースによるバージョン管理の実現
  • チーム開発でのコラボレーション効率向上
  • 自動レイアウトによる保守性の向上
  • 豊富な図表タイプによる幅広い用途への対応

適用効果

  • ドキュメント作成工数の削減
  • 設計品質の向上とレビュー効率化
  • プロジェクト全体の可視化促進

Diagrams as Code という概念は、Infrastructure as Code や Documentation as Code と並んで、現代的な開発手法の重要な要素となっています。Mermaid の導入により、図表作成という日常的なタスクが、より効率的で持続可能なものに変わるでしょう。

今後のプロジェクトにおいて、Mermaid の活用を検討してみてはいかがでしょうか。シンプルなフローチャートから始めて、徐々に複雑な図表にも挑戦していくことで、その真価を実感できるはずです。

関連リンク

Mermaidの記事Mermaid

もっと見る

記事Article

もっと見る

ブログBlog

もっと見る

書籍レビューReview

もっと見る