【概要】
システムやアルゴリズムの動作図（パラパラ漫画）を、DOT（Graphviz）風のテキスト記述から作図できるツールを作りました。
【用途】
おもに木・グラフなどのデータ構造・アルゴリズムの動作の作図、OAuth/OpenIDやKerberos認証の動作の作図などに向いています。
【特徴】
テキストベースの記述
下記のようなDOT（Graphviz）言語風のテキスト記述から図を生成します。1枚絵ではなく、動作図（パラパラ漫画）を生成できます。
【sample.txt】
node[margin='0 70'];
group clients {
User[shape='person'];
Browser;
};
group servers {
App;
DB[shape='cylinder'];
}
---
User -> Browser[t='input', stroke-dasharray="8 8"];
---
Browser -> App[t='access'];
App -> DB [t='CRUD'];
【生成された動作図】
（rougher.js により手書き風にしています）
その他の特徴
- SVG画像ファイルをコマンドラインツールにより生成します。
- SVG属性を指定して、見た目を調整できます。
- 各要素の配置が調整可能です。
- アニメーション（パラパラ漫画）の変化を記述するための差分記述モードがあります。
ギャラリー
下記のような図を作成できます。 rougher.js により手書き風にしています。
背景
既存のお絵かきツールには下記の使いにくさがありました。
GUIのお絵かきツール
- 自由に配置できる反面、要素数が多いと作図・調整が手間
- 複数の図があるとき、1枚変更すると後続の図も修正しないといけない
テキストベースの図表生成ツール
- 要素の位置の指定がしにくい
- 状態変化を表現しにくい
- 要素の追加・削除で他要素の位置が変わってしまう
- 変更点だけを記述できないので記述量が多くなりがち（図の枚数分、図全体を記述しないといけない）
そこで図中の各要素を自動配置しつつ変化を表現するための動作図作成ツールを開発しました。
インストール / 実行 / 機能
インストール方法・実行方法は下記の通りです：
配置や装飾を調整する機能もあります：
https://github.com/signdoubt/sysvis/blob/master/README.ja.md#%E6%96%87%E6%B3%95%E6%A9%9F%E8%83%BD
