T-CREATOR

Mermaid 記法完全解説：Markdown でダイアグラム作成

Mermaid 記法完全解説：Markdown でダイアグラム作成

現代の情報社会では、複雑な概念やプロセスを視覚的に伝える能力がますます重要になっています。しかし、従来のダイアグラム作成ツールは習得に時間がかかり、ファイル管理も煩雑でした。そんな課題を解決する革新的なソリューションが Mermaid です。

Mermaid は、シンプルなテキスト記法で美しいダイアグラムを作成できる JavaScript ライブラリです。フローチャート、シーケンス図、ガントチャート、クラス図など、様々な種類の図表を Markdown ファイル内に直接記述できるため、エンジニアからビジネスパーソンまで幅広い方々の業務効率化に貢献しています。

本記事では、Mermaid の基本的な使い方から高度なカスタマイズまで、実践的なサンプルコードと共に詳しく解説いたします。読み終える頃には、あなたも美しく機能的なダイアグラムを自在に作成できるようになることでしょう。

Mermaid とは：テキストベースでダイアグラムを描く革新的ツール

Mermaid の特徴と革新性

Mermaid は 2014 年に Knut Sveidqvist によって開発されたオープンソースのダイアグラム生成ツールです。最大の特徴は、テキストベースの記法でダイアグラムを作成できることです。

従来のツールとの比較：

項目従来のツールMermaid
学習コスト高（UI 操作を覚える必要）低（シンプルな記法）
ファイル管理複雑（専用ファイル形式）簡単（テキストファイル）
バージョン管理困難容易（Git で管理可能）
チーム共有有料プランが必要な場合が多い無料（オープンソース）
保守性低（ツール依存）高（テキストベース）

なぜ Mermaid を選ぶべきか

1. 高い生産性 コードを書くようにダイアグラムを作成できるため、一度慣れてしまえば圧倒的に速く図表を作成できます。

2. 優れた保守性 テキストファイルなので、差分管理やバージョン管理が容易です。GitHub や GitLab での変更履歴も一目瞭然です。

3. 豊富な対応プラットフォーム GitHub、GitLab、Notion、Obsidian、VS Code など、多くのプラットフォームでネイティブサポートされています。

4. 拡張性とカスタマイズ性 CSS スタイルや JavaScript を用いた高度なカスタマイズが可能です。

Markdown との組み合わせがもたらす文書作成の効率化

ドキュメント作成革命

Markdown と Mermaid の組み合わせは、技術文書作成に革命をもたらしました。以下のような統合的な文書作成が可能になります：

markdown# システム設計書

## 概要

本システムは、以下のような処理フローで動作します。

```mermaid
flowchart TD
    A[ユーザーリクエスト] --> B{認証確認}
    B -->|認証OK| C[データ処理]
    B -->|認証NG| D[エラー応答]
    C --> E[レスポンス生成]
    E --> F[ユーザーに応答]
    D --> F
```

## API 仕様

システム間の通信は以下のシーケンスで行われます。

```mermaid
sequenceDiagram
    participant Client
    participant API
    participant DB

    Client->>API: POST /api/data
    API->>DB: SELECT * FROM users
    DB-->>API: User data
    API-->>Client: Response
```

Mermaid の基本セットアップ

主要エディタ・プラットフォームでの有効化方法

Mermaid を利用するための環境設定は、使用するプラットフォームによって異なります。以下、主要な環境での設定方法をご紹介します。

GitHub / GitLab での利用

GitHub GitHub では 2022 年 2 月から Mermaid が標準サポートされています。特別な設定は不要で、以下のように記述するだけで自動的にダイアグラムが表示されます：

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

GitLab GitLab でも同様に、Mermaid ブロックが自動認識されます。GitLab CI でのドキュメント生成時にも対応しています。

VS Code での設定

1. 拡張機能のインストール

推奨拡張機能：

  • Markdown Preview Mermaid Support by Matt Bierner
  • Mermaid Editor by tomoyukim
bash# コマンドパレットから
Ctrl+Shift+P (Cmd+Shift+P) > "Extensions: Install Extensions"
# "Mermaid" で検索してインストール

2. settings.json の設定

json{
  "markdown.mermaid.enabledLanguageIds": [
    "markdown",
    "mermaid"
  ],
  "mermaidEditor.generate.theme": "default",
  "mermaidEditor.generate.backgroundColor": "white"
}

3. プレビューでの確認

markdown<!-- ファイル: README.md -->

# プロジェクト概要

```mermaid
flowchart LR
    A[要件定義] --> B[設計]
    B --> C[実装]
    C --> D[テスト]
    D --> E[リリース]
```

Ctrl+Shift+V (Cmd+Shift+V) でプレビューを開くと、ダイアグラムが表示されます。

Obsidian での設定

Obsidian では、コアプラグインとして Mermaid がサポートされています。

1. プラグインの有効化

設定 > コアプラグイン > Mermaid を有効化

2. 記法例

markdown# システム構成図

```mermaid
graph TB
    subgraph "フロントエンド"
        A[React App]
        B[State Management]
    end

    subgraph "バックエンド"
        C[Node.js API]
        D[PostgreSQL]
    end

    A --> C
    B --> A
    C --> D
```

3. カスタム CSS（オプション）

css/* .obsidian/snippets/mermaid-custom.css */
.mermaid {
  background-color: var(--background-primary);
  border-radius: 8px;
  padding: 16px;
}

.mermaid .node rect {
  fill: var(--interactive-accent);
  stroke: var(--interactive-accent);
}

GitHubPages、Notion、VS Code、Obsidian での設定

Notion での利用

Notion では 2021 年から Mermaid ダイアグラムがサポートされています。

1. コードブロックの作成

bash/code > 言語に "Mermaid" を選択

2. 基本的な使用例

mermaidpie title プロジェクト進捗
    "完了" : 70
    "進行中" : 20
    "未着手" : 10

3. Notion での制限事項

  • 一部の新しいダイアグラムタイプは未対応
  • カスタムスタイルには制限あり
  • 印刷時のレイアウトに注意が必要

Jekyll (GitHub Pages) での設定

GitHub Pages で静的サイトを構築する際の Mermaid 設定方法：

1. _config.yml の設定

yaml# _config.yml
markdown: kramdown
kramdown:
  syntax_highlighter: rouge

plugins:
  - jekyll-mermaid

2. Gemfile の更新

ruby# Gemfile
gem 'jekyll-mermaid'

3. レイアウトファイルの更新

html<!-- _layouts/default.html -->
<!DOCTYPE html>
<html>
  <head>
    <!-- 他のhead要素 -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({ startOnLoad: true });
    </script>
  </head>
  <body>
    {{ content }}
  </body>
</html>

4. 記事での使用

markdown---
layout: default
---

# 記事タイトル

<div class="mermaid">
graph TD
    A[記事作成] --> B[Git Push]
    B --> C[GitHub Actions]
    C --> D[サイト更新]
</div>

オンラインエディタとローカル環境の使い分け

オンラインエディタの活用

Mermaid Live Editor

  • URL: https://mermaid.live/
  • 特徴：公式のオンラインエディタ
  • 用途：クイックプロトタイピング、学習
mermaidsequenceDiagram
    participant A as アリス
    participant B as ボブ

    A->>B: こんにちは
    B-->>A: こんにちは！

    Note over A,B: 会話の開始

    A->>B: 元気ですか？
    B-->>A: とても元気です

その他のオンラインツール

  • Diagrams.net (旧 Draw.io) - Mermaid インポート機能
  • CodePen - HTML プレビューでの確認
  • JSFiddle - JavaScript と組み合わせたテスト

ローカル環境での開発

Node.js プロジェクトでの統合

bash# Mermaidのインストール
yarn add mermaid

# 開発用ツールのインストール
yarn add --dev @mermaid-js/mermaid-cli

javascript// mermaid-config.js
import mermaid from 'mermaid';

mermaid.initialize({
  startOnLoad: true,
  theme: 'dark',
  themeVariables: {
    primaryColor: '#ff6b6b',
    primaryTextColor: '#fff',
    primaryBorderColor: '#ff4757',
    lineColor: '#7bed9f',
    secondaryColor: '#70a1ff',
    tertiaryColor: '#5352ed',
  },
});

CLI ツールでの画像生成

bash# SVG形式で出力
yarn mmdc -i input.mmd -o output.svg

# PNG形式で出力
yarn mmdc -i input.mmd -o output.png

# 複数ファイルの一括変換
yarn mmdc -i 'diagrams/*.mmd' -o 'images/'

Docker 環境での活用

dockerfile# Dockerfile
FROM node:18-alpine

RUN npm install -g @mermaid-js/mermaid-cli

WORKDIR /workspace

COPY package*.json ./
RUN npm install

COPY . .

CMD ["npm", "start"]

yaml# docker-compose.yml
version: '3.8'
services:
  mermaid-generator:
    build: .
    volumes:
      - ./src:/workspace/src
      - ./output:/workspace/output
    command: mmdc -i src/ -o output/

この基本的なセットアップを完了すると、様々な環境で Mermaid ダイアグラムを作成・表示できるようになります。次のセクションでは、最も基本的で重要なダイアグラムタイプであるフローチャートについて詳しく学んでいきましょう。

フローチャート（Flowchart）完全マスター

フローチャートは、プロセスや意思決定の流れを視覚的に表現する最も基本的で重要なダイアグラムです。Mermaid では、直感的な記法で複雑なフローチャートを作成できます。

基本的なノードとエッジの記法

ノード（節点）の種類

Mermaid では、様々な形状のノードを使用できます：

