Mermaid テンプレート集

Q: ガントチャートの日付が今日になっているのはなぜですか？

このページを開いた日から始まるようにしています。最初のタスクの日付を変えると、後ろのタスクも after でつながっているので一緒にずれます。

よく使う図のひな形です。コードを書き換えるとその場で図が描き直されるので、形を整えてから GitHub など Mermaid に対応した Markdown に貼り付けられます。

ブラウザの中だけで動きます。貼り付けた内容や開いたファイルはサーバーに送られません。

フローチャート

処理の手順と分岐を表します。矢印に「はい」「いいえ」などのラベルを付けられ、ノードの形で開始・入力・分岐を区別します。

コード

flowchart TD
    start([開始]) --> input[/入力を受け取る/]
    input --> check{入力は正しい?}
    check -->|はい| process[処理する]
    check -->|いいえ| error[エラーを表示する]
    error --> input
    process --> done([終了])

シーケンス図

ログインや API の呼び出しのように、人やシステムの間のやり取りを時間の順に表します。点線の矢印は応答です。

コード

sequenceDiagram
    actor user as ユーザー
    participant app as アプリ
    participant api as サーバー
    user->>app: ボタンを押す
    app->>api: データを要求する
    api-->>app: データを返す
    app-->>user: 結果を表示する

ガントチャート

タスクの日程と前後関係を表す工程表です。after で前のタスクの終わりから始めるので、日程を動かすと後ろもずれます。

コード

gantt
    title プロジェクトの計画
    dateFormat YYYY-MM-DD
    section 設計
    要件を決める :design1, 2026-10-30, 5d
    設計する :design2, after design1, 5d
    section 開発
    実装する :dev1, after design2, 10d
    テストする :dev2, after dev1, 5d
    section リリース
    リリース :milestone, after dev2, 0d

ER 図

データベースのテーブルと列、テーブル同士の関係を表します。線の端の記号で1対多などの関係を示します。

コード

erDiagram
    CUSTOMER ||--o{ ORDER : "注文する"
    ORDER ||--|{ ORDER_ITEM : "含む"
    PRODUCT ||--o{ ORDER_ITEM : "注文される"
    CUSTOMER {
        int id PK
        string name "氏名"
        string email "メールアドレス"
    }
    ORDER {
        int id PK
        int customer_id FK
        date ordered_at "注文日"
    }
    ORDER_ITEM {
        int order_id FK
        int product_id FK
        int quantity "数量"
    }
    PRODUCT {
        int id PK
        string name "商品名"
        int price "価格"
    }

状態遷移図

注文の受付から発送までのように、ものごとの状態と、状態が変わるきっかけを表します。

コード

stateDiagram-v2
    state "下書き" as draft
    state "レビュー中" as review
    state "公開中" as published
    state "アーカイブ" as archived
    [*] --> draft
    draft --> review : 提出する
    review --> draft : 差し戻す
    review --> published : 承認する
    published --> archived : 公開を終える
    archived --> [*]

よくある質問

どこで使えますか？

Markdown の中の Mermaid を描画するツールならどこでも使えます。GitHub、GitLab、Obsidian、Richdown Web のエディタなどです。```mermaid のコードブロックに入れてください。

ガントチャートの日付が今日になっているのはなぜですか？

このページを開いた日から始まるようにしています。最初のタスクの日付を変えると、後ろのタスクも after でつながっているので一緒にずれます。

編集した内容は保存されますか？

いいえ。このページでの編集は、ページを離れると消えます。残したいときは「Richdown Web で開く」でエディタに移してください。エディタは下書きをブラウザに保存します。

コードを書かずに図を編集できますか？

Richdown Web のエディタでは、図のエディタでノードの名前や形を図の上で変えられ、コードも合わせて書き換わります。