WordPress × MerPress対応　Mermaid の書き方入門

Mermaid は、Markdownの中に簡単な記法を書くと シーケンス図やフローチャートを描画できるツールです。
WordPress では「MerPress」などのプラグインを導入すれば、そのまま可視化できます。

本記事では、基本の文法とサンプルを紹介します。

1. 基本の書き方

一例として、WordPressの場合、Mermaid のコードは アドオンするMerPressのブロックに書きます。

これで MerPress が自動的に描画してくれます。

2. シーケンス図（sequenceDiagram）

登場人物のやり取りを時系列で表します。

```mermaid
sequenceDiagram
  participant A as Alice
  participant B as Bob

  A->>B: "Hello Bob"
  B-->>A: "Hi Alice"
```

sequenceDiagram
  participant A as Alice
  participant B as Bob

  A->>B: "Hello Bob"
  B-->>A: "Hi Alice"

3. フローチャート（flowchart）

処理の流れを図式化できます。

```mermaid
flowchart TD
  A["開始"] --> B["処理1"]
  B --> C{"条件？"}
  C -- はい --> D["処理2"]
  C -- いいえ --> E["処理3"]
  D --> F["終了"]
  E --> F
```

👉 表示結果：

flowchart TD
  A["開始"] --> B["処理1"]
  B --> C{"条件？"}
  C -- はい --> D["処理2"]
  C -- いいえ --> E["処理3"]
  D --> F["終了"]
  E --> F

書式のポイント

• flowchart TD → 上から下（Top Down）のレイアウト
• ノードは A["ラベル"] の形で定義
• 矢印は -->

4. ガントチャート（gantt）

スケジュール管理で使える図表。

```mermaid
gantt
  title プロジェクト計画
  dateFormat  YYYY-MM-DD
  section 企画
  要件定義   :done,    des1, 2025-09-01,2025-09-05
  設計       :active,  des2, 2025-09-06, 5d
  section 開発
  実装       :         des3, after des2, 7d
  テスト     :         des4, after des3, 5d
```

👉 表示結果：

gantt
  title プロジェクト計画
  dateFormat  YYYY-MM-DD
  section 企画
  要件定義   :done,    des1, 2025-09-01,2025-09-05
  設計       :active,  des2, 2025-09-06, 5d
  section 開発
  実装       :         des3, after des2, 7d
  テスト     :         des4, after des3, 5d

5. クラス図

オブジェクト指向のクラス関係。

classDiagram
  class Animal {
    +String name
    +move()
  }
  class Dog {
    +bark()
  }
  Animal <|-- Dog

classDiagram
  class Animal {
    +String name
    +move()
  }
  class Dog {
    +bark()
  }
  Animal <|-- Dog

書き方ルール

• classDiagram で開始
• class 名 { ... } で属性やメソッド定義
• 関係記法：
  • A <|-- B ：継承
  • A *-- B ：コンポジション
  • A o-- B ：集約
  • A --> B ：関連

6. 状態遷移図

状態遷移を表す図。

stateDiagram-v2
  [*] --> Idle
  Idle --> Running : "start()"
  Running --> Idle : "stop()"
  Running --> Error : "fault"

stateDiagram-v2
  [*] --> Idle
  Idle --> Running : "start()"
  Running --> Idle : "stop()"
  Running --> Error : "fault"

書き方ルール

• [*] は開始／終了状態
• 状態A --> 状態B : "イベント" の形式で遷移

7. Mermaidを書くときの注意点（WordPress編）

• ラベルはダブルクォートで囲むと安全（WordPressが勝手に括弧や記号を解釈しないように）
• 全角スペースを避ける（行末や括弧の前に混ざると描画エラーになる）
• \n などのエスケープは使わない（そのまま改行するか短く書く）