Mermaidでフローチャートやシーケンス図を書きたい

2025年12月2日

1. 業務フローを作りたい
2. Mermaidとは
3. Mermaidの形式　mmd を作って、作図してみます
4. MermaidのWebで使う
5. Obsidianで使う
6. Terminalで使う

業務フローを作りたい

最近、研修で業務フローをちょこっと描くのをやったので、業務フローを描くツールを久しぶりに触ってみようと思いました。とはいえ、会社員時代はひたすら業務フローを作っていたのでそれくらいたくさん作るのなら有料の業務フローツールを使えばいいわけですが、今は作るとしても中小企業の簡単なフローをイラストにしたり、研修の資料で作るくらいなので、軽くちょこっと使えるツールを使ってみたい。

ということで、今回はMermaidを使ってみました。厳密には業務フローを作るツールではないのかもしれませんが、それっぽいものは作れそうです。

Mermaidとは

テキストを書くと図が自動で描画される可視化ツールです。Markdown と同じようにコードを書く感覚で、フローチャート・シーケンス図・ガントチャート・ER図などを作成できます。　 https://mermaid.js.org/

テキストベースで図が作れる

PowerPoint のように四角形をドラッグする必要はなく、
以下のようなコードを書くだけで図ができるのが特徴です。

flowchart TD
    A[開始] --> B[作業]

GitHub / Notion / Confluence / Obsidian などで標準サポート

多くのドキュメントツールが Mermaidをそのまま表示可能です。

図の種類が圧倒的に多い

Mermaid は業務で必要な図のほとんどをカバーします。

図の種類	用途
Flowchart（フローチャート）	業務プロセス
Sequence Diagram	会話・手順の時系列
Gantt Chart	プロジェクト管理
Class Diagram	システム設計
State Diagram	状態遷移の整理
ER Diagram	データベース設計
Journey	顧客体験の可視化
Timeline	時系列イベント
Pie Chart	割合の可視化
Mindmap	アイデア整理
Quadrant Chart	4象限マップ

修正がとにかく早い

テキストの一部を直して再描画するだけで図が更新されるため、

複雑な業務フローの修正
依頼主からの変更指示
チーム共有

にとても向いています。

どんな場面で便利？

業務フローのヒアリング・ドキュメント化
補助金の事業計画内でのプロセス図
中小企業の業務改善・BPR
システム導入時の要件整理
店舗オペレーションの見える化
社内マニュアルの自動生成
プロジェクト進行の可視化

Mermaidの形式　mmd を作って、作図してみます

mmdの形式に慣れる必要はありますが、まずはChatGPTに飲食店のシーケンス図をMermaid形式で書いてくださいとお願いしました。

以下のように出力されました。

sequenceDiagram
    autonumber
    participant C as 客
    participant H as ホールスタッフ
    participant K as キッチンスタッフ

    C->>H: 入店・人数を伝える
    H-->>C: 席へ案内

    H-->>C: メニュー提供・説明
    C->>H: 注文を伝える
    H->>K: オーダーをキッチンへ共有

    K-->>H: 調理開始連絡（任意）
    K->>K: 調理
    K-->>H: 料理完成連絡
    H-->>C: 料理提供

    C->>H: 追加注文依頼（任意）
    H->>K: 追加オーダー連携
    K->>K: 調理
    K-->>H: 完成連絡
    H-->>C: 提供

    C->>H: 会計依頼
    H-->>C: レジへ案内
    H->>C: 会計処理・レシート渡し

    C-->>H: 退店

    H->>H: テーブル片付け・清掃