Webが不得意としているものの一つが図(ダイアグラム)でしょう。Canvasを駆使すればできなくもないですが、画像編集ソフトウェアを使って画像として埋め込んでしまう人の方が多そうです。 今回紹介するPinkerはJavaScriptのコードからダイアグラムを生成するソフトウェアです。

Pinkerの使い方

レイアウトとつながりの二種類で図を表現します。

こんな複雑な図も描けます。

グルーピングも簡単にできます。

さらにクラスやリレーション図で使えそうな描画も。

Pinkerはテキストファイルや文字列として定義した内容をCanvas上に描画します。配置などの細かな指定は難しいでしょうが、テキストベースで簡単にメンテナンスできるのは魅力です。リレーションなどであれば、データベース情報を取得して自動化もできそうです。

PinkerはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

デモ WithoutHaste/Pinker: A standalone JavaScript library for rendering code dependency diagrams on your web page.