mermaidflowchart TD
    A[長方形ノード]
    B(丸角長方形ノード)
    C([スタジアム型ノード])
    D[[サブルーチンノード]]
    E[(データベースノード)]
    F((円形ノード))
    G{ダイヤモンドノード}
    H{{六角形ノード}}
    I[/平行四辺形ノード/]
    J[\逆平行四辺形ノード\]
    K[/台形ノード\]
    L[\逆台形ノード/]

エッジ（矢印）の種類

mermaidflowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L
    M o--o N
    O <--> P
    Q -.・R
    S == T

矢印の意味：

記法意味用途
-->実線矢印通常のフロー
---実線（矢印なし）関連を示す
-.->点線矢印条件付きフロー
==>太い矢印重要なフロー
--o円付き矢印集約
--xX 付き矢印例外・エラー

分岐・判定・ループの表現方法

基本的な分岐構造

mermaidflowchart TD
    A[開始] --> B{条件判定}
    B -->|Yes| C[処理A実行]
    B -->|No| D[処理B実行]
    C --> E[終了]
    D --> E

複数分岐の表現

mermaidflowchart TD
    A[ユーザー入力] --> B{入力値チェック}
    B -->|有効| C[データ保存]
    B -->|無効| D[エラー表示]
    B -->|空| E[デフォルト値設定]
    C --> F[成功メッセージ]
    D --> G[再入力要求]
    E --> C
    F --> H[終了]
    G --> A

ループ構造の表現

mermaidflowchart TD
    A[開始] --> B[カウンター初期化]
    B --> C{条件確認}
    C -->|継続| D[処理実行]
    D --> E[カウンター更新]
    E --> C
    C -->|終了| F[結果出力]
    F --> G[終了]

複雑なビジネスプロセスの図解例

注文処理システムのフローチャート

mermaidflowchart TD
    A[注文受付] --> B{在庫確認}
    B -->|在庫あり| C[在庫引当]
    B -->|在庫なし| D[バックオーダー]
    C --> E{支払確認}
    E -->|支払済み| F[出荷準備]
    E -->|未払い| G[請求書発行]
    G --> H{支払期限}
    H -->|期限内| I[支払確認]
    H -->|期限切れ| J[催促通知]
    I --> F
    J --> K{再催促}
    K -->|継続| L[再催促送信]
    K -->|キャンセル| M[注文キャンセル]
    L --> H
    F --> N[配送手配]
    N --> O[配送完了]
    D --> P[入荷待ち]
    P --> Q{入荷確認}
    Q -->|入荷| C
    Q -->|未入荷| R[入荷予定通知]
    R --> P
    O --> S[注文完了]
    M --> T[キャンセル処理完了]

ソフトウェア開発のレビュープロセス

mermaidflowchart TD
    A[コード作成] --> B[セルフレビュー]
    B --> C{基本チェック}
    C -->|NG| D[修正作業]
    D --> B
    C -->|OK| E[プルリクエスト作成]
    E --> F[レビュー依頼]
    F --> G[チームレビュー]
    G --> H{レビュー結果}
    H -->|承認| I[マージ]
    H -->|要修正| J[修正指示]
    H -->|追加調査| K[調査・議論]
    J --> L[修正実施]
    L --> M[修正完了報告]
    M --> G
    K --> N[調査結果報告]
    N --> O{継続判定}
    O -->|継続| P[追加開発]
    O -->|中止| Q[開発中止]
    P --> A
    I --> R[CI/CD実行]
    R --> S{テスト結果}
    S -->|成功| T[本番デプロイ]
    S -->|失敗| U[ロールバック]
    U --> V[原因調査]
    V --> W[緊急修正]
    W --> R
    T --> X[デプロイ完了]

スタイリングとテーマの適用

基本的なスタイリング

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

    classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:2px

    class A,C startEnd
    class B process

カスタムテーマの適用

mermaid%%{init: {"theme": "dark", "themeVariables": {"primaryColor": "#ff6b6b", "primaryTextColor": "#ffffff", "primaryBorderColor": "#ff4757", "lineColor": "#7bed9f", "secondaryColor": "#70a1ff", "tertiaryColor": "#5352ed"}}}%%
flowchart TD
    A[Dark Theme] --> B[Custom Colors]
    B --> C[Professional Look]
    C --> D[Enhanced Readability]

シーケンス図（Sequence Diagram）の活用術

シーケンス図は、オブジェクト間の相互作用を時系列で表現する UML ダイアグラムです。API 設計、システム間通信、ユーザーインタラクションの可視化に特に有効です。

参加者（Actor）とメッセージの基本記法

基本的なシーケンス図

mermaidsequenceDiagram
    participant A as ユーザー
    participant B as ウェブサイト
    participant C as データベース

    A->>B: ログイン要求
    B->>C: ユーザー情報照会
    C-->>B: ユーザーデータ
    B-->>A: ログイン成功

参加者の定義方法

mermaidsequenceDiagram
    participant Frontend as フロントエンド
    participant API as REST API
    participant Auth as 認証サービス
    participant DB as データベース

    Frontend->>API: GET /api/user/profile
    API->>Auth: トークン検証
    Auth-->>API: 認証結果

    alt 認証成功
        API->>DB: SELECT user_data
        DB-->>API: ユーザーデータ
        API-->>Frontend: 200 OK + データ
    else 認証失敗
        API-->>Frontend: 401 Unauthorized
    end

同期・非同期通信の表現

同期通信の表現

mermaidsequenceDiagram
    participant Client as クライアント
    participant Server as サーバー
    participant Database as データベース

    Client->>+Server: POST /api/orders
    Note over Server: リクエスト処理開始
    Server->>+Database: BEGIN TRANSACTION
    Server->>Database: INSERT INTO orders
    Server->>Database: UPDATE inventory
    Database-->>-Server: 処理完了
    Server-->>-Client: 201 Created

    Note over Client,Database: 同期処理：レスポンスを待つ

非同期通信の表現

mermaidsequenceDiagram
    participant Client as クライアント
    participant API as API Gateway
    participant Queue as メッセージキュー
    participant Worker as ワーカー
    participant DB as データベース

    Client->>API: POST /api/process
    API->>Queue: メッセージ送信
    API-->>Client: 202 Accepted (Job ID)

    Note over Queue,Worker: 非同期処理
    Queue->>Worker: ジョブ実行
    Worker->>DB: データ処理
    DB-->>Worker: 処理結果
    Worker->>Queue: 処理完了通知

    Client->>API: GET /api/status/{job_id}
    API-->>Client: 処理状況

API 設計やユーザーフローの可視化

REST API の設計

mermaidsequenceDiagram
    participant Mobile as モバイルアプリ
    participant Gateway as API Gateway
    participant Auth as 認証サービス
    participant User as ユーザーサービス
    participant Order as 注文サービス
    participant Payment as 決済サービス
    participant Notification as 通知サービス

    Mobile->>Gateway: POST /api/v1/orders
    Gateway->>Auth: JWT トークン検証
    Auth-->>Gateway: 認証OK

    Gateway->>User: GET /users/{user_id}
    User-->>Gateway: ユーザー情報

    Gateway->>Order: POST /orders
    Order->>Payment: POST /payments
    Payment-->>Order: 決済結果

    alt 決済成功
        Order->>Notification: 注文完了通知
        Notification-->>Mobile: プッシュ通知
        Order-->>Gateway: 注文ID
        Gateway-->>Mobile: 201 Created
    else 決済失敗
        Order-->>Gateway: 400 Bad Request
        Gateway-->>Mobile: エラーレスポンス
    end

ユーザー体験フローの可視化

mermaidsequenceDiagram
    participant User as ユーザー
    participant App as アプリケーション
    participant Analytics as 分析サービス
    participant Recommendation as 推薦エンジン
    participant Cache as キャッシュ

    User->>App: アプリ起動
    App->>Analytics: 起動イベント送信
    App->>Cache: ユーザー設定取得

    alt キャッシュヒット
        Cache-->>App: 設定データ
    else キャッシュミス
        App->>Recommendation: 個人化データ要求
        Recommendation-->>App: 推薦データ
        App->>Cache: データキャッシュ
    end

    App-->>User: ホーム画面表示

    User->>App: 商品検索
    App->>Recommendation: 検索結果最適化
    App->>Analytics: 検索イベント記録
    Recommendation-->>App: 最適化結果
    App-->>User: 検索結果表示

    User->>App: 商品選択
    App->>Analytics: 商品閲覧イベント
    Analytics-->>App: 関連商品推薦
    App-->>User: 商品詳細表示

条件分岐とループの記述方法

条件分岐（alt/else）の使用

mermaidsequenceDiagram
    participant User as ユーザー
    participant System as システム
    participant DB as データベース
    participant Cache as キャッシュ

    User->>System: データ要求

    alt データがキャッシュに存在
        System->>Cache: データ取得
        Cache-->>System: キャッシュデータ
        System-->>User: 高速レスポンス
    else データがキャッシュに存在しない
        System->>DB: データベース照会
        DB-->>System: データ
        System->>Cache: データキャッシュ
        System-->>User: レスポンス
    end

    Note over User,Cache: キャッシュ戦略により応答速度を最適化

複数の条件分岐

mermaidsequenceDiagram
    participant User as ユーザー
    participant Auth as 認証システム
    participant Admin as 管理者
    participant DB as データベース

    User->>Auth: ログイン試行

    alt 正常ログイン
        Auth->>DB: ユーザー情報取得
        DB-->>Auth: ユーザーデータ
        Auth-->>User: ログイン成功
    else パスワード間違い
        Auth->>DB: 失敗回数記録
        Auth-->>User: 認証失敗
    else アカウントロック
        Auth->>Admin: アラート送信
        Auth-->>User: アカウントロック通知
    else システムエラー
        Auth->>Admin: エラー通知
        Auth-->>User: システムエラー
    end

