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

WordPress 上にシーケンス図を記述する方法を説明します。

環境&対象

以下の環境で動作確認を行なっています。

  • wordpress 5.8
  • mermaid 8.11.4

シーケンス図

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

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

シーケンス図例
シーケンス図例

※ 図は、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

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


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

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

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

WordPress でのシーケンス図の書き方
  • mermaid という JS ライブラリを使うのがおすすめ
  • WP Githuber MD というプラグインを使用すると簡単に使用可能らしい
  • WP Githuber MD は、MathJax にも対応済み
  • 個別プラグインとしては、 WP Mermaid というプラグインを使用すると、ショートコード経由で Mermaid を使うことができる

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です