flowchart.jsでテキストから綺麗なフローチャートを作図

flowchart.jsを使うと、テキストで指定したノードの形状やテキストラベル、ノード同士の接続をテキスト形式で記述すると、きれいなフローチャートが自動的に作図されます。VisioやPowerPointを使った煩雑な作図作業から解放されましょう。gistにサンプルを掲載してみました。

サンプルの表示のしかた

raphael-min.jsとflowchart-latest.jsをダウンロードして、同じフォルダに置いてからHTMLファイルをブラウザで開いてみてください。

1
2
3
4
5
6

mkdir flowchart
cd flowchart
curl -O http://adrai.github.io/flowchart.js/flowchart-latest.js
curl -O http://github.com/DmitryBaranovskiy/raphael/raw/maser/raphael-min.js
curl -O https://gist.githubusercontent.com/yuasatakayuki/6dec1a2194f04903481a/raw/6a670c1c53b19a84f4e23433f961faa69509e002/flowchart_sample.html
open flowchart_sample.html

gist上のコード