ループ処理の表現

mermaidsequenceDiagram
    participant Client as クライアント
    participant API as API
    participant DB as データベース

    Client->>API: バッチ処理要求

    loop 各データに対して
        API->>DB: データ処理
        DB-->>API: 処理結果

        alt 処理成功
            Note over API: 成功カウント++
        else 処理失敗
            Note over API: エラーログ記録
        end
    end

    API-->>Client: バッチ処理結果

並列処理の表現

mermaidsequenceDiagram
    participant User as ユーザー
    participant Frontend as フロントエンド
    participant API1 as API1
    participant API2 as API2
    participant API3 as API3

    User->>Frontend: ページ表示要求

    par 並列データ取得
        Frontend->>API1: ユーザー情報取得
        and
        Frontend->>API2: 商品一覧取得
        and
        Frontend->>API3: 推薦商品取得
    end

    API1-->>Frontend: ユーザー情報
    API2-->>Frontend: 商品一覧
    API3-->>Frontend: 推薦商品

    Frontend-->>User: 完全なページ表示

この段階で、フローチャートとシーケンス図の基本的な使い方から高度な活用方法まで理解いただけたでしょう。次のセクションでは、プロジェクト管理に欠かせないガントチャートについて詳しく解説いたします。

ガントチャート（Gantt Chart）でプロジェクト管理

ガントチャートは、プロジェクトのスケジュール管理において最も重要なツールの一つです。Mermaid では、テキストベースでガントチャートを作成し、プロジェクトの進捗を視覚的に管理できます。

タスクとタイムラインの定義

基本的なガントチャート

mermaidgantt
    title Webアプリケーション開発プロジェクト
    dateFormat YYYY-MM-DD
    section 要件定義
    要件ヒアリング    :active, req1, 2024-01-01, 7d
    要件分析         :req2, after req1, 5d
    要件書作成       :req3, after req2, 3d
    section 設計
    システム設計     :design1, after req3, 10d
    UI/UX設計       :design2, after req3, 8d
    データベース設計  :design3, after design1, 5d
    section 開発
    フロントエンド開発 :dev1, after design2, 20d
    バックエンド開発  :dev2, after design3, 25d
    API開発         :dev3, after design1, 15d

詳細な日付指定

mermaidgantt
    title プロダクトローンチスケジュール
    dateFormat YYYY-MM-DD
    axisFormat %m/%d

    section Phase 1
    市場調査            :done, market, 2024-01-15, 2024-02-15
    競合分析            :done, competitor, 2024-01-20, 2024-02-10

    section Phase 2
    プロトタイプ開発     :active, proto, 2024-02-16, 2024-03-15
    ユーザーテスト       :testing, 2024-03-16, 2024-04-05

    section Phase 3
    正式版開発          :dev, after testing, 30d
    品質保証            :qa, after dev, 14d

    section Launch
    マーケティング準備   :marketing, 2024-04-01, 2024-05-15
    ローンチ            :milestone, launch, after qa, 0d

依存関係とマイルストーンの表現

複雑な依存関係

mermaidgantt
    title システム統合プロジェクト
    dateFormat YYYY-MM-DD

    section 基盤構築
    インフラ設計        :infra1, 2024-03-01, 10d
    サーバー構築        :infra2, after infra1, 7d
    ネットワーク設定     :infra3, after infra2, 5d

    section アプリケーション
    認証システム        :auth, after infra3, 15d
    ユーザー管理        :user, after auth, 12d
    データ管理          :data, after infra3, 20d

    section 統合テスト
    単体テスト          :unit, after user, 8d
    結合テスト          :integration, after data, 10d
    システムテスト       :system, after integration, 7d

    section デプロイ
    ステージング環境     :staging, after system, 3d
    本番デプロイ        :milestone, prod, after staging, 0d
    監視設定            :monitoring, after prod, 2d

マイルストーンの活用

mermaidgantt
    title アジャイル開発サイクル
    dateFormat YYYY-MM-DD

    section Sprint 1
    スプリント計画      :milestone, sp1-start, 2024-04-01, 0d
    ユーザーストーリー1  :story1, 2024-04-01, 5d
    ユーザーストーリー2  :story2, 2024-04-03, 7d
    スプリントレビュー   :milestone, sp1-review, 2024-04-14, 0d

    section Sprint 2
    スプリント計画      :milestone, sp2-start, 2024-04-15, 0d
    機能開発A          :feature-a, 2024-04-15, 8d
    機能開発B          :feature-b, 2024-04-17, 6d
    統合テスト          :integration, 2024-04-23, 3d
    スプリントレビュー   :milestone, sp2-review, 2024-04-28, 0d

    section リリース準備
    ドキュメント作成     :docs, after sp2-review, 3d
    最終テスト          :final-test, after docs, 2d
    リリース            :milestone, release, after final-test, 0d

実際のプロジェクトスケジュール作成例

Web サービス開発プロジェクト

mermaidgantt
    title ECサイト構築プロジェクト
    dateFormat YYYY-MM-DD

    section プロジェクト管理
    プロジェクト開始     :milestone, start, 2024-05-01, 0d
    週次MTG            :meeting, 2024-05-06, 2024-08-30

    section 要件定義フェーズ
    ステークホルダーヒアリング :done, req1, 2024-05-01, 7d
    業務フロー分析      :done, req2, after req1, 5d
    機能要件定義        :done, req3, after req2, 8d
    非機能要件定義      :done, req4, after req3, 5d
    要件定義書作成      :done, req5, after req4, 3d
    要件レビュー        :milestone, req-review, after req5, 0d

    section 基本設計フェーズ
    システム構成設計     :design1, after req-review, 10d
    画面設計            :design2, after req-review, 12d
    データベース設計     :design3, after req-review, 8d
    API設計            :design4, after design1, 7d
    セキュリティ設計     :design5, after design4, 5d
    基本設計レビュー     :milestone, design-review, after design5, 0d

    section 詳細設計フェーズ
    詳細設計書作成      :detail1, after design-review, 12d
    テスト設計          :detail2, after detail1, 8d
    詳細設計レビュー     :milestone, detail-review, after detail2, 0d

    section 開発フェーズ
    開発環境構築        :env, after detail-review, 3d
    フロントエンド開発   :frontend, after env, 25d
    バックエンド開発     :backend, after env, 30d
    管理画面開発        :admin, after backend, 15d
    決済システム連携     :payment, after backend, 10d

    section テストフェーズ
    単体テスト          :unit-test, after frontend, 10d
    結合テスト          :int-test, after admin, 12d
    システムテスト       :sys-test, after int-test, 8d
    受入テスト          :accept-test, after sys-test, 5d
    性能テスト          :perf-test, after accept-test, 7d

    section リリース準備
    本番環境構築        :prod-env, after perf-test, 5d
    データ移行          :migration, after prod-env, 3d
    運用手順書作成      :operation, after migration, 5d

    section 本番リリース
    本番リリース        :milestone, release, after operation, 0d
    監視・保守開始      :maintenance, after release, 30d
    プロジェクト完了     :milestone, end, after maintenance, 0d

進捗管理での活用テクニック

進捗状況の可視化

mermaidgantt
    title プロジェクト進捗状況（2024年4月時点）
    dateFormat YYYY-MM-DD

    section 完了済みタスク
    要件定義            :done, req, 2024-03-01, 14d
    基本設計            :done, design, after req, 12d

    section 進行中タスク
    フロントエンド開発   :active, frontend, 2024-04-01, 20d
    バックエンドAPI     :active, backend, 2024-04-05, 18d

    section 予定タスク
    統合テスト          :test, after frontend, 8d
    本番デプロイ        :deploy, after test, 3d

    section 遅延タスク
    データベース設計     :crit, db-design, 2024-03-25, 10d
    セキュリティ監査     :crit, security, after db-design, 5d

チーム別作業分担

mermaidgantt
    title チーム別作業スケジュール
    dateFormat YYYY-MM-DD

    section フロントエンドチーム
    UIコンポーネント開発  :ui-comp, 2024-06-01, 15d
    画面実装           :ui-pages, after ui-comp, 20d
    レスポンシブ対応    :responsive, after ui-pages, 8d

    section バックエンドチーム
    API開発           :api-dev, 2024-06-01, 25d
    データベース実装   :db-impl, 2024-06-05, 20d
    認証システム       :auth-sys, after api-dev, 10d

    section QAチーム
    テスト計画作成     :test-plan, 2024-06-10, 7d
    自動テスト構築     :auto-test, after test-plan, 12d
    手動テスト実行     :manual-test, after responsive, 10d

    section DevOpsチーム
    CI/CD構築         :cicd, 2024-06-01, 10d
    インフラ構築       :infra, after cicd, 8d
    監視システム       :monitoring, after infra, 5d

クラス図（Class Diagram）でシステム設計

クラス図は、オブジェクト指向システムの構造を表現する UML ダイアグラムの中核となるものです。Mermaid では、クラス間の関係性を明確に表現し、システム設計の理解を深めることができます。

クラス定義とアクセス修飾子

基本的なクラス定義

mermaidclassDiagram
    class User {
        -id: string
        -name: string
        -email: string
        -password: string
        +getId(): string
        +getName(): string
        +setName(name: string)
        +validateEmail(): boolean
        -hashPassword(): string
    }

    class Product {
        -id: string
        -name: string
        -price: number
        -stock: number
        +getId(): string
        +getPrice(): number
        +updateStock(quantity: number)
        +isAvailable(): boolean
    }

アクセス修飾子の表現

