Mermaidを試してみた

2026-06-08 javascript html

Mermaid はテキストでフロー図やシーケンス図を書けるライブラリです。Markdown のコードブロックに `mermaid と書くと、ソースと描画結果を並べて表示します。

フローチャート

処理の流れを表現します。 、LR は左から右、TD にすると上から下になります。

flowchart LR
    A[スタート] --> B{条件分岐}
    B -- Yes --> C[処理A]
    B -- No --> D[処理B]
    C --> E[おわり]
    D --> E

flowchart LR
    A[スタート] --> B{条件分岐}
    B -- Yes --> C[処理A]
    B -- No --> D[処理B]
    C --> E[おわり]
    D --> E

シーケンス図

システム間のやりとりを時系列で表現します。

sequenceDiagram
    participant ブラウザ
    participant サーバ
    participant DB

    ブラウザ->>サーバ: リクエスト
    サーバ->>DB: クエリ
    DB-->>サーバ: 結果
    サーバ-->>ブラウザ: レスポンス

sequenceDiagram
    participant ブラウザ
    participant サーバ
    participant DB

    ブラウザ->>サーバ: リクエスト
    サーバ->>DB: クエリ
    DB-->>サーバ: 結果
    サーバ-->>ブラウザ: レスポンス

公式のライブエディタ で試しながら書くと便利です。

以下は「エンジニアの「雑なMermaid」を、ビジネス側に刺さる図解に変換する」という記事の真似なのですが、出来上がった画像(スクリーンショットとか)をGeminiに渡すといい感じに仕立ててくれたりします。それぞれ「ポップに」「硬い感じに」と頼みました。複雑な図になると勝手に端折ったりし始めるので、これくらいシンプルな時、または厳密さが重要ではない時に使うと良いかなと思います。

diagram-by-gemini2 diagram-by-gemini2