テキストのみでシーケンス図を描画するmermaid.jsをWordPressで使う

余計な描画ツールを使わずにエディタの中でテキストのみでシーケンスなどの図を表現したい!と思い、mermaid の適用を試したので情報整理がてらメモします。やりたいことは単純で、以下2行で初期作業は完了するのですが、WordPressの癖で一筋縄にいかなかった部分がありました。

<script src="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

今回、mermaid@7.1.0 で試しています。

WordPress で使う方法

mermaidでは --> のような記号が出てきますが、WordPressではページ描画時にエスケープ処理されてしまい --&gt; となってしまうので都合が悪い。ページのコンテンツ全てのエスケープ処理を止めてしまう方法もありますが、mermaidで表示したいコンテンツはごく一部なので、その一部のためだけにサイト全体のセキュリティ処理を止めてしまうのも気持ちが悪い。都合の良い方法がないかなと調べていたところ、こちらの解説サイト(WordPressでmermaid.jsを使う方法)を発見。

説明が丁寧なので上記ページを読んでいただければわかると思いますが、ここでは微調整して適用したので差分をメモします。

適用方法

Usage · GitBook (本家)の通り。手順は .jsファイルを用意する、読み込みリンクを記載する、mermaid描画初期化の initialize スクリプト(1行)を書く、という手順ですが、以下の通り適用しました。

  1. js等のファイル群の管理が面倒なのでCDNへのリンク(配信サイトへの直リンク)とします
  2. 前述のサイトでは functions.php の中に .jsファイルリンクの追加処理やエスケープ抑止処理をまとめて記載していますが、個人的にはHTMLタグの役割はThemeファイルに記載したいので、以下の通り整理しました。
    • .js ファイルへのリンクはテーマファイルの footer 関連の部分に記載
    • generate_mermaid_code 関数(詳細はこちらfunctions.php に記載

本家サンプルでは div タグの .mermaid により描画エリアを表現していますが、今回のテクニックはWordPressのcodeタグのエスケープ処理の挙動を活用していますので、<code class="mermaid"> で表現します。

動作サンプル

graph TD Start --> Stop

Code:

graph TD
    Start --> Stop

Flowchart · GitBook

graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]

Code:

graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]

Online FlowChart & Diagrams Editor – Mermaid Live Editor

mermaid 以外の選択肢

なお、似たような機能を持つ実装に何があるのか?とっかかりとして簡単ではありますが調べています。

(調べたうちには入らないですが・・・)Starの数でMermaidを選んでいます。

参考リンク

スポンサーリンク
ad_336x280
ad_336x280

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ad_336x280