余計な描画ツールを使わずにエディタの中でテキストのみでシーケンスなどの図を表現したい!と思い、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
(設計変更のため表示をやめました)
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を選んでいます。