preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」

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]-&gt;[A],[C]
	[D]-&gt;[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。

Pinker.js