mermaidclassDiagram
    class BankAccount {
        -accountNumber: string
        -balance: number
        #interestRate: number
        +owner: string

        +deposit(amount: number): void
        +withdraw(amount: number): boolean
        +getBalance(): number
        -calculateInterest(): number
        #validateAmount(amount: number): boolean
        ~getAccountType(): string
    }

    note for BankAccount "アクセス修飾子:
    + public
    - private
    # protected
    ~ package"

継承・実装・関連の表現方法

継承関係

mermaidclassDiagram
    class Animal {
        -name: string
        -age: number
        +getName(): string
        +makeSound(): void
    }

    class Dog {
        -breed: string
        +bark(): void
        +fetch(): void
    }

    class Cat {
        -indoor: boolean
        +meow(): void
        +scratch(): void
    }

    Animal <|-- Dog
    Animal <|-- Cat

インターフェース実装

mermaidclassDiagram
    class <<interface>> Drawable {
        +draw(): void
        +resize(scale: number): void
    }

    class <<interface>> Movable {
        +move(x: number, y: number): void
        +getPosition(): Position
    }

    class Shape {
        -x: number
        -y: number
        -color: string
        +getColor(): string
        +setColor(color: string): void
    }

    class Circle {
        -radius: number
        +getArea(): number
        +draw(): void
        +resize(scale: number): void
        +move(x: number, y: number): void
    }

    class Rectangle {
        -width: number
        -height: number
        +getArea(): number
        +draw(): void
        +resize(scale: number): void
    }

    Drawable <|.. Circle
    Movable <|.. Circle
    Shape <|-- Circle
    Shape <|-- Rectangle
    Drawable <|.. Rectangle

関連・集約・合成関係

