テキストのみでシーケンス図を描画する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ではページ描画時にエスケープ処理されてしまい --> となってしまうので都合が悪い。ページのコンテンツ全てのエスケープ処理を止めてしまう方法もありますが、mermaidで表示したいコンテンツはごく一部なので、その一部のためだけにサイト全体のセキュリティ処理を止めてしまうのも気持ちが悪い。都合の良い方法がないかなと調べていたところ、こちらの解説サイト（WordPressでmermaid.jsを使う方法）を発見。

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

適用方法

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

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

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

動作サンプル

（設計変更のため表示をやめました）

Code:

graph TD
    Start --> Stop

Flowchart · GitBook

（設計変更のため表示をやめました）

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 以外の選択肢

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

bramp/js-sequence-diagrams: Draws simple SVG sequence diagrams from textual representation of the diagram（2018/06/18時点: 5,654 stars）
knsv/mermaid: Generation of diagram and flowchart from text in a similar manner as markdown（2018/06/18時点: 18,534 stars）

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

参考リンク

WordPressでmermaid.jsを使う方法