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

Tech

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

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

1. 基本の書き方

Word

一例として、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

4. クラス図

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

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 ：関連

4. 状態遷移図

状態遷移を表す図。

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 : "イベント" の形式で遷移

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

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

ライセンス：本記事のテキスト/コードは特記なき限り CC BY 4.0 です。引用の際は出典URL（本ページ）を明記してください。
利用ポリシー もご参照ください。

コメント

タイトルとURLをコピーしました