Mermaid入門：Mermaidで簡単にチャート・シーケンスが書ける！

Markdown形式で文章を構造的に表現することはできますが、図やフローを表現することはできません。そこで利用するのがMermaid（https://mermaid.js.org/）です。

Mermaidの概要とその使い方を以下にまとめてます。

1. Mermaid.jsとは？
2. 主な特徴
3. 基本的な使い方
- HTMLで利用する場合
- Markdownで利用する場合
4. 作成できる図の例
5. 便利なツール

1. Mermaid.jsとは？

Mermaid.jsは、テキストとコードを使用して図やチャートを作成するためのJavaScriptベースのライブラリです。Markdownのようなシンプルな構文で、フローチャート、シーケンス図、ガントチャートなど、様々な種類の図を簡単に描画できます。

テキストベースで図を管理するため、Gitなどのバージョン管理システムとの相性が良く、変更履歴の管理が容易になるという大きなメリットがあります。

2. 主な特徴

手軽さ: HTMLファイルにCDNのリンクを一行追加するだけで、すぐに使い始めることができます。
多機能: フローチャート、シーケンス図、クラス図、ER図など、開発でよく利用される多様なダイアグラムに対応しています。
連携性: Notion、GitLab、GitHubなど、多くのサービスやツールに統合されており、ドキュメント内に直接図を埋め込むことができます。

3. 基本的な使い方

HTMLで利用する場合

ライブラリの読み込み: HTMLの<head>または<body>に以下のスクリプトタグを追加します。 html <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
図の記述: mermaidクラスを持つ要素（例: <div>）を用意し、その中にMermaidの構文で図を記述します。
初期化: mermaid.initialize()を呼び出すJavaScriptコードを追加して、記述したテキストを図に変換します。

記述例（フローチャート）:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Mermaid.js Example</title>
</head>
<body>
    <div class="mermaid">
        graph TD;
            A[開始] --> B(処理1);
            B --> C{判断};
            C -->|はい| D[処理2];
            C -->|いいえ| E[処理3];
            D --> F[終了];
            E --> F;
    </div>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>

Markdownで利用する場合

Markdownファイル内に図を埋め込む場合は、コードブロックの言語名をmermaidと指定するだけで、対応しているプラットフォーム（GitHubやGitLabなど）では自動的に図としてレンダリングされます。

記述例（シーケンス図）:

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts<br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

4. 作成できる図の例

以下は、Mermaid.jsで作成できる代表的な図の例です。

フローチャート (`graph`)

graph TD
    A[クリスマス] -->|プレゼントをもらう| B(嬉しい);
    B --> C{宿題は？};
    C -->|終わった| D[遊ぶ！];
    C -->|まだ| E[泣く];
    D --> F[楽しい];
    E --> F;

シーケンス図 (`sequenceDiagram`)

sequenceDiagram
    autonumber
    participant User
    participant Browser
    participant Server

    User->>Browser: 商品ページURLにアクセス
    Browser->>Server: GET /products/123
    Server-->>Browser: HTMLを返す
    Browser->>User: 商品ページを表示

ガントチャート (`gantt`)

gantt
    title プロジェクトスケジュール
    dateFormat  YYYY-MM-DD
    section 設計
    要件定義     :done,    des1, 2025-07-01, 7d
    基本設計     :active,  des2, after des1, 10d
    section 開発
    フロントエンド :         dev1, after des2, 20d
    バックエンド   :         dev2, after des2, 25d
    section テスト
    結合テスト   :         test1, after dev1, after dev2, 10d

クラス図 (`classDiagram`)

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }

    class Dog {
        +bark()
    }

    class Cat {
        +meow()
    }

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