[wordpress]マークアップでweb上に簡単なシーケンス図を書く

UMLのシーケンス図

シーケンス図とはUML（統一モデリング言語）の１つで、時系列上でオブジェクト間の相互作用を可視化したものですが、考えを整理するときや設計を開発者間で共有する時などに（たまに？）使います。自分で考えを整理するだけであれば手書きででも（むしろそのほうが）いいのですが、簡単にtextileやmarkdownのようにマークアップできればそれも利用してみたいと思うのが人情ではないでしょうか？？という事で調べてみました。

シーケンス図の描けるjsライブラリやウェブサービスなど

js-sequence-diagrams by bramp
http://bramp.github.io/js-sequence-diagrams/
最初に見つけたのがこちら。日本語の紹介記事が多いので参考になります。 websequencediagrams を参考にして作られているとの事。

KangaModeling – The agile modeling markup language
http://kangamodeling.org/
指定のjsをインクルードしてサーバサイド側のapiを叩く感じのようですが、使い勝手は js-sequence-diagrams と似ています。こちらの方が表現力が上です。

websequencediagrams
https://www.websequencediagrams.com/
こちらはウェブサービス。機能によっては有償のようですが、この中では一番本格的な表現ができそうです。

マークアップの方法は３つとも似たような感じで、出力のスタイルも手描きっぽい感じや活字っぽい感じなどいくつかから選択できるようになっています。

wordpressで簡単にマークアップできるように

先に挙げた候補だと、 js-sequence-diagrams が一番自由な形で利用できますので、これを使ってみることにします。また、とりあえずこのブログはwordpressなのでwordpressで簡単に使えるようにしてみることにします。

js-sequence-diagrams自体の使い方は
https://github.com/bramp/js-sequence-diagrams#usage
のとおりで、これによるといくつか依存するjavascriptのライブラリの読み込みと、レンダリングのため数ステップの処理が必要となっています。

記事ごとにjsやcssを管理できるプラグイン

定形のscriptをその都度書くのは面倒なのでjavascriptを管理できるプラグインを導入します。

CSS Javascript Toolbox
WordPress › CSS & JavaScript Toolbox « WordPress Plugins http://wordpress.org/plugins/css-javascript-toolbox/

CSS Javascript Toolbox では記事ごとにjavascriptやcssの管理ができます。私は js-sequence-diagrams の usage を参考にしつつ、ロード時に勝手にパースされるように次のようなスクリプトにしてみました。

手順

wordpressの 投稿編集 画面を開き、次のようなシーケンス図用のマークアップのある記事を作成します。

<pre class="diagram">
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
</ pre>

記事をポストします。この時、記事は 公開済み か パスワード保護 の状態でないと CSS Javascript Toolbox 側の posts にリストアップされないので注意（ 非公開 だとリストアップされないのはなんでだろう？）。

CSS Javascript Toolbox でシーケンス図表示用のjavascriptと記事をひもづけます。

完成

以上の結果が次のとおりです。Oh! メリケン。。ちなみに日本語に対応させる場合は手書き風の ‘hand’ ではうまくいかないので ‘simple’ にする必要があります。（ sequenceDiagram もしくは drawSVG に与える引数 theme の値 ）

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

なお、 js-sequence-diagrams の usage では、 div 内にマークアップしているようですが、wordpressの場合、フィルターの挙動（具体的には wptexturize ）で、連続するハイフンが他の文字に変換されてしまいパースに失敗してしまうようです。これを回避する為にはwordpress本体のソースを変更する必要があるため、 div タグではなく pre タグ内にマークアップしています。

参考（UML関連）：

UML
http://www.omg.org/spec/UML/

UML 2.0 Superstructure Specification
http://www.sparxsystems.com.au/bin/UML2SuperStructure.pdf

UML basics: The sequence diagram http://www.ibm.com/developerworks/rational/library/3101.html

参考（wordpress関連）：

WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック http://webdesignrecipes.com/wordpress-action-hook-and-filter-hook/

はだかの隊長日記 » WordPress：連続するハイフンを自動変換をさせない http://blog.r-unit.co.jp/archives/351

WordPressで連続したハイフンを表示させる方法 http://wazan2.com/4.html