Pinker.js
Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。
特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複雑なものも書けるみたいです。
以下動作サンプルです。
動作サンプル
左のpreタグのテキストを元に右のcanvasタグにダイアグラムが生成されています。
使い方
Pinker.jsを読み込みます
< script src = 'Pinker.js' ></ script > |
preにルールに沿った記法で書き、idを振ります。Layout:で位置を決め、Relate:で関係性を設定します。
< pre id = "Source01" >Layout: [A] [B][D][E] [C]...[F] Relate: [B]->[A],[C] [D]->[B],[E],[F] </ pre > |
canvasを用意します。
< canvas id = 'Canvas01' ></ canvas > |
drawメソッドで紐付けて完成です
<script> var canvas = document.getElementById( "Canvas01" ); var source = document.getElementById( "Source01" ).innerHTML; pinker.draw(canvas, source); </script> |
ダイアグラムだけ表示したいならpreをdisplay:none;しておけばいいと思います。
記法はドキュメントに詳しく書かれていますのでご参照ください。ライセンスはMIT。