mermaidclassDiagram
    class University {
        -name: string
        -departments: Department[]
        +addDepartment(dept: Department): void
    }

    class Department {
        -name: string
        -professors: Professor[]
        +addProfessor(prof: Professor): void
    }

    class Professor {
        -name: string
        -title: string
        +teach(course: Course): void
    }

    class Course {
        -code: string
        -name: string
        -credits: number
    }

    class Student {
        -studentId: string
        -name: string
        +enroll(course: Course): void
    }

    University ||--o{ Department : 構成
    Department ||--o{ Professor : 雇用
    Professor ||--o{ Course : 担当
    Student }o--o{ Course : 履修

UML 準拠の設計図作成

EC サイトのドメインモデル

mermaidclassDiagram
    class Customer {
        -customerId: string
        -name: string
        -email: string
        -address: Address
        -orders: Order[]
        +placeOrder(items: CartItem[]): Order
        +getOrderHistory(): Order[]
        +updateProfile(info: CustomerInfo): void
    }

    class Order {
        -orderId: string
        -orderDate: Date
        -status: OrderStatus
        -items: OrderItem[]
        -totalAmount: number
        -shippingAddress: Address
        +calculateTotal(): number
        +updateStatus(status: OrderStatus): void
        +addItem(item: OrderItem): void
    }

    class OrderItem {
        -product: Product
        -quantity: number
        -unitPrice: number
        +getSubtotal(): number
    }

    class Product {
        -productId: string
        -name: string
        -description: string
        -price: number
        -category: Category
        -inventory: Inventory
        +isAvailable(): boolean
        +updatePrice(newPrice: number): void
    }

    class Category {
        -categoryId: string
        -name: string
        -parentCategory: Category
        -subCategories: Category[]
        +addSubCategory(category: Category): void
    }

    class Inventory {
        -productId: string
        -quantity: number
        -reservedQuantity: number
        +reserve(quantity: number): boolean
        +release(quantity: number): void
        +getAvailableQuantity(): number
    }

    class Address {
        -street: string
        -city: string
        -postalCode: string
        -country: string
        +getFullAddress(): string
        +validate(): boolean
    }

    class Payment {
        -paymentId: string
        -orderId: string
        -amount: number
        -method: PaymentMethod
        -status: PaymentStatus
        +process(): boolean
        +refund(): boolean
    }

    Customer ||--o{ Order : 注文
    Order ||--o{ OrderItem : 含む
    OrderItem }o--|| Product : 商品
    Product }o--|| Category : 分類
    Product ||--|| Inventory : 在庫
    Order ||--|| Payment : 支払い
    Customer ||--o{ Address : 住所
    Order }o--|| Address : 配送先

オブジェクト指向設計での実践例

MVC アーキテクチャの表現

mermaidclassDiagram
    class <<interface>> View {
        +render(data: any): void
        +handleUserInput(): void
    }

    class <<interface>> Model {
        +getData(): any
        +setData(data: any): void
        +validate(): boolean
    }

    class Controller {
        -model: Model
        -view: View
        +handleRequest(request: Request): Response
        +updateModel(data: any): void
        +updateView(): void
    }

    class UserController {
        -userService: UserService
        +createUser(userData: UserData): User
        +getUserById(id: string): User
        +updateUser(id: string, data: UserData): User
        +deleteUser(id: string): boolean
    }

    class UserModel {
        -id: string
        -name: string
        -email: string
        +validate(): boolean
        +save(): boolean
        +delete(): boolean
    }

    class UserView {
        -template: string
        +renderUserList(users: User[]): string
        +renderUserForm(): string
        +renderUserDetails(user: User): string
    }

    class UserService {
        -repository: UserRepository
        +createUser(data: UserData): User
        +findUserById(id: string): User
        +updateUser(user: User): User
        +deleteUser(id: string): boolean
    }

    class UserRepository {
        -database: Database
        +save(user: User): boolean
        +findById(id: string): User
        +findAll(): User[]
        +delete(id: string): boolean
    }

    Controller --> Model : 更新
    Controller --> View : 描画指示
    View --> Controller : イベント通知

    UserController --|> Controller
    UserModel ..|> Model
    UserView ..|> View

    UserController --> UserService : 依存
    UserService --> UserRepository : 依存
    UserController --> UserModel : 操作
    UserController --> UserView : 描画

デザインパターンの実装例

mermaidclassDiagram
    %% Singleton Pattern
    class DatabaseConnection {
        -instance: DatabaseConnection
        -connection: Connection
        -DatabaseConnection()
        +getInstance(): DatabaseConnection
        +getConnection(): Connection
        +close(): void
    }

    %% Factory Pattern
    class <<interface>> Animal {
        +makeSound(): string
    }

    class Dog {
        +makeSound(): string
    }

    class Cat {
        +makeSound(): string
    }

    class AnimalFactory {
        +createAnimal(type: string): Animal
    }

    %% Observer Pattern
    class <<interface>> Observer {
        +update(data: any): void
    }

    class Subject {
        -observers: Observer[]
        +addObserver(observer: Observer): void
        +removeObserver(observer: Observer): void
        +notifyObservers(data: any): void
    }

    class NewsAgency {
        -news: string
        +setNews(news: string): void
        +getNews(): string
    }

    class NewsChannel {
        -name: string
        +update(news: string): void
    }

    %% Strategy Pattern
    class <<interface>> PaymentStrategy {
        +pay(amount: number): boolean
    }

    class CreditCardPayment {
        -cardNumber: string
        -cvv: string
        +pay(amount: number): boolean
    }

    class PayPalPayment {
        -email: string
        +pay(amount: number): boolean
    }

    class PaymentContext {
        -strategy: PaymentStrategy
        +setStrategy(strategy: PaymentStrategy): void
        +executePayment(amount: number): boolean
    }

    %% 関係性の定義
    Animal <|.. Dog
    Animal <|.. Cat
    AnimalFactory --> Animal : creates

    Observer <|.. NewsChannel
    Subject <|-- NewsAgency
    NewsAgency --> Observer : notifies

    PaymentStrategy <|.. CreditCardPayment
    PaymentStrategy <|.. PayPalPayment
    PaymentContext --> PaymentStrategy : uses

この段階で、プロジェクト管理に効果的なガントチャートと、システム設計に不可欠なクラス図について詳しく学習できました。次のセクションでは、システムの状態遷移を表現する状態図について解説いたします。

状態図（State Diagram）で状態遷移を可視化

状態図は、システムやオブジェクトが取りうる状態とその間の遷移を表現するダイアグラムです。UI/UX フロー、ビジネスプロセス、システムの動作状態を明確に可視化できます。

状態とトランジションの基本記法

基本的な状態図

mermaidstateDiagram-v2
    [*] --> 待機中
    待機中 --> 処理中 : 開始
    処理中 --> 完了 : 成功
    処理中 --> エラー : 失敗
    完了 --> [*]
    エラー --> 待機中 : リトライ
    エラー --> [*] : 終了

詳細な状態遷移

mermaidstateDiagram-v2
    [*] --> 初期化
    初期化 --> 認証待ち : 初期化完了
    認証待ち --> 認証中 : ログイン試行
    認証中 --> ログイン済み : 認証成功
    認証中 --> 認証待ち : 認証失敗
    ログイン済み --> データ読み込み中 : データ要求
    データ読み込み中 --> データ表示 : 読み込み完了
    データ読み込み中 --> エラー表示 : 読み込み失敗
    データ表示 --> データ更新中 : 更新要求
    データ更新中 --> データ表示 : 更新成功
    データ更新中 --> エラー表示 : 更新失敗
    エラー表示 --> データ表示 : 再試行
    ログイン済み --> [*] : ログアウト

複合状態と並行状態の表現

複合状態（ネストした状態）

mermaidstateDiagram-v2
    [*] --> オフライン
    オフライン --> オンライン : 接続

    state オンライン {
        [*] --> アイドル
        アイドル --> 同期中 : データ同期開始
        同期中 --> アイドル : 同期完了

        state 同期中 {
            [*] --> アップロード中
            アップロード中 --> ダウンロード中 : アップロード完了
            ダウンロード中 --> [*] : ダウンロード完了
        }
    }

    オンライン --> オフライン : 切断
    オフライン --> [*] : 終了

並行状態

mermaidstateDiagram-v2
    [*] --> アプリケーション起動

    state アプリケーション起動 {
        state "UI処理" as ui
        state "バックグラウンド処理" as bg

        state ui {
            [*] --> UI初期化
            UI初期化 --> ユーザー入力待ち
            ユーザー入力待ち --> 画面更新中
            画面更新中 --> ユーザー入力待ち
        }

        state bg {
            [*] --> サービス初期化
            サービス初期化 --> データ監視中
            データ監視中 --> データ処理中
            データ処理中 --> データ監視中
        }

        ui --> [*]
        bg --> [*]
    }

    アプリケーション起動 --> [*] : アプリ終了

UI/UX フローやシステム状態の設計

モバイルアプリのユーザーフロー

mermaidstateDiagram-v2
    [*] --> スプラッシュ画面
    スプラッシュ画面 --> チュートリアル : 初回起動
    スプラッシュ画面 --> ログイン画面 : リピーター

    チュートリアル --> ログイン画面 : 完了

    ログイン画面 --> ログイン中 : ログイン実行
    ログイン中 --> ホーム画面 : 成功
    ログイン中 --> エラー表示 : 失敗
    エラー表示 --> ログイン画面 : 再試行

    ホーム画面 --> 商品一覧 : 商品検索
    ホーム画面 --> プロフィール : プロフィール選択
    ホーム画面 --> カート : カート選択

    商品一覧 --> 商品詳細 : 商品選択
    商品詳細 --> カート : カートに追加
    商品詳細 --> 商品一覧 : 戻る

    カート --> 決済画面 : 決済開始
    決済画面 --> 決済処理中 : 決済実行
    決済処理中 --> 完了画面 : 決済成功
    決済処理中 --> エラー画面 : 決済失敗
    完了画面 --> ホーム画面 : ホームに戻る
    エラー画面 --> 決済画面 : 再試行

    プロフィール --> ホーム画面 : 戻る
    カート --> ホーム画面 : 戻る

    note right of 決済処理中 : タイムアウト処理
    note for 完了画面 : 注文確認メール送信

Web アプリケーションの状態管理

mermaidstateDiagram-v2
    [*] --> 初期化中
    初期化中 --> 認証チェック中 : 初期化完了

    認証チェック中 --> 未認証 : トークンなし/無効
    認証チェック中 --> 認証済み : 有効なトークン

    未認証 --> ログインフォーム表示 : --
    ログインフォーム表示 --> ログイン処理中 : ログイン送信
    ログイン処理中 --> 認証済み : 認証成功
    ログイン処理中 --> ログインエラー : 認証失敗
    ログインエラー --> ログインフォーム表示 : エラー表示

    認証済み --> データ読み込み中 : --
    データ読み込み中 --> メイン画面 : データ取得成功
    データ読み込み中 --> エラー画面 : データ取得失敗

    メイン画面 --> 編集モード : 編集開始
    編集モード --> 保存中 : 保存実行
    保存中 --> メイン画面 : 保存成功
    保存中 --> 編集エラー : 保存失敗
    編集エラー --> 編集モード : エラー表示

    メイン画面 --> セッション期限切れ : トークン期限切れ
    編集モード --> セッション期限切れ : トークン期限切れ
    セッション期限切れ --> 未認証 : --

    エラー画面 --> データ読み込み中 : 再試行
    メイン画面 --> [*] : ログアウト

実際のアプリケーション設計例

ユーザー認証システム

mermaidstateDiagram-v2
    [*] --> ゲスト
    ゲスト --> 登録中 : 新規登録
    ゲスト --> ログイン中 : ログイン

    登録中 --> メール認証待ち : 登録完了
    登録中 --> 登録エラー : バリデーションエラー
    登録エラー --> ゲスト : 修正

    メール認証待ち --> アクティブユーザー : メール認証完了
    メール認証待ち --> 認証期限切れ : 期限切れ
    認証期限切れ --> ゲスト : 再登録要求

    ログイン中 --> アクティブユーザー : ログイン成功
    ログイン中 --> ログインエラー : ログイン失敗
    ログインエラー --> ゲスト : 再試行
    ログインエラー --> アカウントロック : 試行回数上限

    アカウントロック --> ゲスト : ロック解除

    アクティブユーザー --> パスワード変更中 : パスワード変更
    パスワード変更中 --> アクティブユーザー : 変更完了
    パスワード変更中 --> アクティブユーザー : 変更キャンセル

    アクティブユーザー --> 一時停止 : 管理者による停止
    一時停止 --> アクティブユーザー : 停止解除
    一時停止 --> 削除済み : アカウント削除

    アクティブユーザー --> [*] : ログアウト
    削除済み --> [*]

注文処理システム

mermaidstateDiagram-v2
    [*] --> カート空
    カート空 --> 商品選択中 : 商品追加
    商品選択中 --> カート内商品あり : 商品確定
    商品選択中 --> カート空 : キャンセル

    カート内商品あり --> 配送情報入力中 : 注文手続き開始
    カート内商品あり --> 商品選択中 : 商品変更
    カート内商品あり --> カート空 : カート空にする

    配送情報入力中 --> 決済方法選択中 : 配送情報確定
    配送情報入力中 --> カート内商品あり : 戻る

    決済方法選択中 --> 注文確認中 : 決済方法確定
    決済方法選択中 --> 配送情報入力中 : 戻る

    注文確認中 --> 決済処理中 : 注文確定
    注文確認中 --> 決済方法選択中 : 戻る

    決済処理中 --> 注文完了 : 決済成功
    決済処理中 --> 決済エラー : 決済失敗
    決済エラー --> 注文確認中 : 再試行
    決済エラー --> カート内商品あり : 注文中止

    注文完了 --> 出荷準備中 : --
    出荷準備中 --> 出荷済み : 出荷完了
    出荷準備中 --> 注文キャンセル済み : キャンセル要求

    出荷済み --> 配送中 : 配送開始
    配送中 --> 配送完了 : 配送完了
    配送完了 --> [*]

    注文キャンセル済み --> [*]

    note for 決済処理中 : タイムアウト: 30秒
    note for 出荷準備中 : 在庫確認・引当処理

ER ダイアグラム（ER Diagram）でデータベース設計

ER ダイアグラムは、データベースの構造とエンティティ間の関係を表現する重要なツールです。Mermaid では、データモデリングから実際のテーブル設計まで、視覚的に理解しやすい図を作成できます。

エンティティとリレーションシップの定義

基本的な ER ダイアグラム

mermaiderDiagram
    USER {
        int user_id PK
        string username UK
        string email UK
        string password
        datetime created_at
        datetime updated_at
    }

    PROFILE {
        int profile_id PK
        int user_id FK
        string first_name
        string last_name
        date birth_date
        string phone
        text bio
    }

    POST {
        int post_id PK
        int user_id FK
        string title
        text content
        datetime published_at
        datetime created_at
        datetime updated_at
    }

    USER ||--|| PROFILE : has
    USER ||--o{ POST : creates

詳細なエンティティ定義

mermaiderDiagram
    CUSTOMER {
        uuid customer_id PK "顧客ID"
        string email UK "メールアドレス"
        string first_name "名"
        string last_name "姓"
        string phone "電話番号"
        date birth_date "生年月日"
        enum gender "性別"
        datetime created_at "作成日時"
        datetime updated_at "更新日時"
        boolean is_active "アクティブフラグ"
    }

    ADDRESS {
        uuid address_id PK "住所ID"
        uuid customer_id FK "顧客ID"
        string type "住所タイプ"
        string postal_code "郵便番号"
        string prefecture "都道府県"
        string city "市区町村"
        string street "番地"
        string building "建物名"
        boolean is_default "デフォルトフラグ"
    }

    CUSTOMER ||--o{ ADDRESS : "住所を持つ"

カーディナリティと制約の表現

関係の種類と記法

mermaiderDiagram
    %% 1対1の関係
    USER ||--|| USER_PROFILE : has

    %% 1対多の関係
    CATEGORY ||--o{ PRODUCT : contains

    %% 多対多の関係
    PRODUCT }o--o{ TAG : "tagged with"

    %% オプショナルな関係
    ORDER ||--o| COUPON : uses

    USER {
        int id PK
        string username UK
        string email UK
    }

    USER_PROFILE {
        int id PK
        int user_id FK
        string bio
        string avatar_url
    }

    CATEGORY {
        int id PK
        string name UK
        string description
    }

    PRODUCT {
        int id PK
        int category_id FK
        string name
        decimal price
        int stock
    }

    TAG {
        int id PK
        string name UK
        string color
    }

    ORDER {
        int id PK
        int user_id FK
        datetime order_date
        decimal total_amount
    }

    COUPON {
        int id PK
        string code UK
        decimal discount_rate
        date valid_until
    }

実際のデータベーススキーマ設計

EC サイトのデータベース設計

mermaiderDiagram
    CUSTOMER {
        uuid customer_id PK
        string email UK
        string password_hash
        string first_name
        string last_name
        string phone
        date birth_date
        enum gender
        datetime registered_at
        datetime last_login_at
        boolean is_verified
        boolean is_active
    }

    CUSTOMER_ADDRESS {
        uuid address_id PK
        uuid customer_id FK
        enum address_type
        string postal_code
        string prefecture
        string city
        string street_address
        string building_name
        boolean is_default
        datetime created_at
    }

    CATEGORY {
        int category_id PK
        int parent_category_id FK
        string category_name UK
        string description
        string image_url
        int sort_order
        boolean is_active
    }

    PRODUCT {
        uuid product_id PK
        int category_id FK
        string product_name
        text description
        decimal price
        decimal cost_price
        int stock_quantity
        int reserved_quantity
        string sku UK
        json specifications
        datetime created_at
        datetime updated_at
        boolean is_active
    }

    PRODUCT_IMAGE {
        uuid image_id PK
        uuid product_id FK
        string image_url
        string alt_text
        int sort_order
        boolean is_primary
    }

    CART {
        uuid cart_id PK
        uuid customer_id FK
        datetime created_at
        datetime updated_at
    }

    CART_ITEM {
        uuid cart_item_id PK
        uuid cart_id FK
        uuid product_id FK
        int quantity
        decimal unit_price
        datetime added_at
    }

    ORDER {
        uuid order_id PK
        uuid customer_id FK
        string order_number UK
        datetime order_date
        enum order_status
        decimal subtotal
        decimal tax_amount
        decimal shipping_fee
        decimal discount_amount
        decimal total_amount
        json shipping_address
        json billing_address
        datetime created_at
        datetime updated_at
    }

    ORDER_ITEM {
        uuid order_item_id PK
        uuid order_id FK
        uuid product_id FK
        string product_name
        int quantity
        decimal unit_price
        decimal total_price
    }

    PAYMENT {
        uuid payment_id PK
        uuid order_id FK
        enum payment_method
        enum payment_status
        decimal amount
        string transaction_id
        datetime processed_at
        text payment_details
    }

    REVIEW {
        uuid review_id PK
        uuid product_id FK
        uuid customer_id FK
        int rating
        string title
        text comment
        datetime created_at
        boolean is_verified_purchase
    }

    %% 関係の定義
    CUSTOMER ||--o{ CUSTOMER_ADDRESS : "has addresses"
    CUSTOMER ||--|| CART : "has cart"
    CUSTOMER ||--o{ ORDER : "places orders"
    CUSTOMER ||--o{ REVIEW : "writes reviews"

    CATEGORY ||--o{ CATEGORY : "has subcategories"
    CATEGORY ||--o{ PRODUCT : "contains products"

    PRODUCT ||--o{ PRODUCT_IMAGE : "has images"
    PRODUCT ||--o{ CART_ITEM : "added to cart"
    PRODUCT ||--o{ ORDER_ITEM : "ordered"
    PRODUCT ||--o{ REVIEW : "receives reviews"

    CART ||--o{ CART_ITEM : "contains items"

    ORDER ||--o{ ORDER_ITEM : "contains items"
    ORDER ||--|| PAYMENT : "has payment"

正規化とテーブル関係の可視化

正規化プロセスの表現

mermaiderDiagram
    %% 第1正規形違反の例（繰り返しグループあり）
    STUDENT_UNNORMALIZED {
        int student_id PK
        string student_name
        string course1
        string course2
        string course3
        string instructor1
        string instructor2
        string instructor3
    }

    %% 第1正規形適用後
    STUDENT {
        int student_id PK
        string student_name
    }

    ENROLLMENT {
        int enrollment_id PK
        int student_id FK
        string course_name
        string instructor_name
    }

    %% 第2正規形適用後（部分関数従属を排除）
    COURSE {
        string course_code PK
        string course_name UK
        string instructor_name
        int credits
    }

    STUDENT_COURSE {
        int enrollment_id PK
        int student_id FK
        string course_code FK
        date enrollment_date
        char grade
    }

    %% 第3正規形適用後（推移関数従属を排除）
    INSTRUCTOR {
        int instructor_id PK
        string instructor_name UK
        string department
        string email
    }

    COURSE_NORMALIZED {
        string course_code PK
        string course_name UK
        int instructor_id FK
        int credits
        string description
    }

    %% 関係の定義
    STUDENT ||--o{ STUDENT_COURSE : enrolls
    COURSE_NORMALIZED ||--o{ STUDENT_COURSE : "enrolled by"
    INSTRUCTOR ||--o{ COURSE_NORMALIZED : teaches

複雑な関係の表現

mermaiderDiagram
    ORGANIZATION {
        uuid org_id PK
        string org_name UK
        string description
        datetime founded_date
        boolean is_active
    }

    DEPARTMENT {
        uuid dept_id PK
        uuid org_id FK
        uuid parent_dept_id FK
        string dept_name
        string description
        uuid manager_id FK
    }

    EMPLOYEE {
        uuid emp_id PK
        uuid dept_id FK
        uuid manager_id FK
        string employee_number UK
        string first_name
        string last_name
        string email UK
        string phone
        date hire_date
        decimal salary
        enum employment_type
        boolean is_active
    }

    PROJECT {
        uuid project_id PK
        uuid org_id FK
        string project_name
        text description
        date start_date
        date end_date
        enum status
        decimal budget
    }

    PROJECT_ASSIGNMENT {
        uuid assignment_id PK
        uuid project_id FK
        uuid emp_id FK
        enum role
        date assigned_date
        date end_date
        decimal allocation_percentage
    }

    SKILL {
        int skill_id PK
        string skill_name UK
        string category
        string description
    }

    EMPLOYEE_SKILL {
        uuid emp_skill_id PK
        uuid emp_id FK
        int skill_id FK
        enum proficiency_level
        date acquired_date
        date certified_date
    }

    %% 関係の定義
    ORGANIZATION ||--o{ DEPARTMENT : "has departments"
    ORGANIZATION ||--o{ PROJECT : "manages projects"
    DEPARTMENT ||--o{ DEPARTMENT : "has subdepartments"
    DEPARTMENT ||--o{ EMPLOYEE : "employs"
    EMPLOYEE ||--o{ EMPLOYEE : "manages"
    DEPARTMENT }o--|| EMPLOYEE : "managed by"
    EMPLOYEE ||--o{ PROJECT_ASSIGNMENT : "assigned to"
    PROJECT ||--o{ PROJECT_ASSIGNMENT : "has assignments"
    EMPLOYEE ||--o{ EMPLOYEE_SKILL : "has skills"
    SKILL ||--o{ EMPLOYEE_SKILL : "possessed by"

その他の特殊ダイアグラム活用法

Mermaid では、基本的なダイアグラムに加えて、特定の用途に特化した多様なダイアグラムタイプが利用できます。これらを効果的に活用することで、より豊かな表現が可能になります。

ジャーニーマップ（User Journey）

基本的なジャーニーマップ

mermaidjourney
    title ユーザーのオンラインショッピング体験
    section 商品発見
      商品検索        : 7: ユーザー
      商品比較        : 5: ユーザー
      レビュー確認     : 6: ユーザー
    section 購入検討
      価格比較        : 4: ユーザー
      在庫確認        : 8: ユーザー
      配送オプション確認: 7: ユーザー
    section 購入
      カート追加      : 8: ユーザー
      決済情報入力     : 3: ユーザー
      注文確定        : 6: ユーザー
    section アフターサービス
      配送状況確認     : 9: ユーザー
      商品受取        : 9: ユーザー
      レビュー投稿     : 7: ユーザー

複雑なカスタマージャーニー

mermaidjourney
    title 新規顧客獲得からリピーター化まで
    section 認知段階
      SNS広告表示     : 3: 見込み客
      友人からの紹介   : 8: 見込み客
      検索結果表示     : 5: 見込み客
    section 興味関心段階
      ウェブサイト訪問 : 6: 見込み客
      サービス詳細確認 : 5: 見込み客
      価格プラン比較   : 4: 見込み客
      競合他社との比較 : 3: 見込み客
    section 検討段階
      無料トライアル登録: 7: 見込み客
      機能テスト      : 6: 見込み客
      サポート問い合わせ: 8: 見込み客, サポート
      導入相談        : 9: 見込み客, 営業
    section 購入段階
      プラン選択      : 7: 見込み客
      契約手続き      : 5: 見込み客, 営業
      初期設定サポート : 8: 新規顧客, サポート
    section 利用段階
      オンボーディング : 6: 新規顧客, サポート
      日常利用        : 8: 既存顧客
      トラブル対応     : 7: 既存顧客, サポート
    section 継続段階
      プラン見直し     : 6: 既存顧客, 営業
      機能拡張        : 9: 既存顧客
      他社への推薦     : 9: 既存顧客

パイチャート（Pie Chart）

基本的なパイチャート

mermaidpie title 売上構成比（2024年第1四半期）
    "商品A" : 35
    "商品B" : 25
    "商品C" : 20
    "商品D" : 15
    "その他" : 5

詳細なパイチャート

mermaidpie title ウェブサイト訪問者の流入元
    "オーガニック検索" : 42.3
    "直接アクセス" : 28.7
    "ソーシャルメディア" : 12.1
    "リファラル" : 8.9
    "有料広告" : 5.2
    "メールマーケティング" : 2.8

Git Graph

基本的な Git フロー

mermaidgitgraph
    commit id: "Initial commit"
    branch develop
    checkout develop
    commit id: "Add user model"
    commit id: "Add authentication"
    branch feature/payment
    checkout feature/payment
    commit id: "Add payment gateway"
    commit id: "Add payment tests"
    checkout develop
    merge feature/payment
    commit id: "Update documentation"
    checkout main
    merge develop tag: "v1.0.0"

複雑な開発フロー

mermaidgitgraph
    commit id: "プロジェクト初期化"
    branch develop
    checkout develop
    commit id: "基本構造作成"

    branch feature/user-auth
    checkout feature/user-auth
    commit id: "ユーザー認証実装"
    commit id: "認証テスト追加"

    checkout develop
    branch feature/product-catalog
    checkout feature/product-catalog
    commit id: "商品カタログ実装"
    commit id: "検索機能追加"

    checkout develop
    merge feature/user-auth
    commit id: "認証機能統合"

    branch hotfix/security-patch
    checkout main
    checkout hotfix/security-patch
    commit id: "セキュリティ修正"
    checkout main
    merge hotfix/security-patch tag: "v1.0.1"
    checkout develop
    merge main

    merge feature/product-catalog
    commit id: "カタログ機能統合"

    checkout main
    merge develop tag: "v1.1.0"

マインドマップ（Mindmap）

基本的なマインドマップ

mermaidmindmap
  root((プロジェクト計画))
    要件定義
      機能要件
        ユーザー管理
        商品管理
        注文処理
      非機能要件
        性能
        セキュリティ
        可用性
    設計
      システム設計
        アーキテクチャ
        インフラ
      UI/UX設計
        ワイヤーフレーム
        プロトタイプ
    開発
      フロントエンド
        React
        TypeScript
      バックエンド
        Node.js
        PostgreSQL
    テスト
      単体テスト
      統合テスト
      E2Eテスト

複雑なマインドマップ

mermaidmindmap
  root((Webアプリ開発))
    技術スタック
      フロントエンド
        フレームワーク
          React
          Vue.js
          Angular
        スタイリング
          CSS Modules
          Styled Components
          Tailwind CSS
        状態管理
          Redux
          Zustand
          Context API
      バックエンド
        言語・フレームワーク
          Node.js/Express
          Python/Django
          Java/Spring
        データベース
          PostgreSQL
          MongoDB
          Redis
        API設計
          REST
          GraphQL
          gRPC
    開発プロセス
      計画
        要件定義
        スケジュール
        リスク管理
      実装
        コーディング規約
        レビュープロセス
        テスト戦略
      デプロイ
        CI/CD
        監視
        ログ管理
    品質保証
      テスト
        単体テスト
        統合テスト
        E2Eテスト
        パフォーマンステスト
      コード品質
        静的解析
        コードレビュー
        技術的負債管理

この段階で、Mermaid で利用可能な主要なダイアグラムタイプについて包括的に学習できました。次のセクションでは、これらのダイアグラムを実際の業務シーンでどのように活用するかについて、具体的なサンプル集をご紹介いたします。

実践的な活用シーン別サンプル集

ここまで学習した Mermaid の各種ダイアグラムを、実際の業務シーンで効果的に活用するための実践的なサンプル集をご紹介します。

システム開発での要件定義書

ユーザー管理システムの要件定義

markdown# ユーザー管理システム要件定義書

## システム概要

本システムは、企業内でのユーザーアカウント管理を効率化するシステムです。

## 業務フロー

```mermaid
flowchart TD
    A[新規ユーザー申請] --> B{申請内容確認}
    B -->|承認| C[アカウント作成]
    B -->|却下| D[却下通知]
    C --> E[初期パスワード発行]
    E --> F[ユーザー通知]
    F --> G[初回ログイン]
    G --> H[パスワード変更強制]
    H --> I[アカウント有効化]
    D --> J[申請者へ理由通知]

    K[定期的なアカウント監査] --> L{アカウント活動確認}
    L -->|非活性| M[アカウント無効化通知]
    L -->|活性| N[監査完了]
    M --> O[アカウント無効化]
```

システム構成

mermaidgraph TB
    subgraph "プレゼンテーション層"
        A[管理者画面]
        B[ユーザー画面]
        C[API Gateway]
    end

    subgraph "アプリケーション層"
        D[ユーザー管理サービス]
        E[認証サービス]
        F[通知サービス]
    end

    subgraph "データ層"
        G[ユーザーDB]
        H[ログDB]
        I[設定DB]
    end

    A --> C
    B --> C
    C --> D
    C --> E
    C --> F
    D --> G
    E --> G
    F --> H
    D --> I

データモデル

mermaiderDiagram
    USER {
        uuid user_id PK
        string username UK
        string email UK
        string password_hash
        enum status
        datetime created_at
        datetime last_login
        boolean is_admin
    }

    ROLE {
        int role_id PK
        string role_name UK
        text description
        json permissions
    }

    USER_ROLE {
        uuid user_role_id PK
        uuid user_id FK
        int role_id FK
        datetime assigned_at
        datetime expires_at
    }

    AUDIT_LOG {
        uuid log_id PK
        uuid user_id FK
        string action
        text details
        datetime timestamp
        string ip_address
    }

    USER ||--o{ USER_ROLE : has
    ROLE ||--o{ USER_ROLE : assigned
    USER ||--o{ AUDIT_LOG : generates

業務フロー改善提案書

承認プロセスの改善提案

markdown# 承認プロセス改善提案書

## 現行プロセスの課題

### 現在の承認フロー

```mermaid
flowchart TD
    A[申請書作成] --> B[上司確認]
    B --> C[部長承認]
    C --> D[役員承認]
    D --> E[総務確認]
    E --> F[経理承認]
    F --> G[完了]

    B -->|差し戻し| H[修正依頼]
    C -->|差し戻し| H
    D -->|差し戻し| H
    E -->|差し戻し| H
    F -->|差し戻し| H
    H --> A

    style H fill:#ff9999
```

**問題点：**

- 承認ステップが多すぎる（6 段階）
- 差し戻し時の修正対応が非効率
- 承認者の不在時に処理が停止

### 改善後の承認フロー

```mermaid
flowchart TD
    A[申請書作成] --> B{金額判定}
    B -->|10万円未満| C[上司承認]
    B -->|10万円以上| D[部長承認]
    B -->|100万円以上| E[役員承認]

    C --> F[自動処理]
    D --> G{緊急度判定}
    E --> G

    G -->|通常| F
    G -->|緊急| H[即時処理]

    F --> I[完了通知]
    H --> I

    D -->|代理承認可能| J[代理者承認]
    J --> F

    style F fill:#99ff99
    style H fill:#99ccff
```

## 改善効果の試算

```mermaid
gantt
    title 承認プロセス改善効果
    dateFormat X
    axisFormat %d日

    section 現行プロセス
    申請から完了まで    :done, current, 0, 14

    section 改善後プロセス
    通常案件（10万円未満）:improved1, 0, 3
    通常案件（10万円以上）:improved2, 0, 5
    緊急案件           :improved3, 0, 1
```

技術ブログでの解説図

マイクロサービスアーキテクチャの解説

markdown# マイクロサービスアーキテクチャへの移行戦略

## アーキテクチャ概要

マイクロサービス化により、システムの柔軟性と保守性を向上させます。

### 現行のモノリシック構成

```mermaid
graph TB
    subgraph "Monolithic Application"
        A[Web Layer]
        B[Business Logic]
        C[Data Access Layer]
    end

    D[Database]

    A --> B
    B --> C
    C --> D

    style "Monolithic Application" fill:#ffcccc
```

### 目標のマイクロサービス構成

```mermaid
graph TB
    subgraph "API Gateway"
        GW[Load Balancer]
    end

    subgraph "User Service"
        US[User API]
        USD[User DB]
    end

    subgraph "Product Service"
        PS[Product API]
        PSD[Product DB]
    end

    subgraph "Order Service"
        OS[Order API]
        OSD[Order DB]
    end

    subgraph "Notification Service"
        NS[Notification API]
        NSQ[Message Queue]
    end

    GW --> US
    GW --> PS
    GW --> OS

    US --> USD
    PS --> PSD
    OS --> OSD
    NS --> NSQ

    OS -.-> NS
    US -.-> NS
```

## 移行プロセス

### フェーズ別移行計画

```mermaid
gantt
    title マイクロサービス移行ロードマップ
    dateFormat YYYY-MM-DD

    section Phase 1
    アーキテクチャ設計    :design1, 2024-07-01, 30d
    インフラ準備         :infra1, after design1, 20d

    section Phase 2
    User Service分離     :user-svc, after infra1, 45d
    API Gateway構築      :gateway, after infra1, 30d

    section Phase 3
    Product Service分離  :product-svc, after user-svc, 35d
    Order Service分離    :order-svc, after product-svc, 40d

    section Phase 4
    統合テスト          :integration, after order-svc, 20d
    パフォーマンステスト :perf-test, after integration, 15d
    本番切替            :milestone, cutover, after perf-test, 0d
```

### サービス間通信パターン

```mermaid
sequenceDiagram
    participant Client
    participant Gateway as API Gateway
    participant UserSvc as User Service
    participant OrderSvc as Order Service
    participant ProductSvc as Product Service
    participant Queue as Message Queue

    Client->>Gateway: 注文作成リクエスト
    Gateway->>UserSvc: ユーザー認証確認
    UserSvc-->>Gateway: 認証結果

    alt 認証成功
        Gateway->>ProductSvc: 在庫確認
        ProductSvc-->>Gateway: 在庫状況
        Gateway->>OrderSvc: 注文作成
        OrderSvc->>Queue: 注文完了イベント
        OrderSvc-->>Gateway: 注文ID
        Gateway-->>Client: 注文完了レスポンス

        Queue->>UserSvc: 通知送信要求
        Queue->>ProductSvc: 在庫更新要求
    else 認証失敗
        Gateway-->>Client: 認証エラー
    end
```

プレゼンテーション資料

新サービス企画プレゼンテーション

markdown# 新サービス「SmartDelivery」企画提案

## サービス概要

AI を活用した配送最適化サービスで、配送コストを 30%削減します。

### ユーザージャーニー

```mermaid
journey
    title 配送業者のSmartDelivery利用体験
    section 登録・設定
      サービス登録      : 6: 配送業者
      車両情報登録      : 5: 配送業者
      エリア設定       : 7: 配送業者
    section 日次利用
      配送依頼受付      : 8: 配送業者
      AIルート最適化    : 9: 配送業者, AI
      配送実行         : 8: 配送業者
    section 効果確認
      コスト分析       : 9: 配送業者
      効率改善レポート   : 8: 配送業者
      継続利用決定      : 9: 配送業者
```

### 技術アーキテクチャ

```mermaid
graph TB
    subgraph "Client Applications"
        A[Mobile App]
        B[Web Dashboard]
        C[API Integration]
    end

    subgraph "Application Layer"
        D[API Gateway]
        E[Route Optimization Service]
        F[Machine Learning Engine]
        G[Analytics Service]
    end

    subgraph "Data Layer"
        H[Route Database]
        I[Traffic Data]
        J[Historical Analytics]
        K[Real-time Cache]
    end

    subgraph "External Services"
        L[Map Service API]
        M[Weather API]
        N[Traffic API]
    end

    A --> D
    B --> D
    C --> D

    D --> E
    D --> G
    E --> F
    F --> H
    F --> I
    G --> J
    E --> K

    F --> L
    F --> M
    F --> N
```

### ビジネスモデル

```mermaid
pie title 収益構成予測（3年後）
    "基本プラン（月額）" : 45
    "プレミアムプラン（月額）" : 35
    "API利用料（従量課金）" : 15
    "カスタム開発" : 5
```

### 開発ロードマップ

```mermaid
gantt
    title SmartDelivery開発スケジュール
    dateFormat YYYY-MM-DD

    section MVP開発
    基本機能開発       :mvp1, 2024-08-01, 60d
    AIアルゴリズム実装  :mvp2, 2024-08-15, 75d

    section ベータ版
    ベータテスト       :beta1, after mvp1, 30d
    フィードバック反映  :beta2, after beta1, 20d

    section 正式リリース
    最終テスト         :final1, after beta2, 15d
    マーケティング準備  :marketing, 2024-10-01, 45d
    正式ローンチ       :milestone, launch, after final1, 0d
```

高度なカスタマイズとベストプラクティス

Mermaid をより効果的に活用するための高度な技術とベストプラクティスをご紹介します。

CSS スタイルの適用方法

基本的なスタイリング

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

    classDef startClass fill:#e1f5fe,stroke:#01579b,stroke-width:3px,color:#000
    classDef processClass fill:#f3e5f5,stroke:#4a148c,stroke-width:2px,color:#000
    classDef endClass fill:#e8f5e8,stroke:#2e7d32,stroke-width:3px,color:#000

    class A startClass
    class B processClass
    class C endClass

高度なスタイリング

html<style>
  .mermaid {
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }

  .mermaid .node rect {
    fill: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    stroke: #4f46e5;
    stroke-width: 2px;
    rx: 8px;
    ry: 8px;
  }

  .mermaid .node .label {
    color: white;
    font-weight: 600;
    font-size: 14px;
  }

  .mermaid .edgePath path {
    stroke: #6366f1;
    stroke-width: 2px;
    fill: none;
  }

  .mermaid .arrowheadPath {
    fill: #6366f1;
  }
</style>

```mermaid flowchart LR A[モダンデザイン] -->
B[グラデーション効果] B --> C[角丸スタイル] C -->
D[美しい仕上がり]

テーマとカラーパレットの設定

プリセットテーマの活用

mermaid%%{init: {"theme": "dark"}}%%
flowchart TD
    A[ダークテーマ] --> B[高いコントラスト]
    B --> C[目に優しい]

mermaid%%{init: {"theme": "forest"}}%%
flowchart TD
    A[フォレストテーマ] --> B[自然な色調]
    B --> C[落ち着いた印象]

カスタムテーマの作成

mermaid%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#ff6b6b", "primaryTextColor": "#ffffff", "primaryBorderColor": "#ff4757", "lineColor": "#7bed9f", "secondaryColor": "#70a1ff", "tertiaryColor": "#5352ed", "background": "#f8f9fa", "mainBkg": "#ffffff", "secondBkg": "#e9ecef"}}}%%
flowchart TD
    A[カスタムテーマ] --> B[ブランドカラー]
    B --> C[統一感のあるデザイン]
    C --> D[プロフェッショナルな印象]

大規模図表の分割・整理術

サブグラフを活用した構造化

mermaidflowchart TB
    subgraph "フロントエンド"
        A[React App]
        B[State Management]
        C[UI Components]
    end

    subgraph "バックエンド"
        D[API Server]
        E[Business Logic]
        F[Data Access]
    end

    subgraph "データベース"
        G[User Data]
        H[Application Data]
        I[System Logs]
    end

    subgraph "外部サービス"
        J[Payment Gateway]
        K[Email Service]
        L[Analytics]
    end

    A --> D
    B --> A
    C --> A
    D --> E
    E --> F
    F --> G
    F --> H
    F --> I

    E --> J
    E --> K
    E --> L

モジュラー設計

mermaidflowchart TD
    %% ユーザー認証モジュール
    subgraph "認証モジュール"
        AUTH1[ログイン]
        AUTH2[パスワード確認]
        AUTH3[セッション管理]
    end

    %% 商品管理モジュール
    subgraph "商品管理モジュール"
        PROD1[商品登録]
        PROD2[在庫管理]
        PROD3[価格管理]
    end

    %% 注文処理モジュール
    subgraph "注文処理モジュール"
        ORDER1[カート管理]
        ORDER2[決済処理]
        ORDER3[配送管理]
    end

    %% モジュール間の関係
    AUTH1 --> PROD1
    AUTH1 --> ORDER1
    PROD2 --> ORDER1
    ORDER2 --> ORDER3

可読性向上のコツ

適切な命名規則

mermaidflowchart TD
    %% 良い例：意味のある名前
    UserRegistration[ユーザー登録] --> EmailValidation[メール認証]
    EmailValidation --> AccountActivation[アカウント有効化]
    AccountActivation --> WelcomeMessage[ウェルカムメッセージ]

    %% 悪い例を避ける
    %% A --> B --> C --> D

ノートとコメントの活用

mermaidflowchart TD
    A[注文受付] --> B{在庫確認}
    B -->|在庫あり| C[注文確定]
    B -->|在庫なし| D[入荷待ち]

    C --> E[決済処理]
    E --> F[配送手配]

    note right of B : 在庫数をリアルタイムで確認
    note for E : 複数の決済方法に対応

    %% 処理時間の目安
    click A "https://example.com/order-process" "注文プロセス詳細"
    click E "https://example.com/payment-guide" "決済ガイド"

レイアウトの最適化

mermaidflowchart LR
    %% 水平レイアウトで段階的な流れを表現
    subgraph "Phase 1"
        P1A[要件定義]
        P1B[基本設計]
    end

    subgraph "Phase 2"
        P2A[詳細設計]
        P2B[実装]
    end

    subgraph "Phase 3"
        P3A[テスト]
        P3B[デプロイ]
    end

    P1A --> P1B
    P1B --> P2A
    P2A --> P2B
    P2B --> P3A
    P3A --> P3B

パフォーマンス最適化

図表サイズの最適化

javascript// mermaid設定の最適化
mermaid.initialize({
  startOnLoad: true,
  theme: 'default',
  flowchart: {
    htmlLabels: false,
    curve: 'linear',
    useMaxWidth: true,
    padding: 15,
  },
  sequence: {
    diagramMarginX: 50,
    diagramMarginY: 10,
    boxTextMargin: 5,
    noteMargin: 10,
    messageMargin: 35,
  },
  gantt: {
    fontSize: 11,
    gridLineStartPadding: 35,
    bottomPadding: 25,
  },
});

レンダリング最適化

html<!-- 遅延ローディングの実装 -->
<div class="mermaid-container" data-mermaid="true">
  <script type="text/mermaid">
    flowchart TD
        A[重要な図表] --> B[最適化済み]
        B --> C[高速表示]
  </script>
</div>

<script>
  // Intersection Observer APIを使用した遅延ローディング
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const container = entry.target;
        const mermaidCode = container.querySelector(
          'script[type="text/mermaid"]'
        ).textContent;
        container.innerHTML =
          '<div class="mermaid">' + mermaidCode + '</div>';
        mermaid.init(
          undefined,
          container.querySelector('.mermaid')
        );
        observer.unobserve(container);
      }
    });
  });

  document
    .querySelectorAll('.mermaid-container')
    .forEach((container) => {
      observer.observe(container);
    });
</script>

まとめ

この記事では、Mermaid を使ったダイアグラム作成について、基礎から実践的な活用まで包括的に解説いたしました。

Mermaid による視覚的コミュニケーションの価値

生産性の向上 テキストベースでダイアグラムを作成できることで、従来のツールと比較して圧倒的に効率的な図表作成が可能になります。コードを書くような感覚で、素早く正確な図表を作成できるため、アイデアの可視化から仕様書の作成まで、あらゆる場面で生産性が向上します。

コミュニケーションの改善 視覚的な表現により、複雑な概念やプロセスを分かりやすく伝達できます。特に、チーム内での情報共有や、ステークホルダーとの要件確認において、図表による説明は理解を深め、認識の相違を減らす効果があります。

保守性の確保 テキストファイルとして管理できるため、バージョン管理システムとの親和性が高く、変更履歴の追跡や差分確認が容易です。また、ツールに依存しない形式であるため、長期的な保守性も確保できます。

標準化の促進 統一された記法により、組織内での図表作成の標準化が進みます。これにより、誰が作成した図表でも一定の品質が保たれ、メンテナンスや引き継ぎが容易になります。

関連リンク

公式リソース

Mermaid 公式サイト

エディタとツール

VS Code 拡張機能

その他のエディタサポート

  • Obsidian - ネイティブ Mermaid サポート
  • Notion - コードブロックでの Mermaid 対応
  • GitLab - GitLab Markdown 対応

ブログBlog

もっと見る

書籍レビューReview

もっと見る