WordPressでMarkDown記法による図を表示する

2021-09-082021-09-26

下記のようなシーケンス図を表示したい。

sequenceDiagram participant 1 as １人目 participant 2 as ２人目 participant 3 as ３人目 1->>+2: 伝言 alt ２人目に問題 2->>2: 誤った解釈 end 2->>+3: 誤った伝言 3->>+1: フィードバック Note left of 1: １人目は問題に気付く

調べたところ WP Mermaid というプラグインがあったので使ってみました。

プラグインのインストール

WordPressの管理画面で　プラグイン - 新規追加　から「WP Mermaid 」キーワードで検索すれば見つかります。

インストール後、有効化を忘れずに。

使い方

ブロックエディタ（Gutenberg）での固定画面や投稿の編集の際に追加された「WP Mermaid」ブロックを選択します。

← WP Mermaid が増えてる図

ちなみにこのページの一番上にあるシーケンス図を表示するためのMarkDown記述は下記のようになります。

sequenceDiagram
participant 1 as １人目
participant 2 as ２人目
participant 3 as ３人目

1->>+2: 伝言
alt ２人目に問題
2->>2: 誤った解釈
end
2->>+3: 誤った伝言
3->>+1: フィードバック

Note left of 1: １人目は問題に気付く

プラグインの説明にもある通り mermaid.js が使われているなのでほかにもいろいろな図が描けるようです。

詳しくは mermaid のサイトを見てください。