[WordPress] WordPress でシーケンス図を書く方法

環境＆対象

シーケンス図

以下のような図です。複数の要素間のやりとりを説明するときに使うとわかりやすくなります。

（大抵は）上下方向が時間の流れをあらわし、登場要素が図中の上に列挙されます。要素間の矢印は 情報等のやり取りを表します。

シーケンス図例

※　図は、Wikimedia から引用

Mermaid と WP plugin

Mermaid という JS のライブラリがよく使われます。github は、こちら。

WP Githuber MD

この Mermaid を使用するための WordPress プラグインも既に用意されています。

WP Githuber MD というプラグインです。Mermaid だけでなく多くの機能をサポートするようなプラグインになっています。

github は、こちら。

ですが、私の環境では、うまく WP Githuber MD は動きませんでした。

これまでに導入したプラグインとコンフリクトしているかもしれません。既に使用しているプラグインを外すことは難しいので、使用を諦めました。（別サイトで使用している環境では動作することを確認しました）

WP Mermaid

Mermaid に特化したプラグインを導入しました。作者は、WP Githuber MD プラグインの作者と同じです。

WP Mermaid と WP Githuber MD

WP Githuber MD のメリット・WP Mermaid のデメリット

このサイトでは導入できませんでしたが、WP Githuber MD はMermaid だけでなく、Syntax highlight や 数式表示もできるようになるプラグインなので、個別プラグインを複数導入する必要がなく便利です。

WP Mermaid　は、Mermaid しか対応していませんので、数式表示やシンタックスハイライトには、別プラグインの導入が必要になります。
以下の記事では、MathJax を使用するためのプラグインを紹介しています。
[WordPress] 美しい数式表示

WP Mermaid のメリット・WP Githuber MD のデメリット

WP Mermaid は、Mermaid のみにフォーカスしているので、シンプルで導入しやすいです。

WP Githuber MD は多くの機能に対応しているために、コンフリクトしやすいかもしれません。
私の環境では動作しませんでした。別の WordPress を使用しているサイトでは動作したので、インストールしている別プラグインとの相性で動かないケースがあるようです。

WP Githuber MD を使うのであれば、WordPress 導入と合わせて導入するのが良いと思います。

Mermaid を使ったシーケンス図

以下のような、シーケンス図を表示することができるようになります。

sequenceDiagram
participant Alice
participant Bob
Alice ->> John: Hello John, how are you?
loop Healthcheck
John ->> John: Fight against hypochondria
end

上記の表示は、以下のようなコードから生成されています。

＜pre class="wp-block-merpress-mermaidjs mermaid">
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
＜/pre>

※ WordPress で表示するために、コード中の＜ を、半角から全角に置き換えています。

まとめ：WordPress でのシーケンス図の書き方

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

関連記事:

[WordPress] 美しい数式表示 [Swift] struct の initializer おさらい [Web][Docker] HTTPS な WordPress を立ち上げる docker-compose.yml [Web][Docker] HTTPS な WordPress と合わせて NextCloud を立ち上げる docker-compose.yml