作図系ツール・ライブラリまとめ

diag.md

シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ

GraphViz

http://www.graphviz.org/

• C製
• Doxygen, Moinmoinなどと連携可能
• ブロック図、クラス図、ネットワーク図など
• PNG, SVGなど 出力可能形式一覧

PlantUML

• Java製
• シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる
• PNG, SVG, LaTeX, ASCII出力
• なんとワイヤーフレームも作れる。アイコンとかも入れられる。

blockdiag

http://blockdiag.com/ja/blockdiag/

• Python製
• ブロック図, シーケンス図, アクティビティ図, 物理ネットワーク図など
• blockdiag, seqdiag, actdiag, nwdiagから構成されている
• スクリプトはGraphViz風
• Sphinx, Trac, Redmine, 各種 Wiki エンジン等に対応
• WebUIがあった https://github.com/dataich/LiveDiag

mermaid

https://github.com/knsv/mermaid

• JavaScript製
• d3を使っている模様
• 出力はSVGだが、CLIからも使えて、PNG出力とかもできる（要PhantomJS）
• Markdown風文法（らしい）
• フローチャート, シーケンス図, 面白いとこだとガントチャートも作れる

js-sequence-diagrams

http://bramp.github.io/js-sequence-diagrams/

• JavaScript製
• SVG出力
• シーケンス図のみ
• テーマ機能あり（デフォルトの出力はゆるい）

Seqdiag.js

http://walf443.github.io/seqdiag.js/

• JavaScript製
• SVG出力
• シーケンス図のみ

text-diagram

https://github.com/weidagang/text-diagram

• JavaScript製
• シーケンス図
• RAWテキスト出力
• READMEとかに埋め込むと割とクールかもしれない

flowchart.js

http://flowchart.js.org/

• JavaScript製
• フローチャートのみ
• SVG出力
• 描画にRaphaël使ってる

その他

• HTML5ベースのフローチャート作図ツールらしい。OSS。 http://diagramo.com/
• bpmnというモデル図を作るエディタらしい https://github.com/bpmn-io/diagram-js
• Railroad diagramsという、文法可視化した図を作れるやつ https://github.com/tabatkins/railroad-diagrams
• MathBox WebGLを使ったビジュアライズ用ライブラリ https://gitgud.io/unconed/mathbox
• ベン図描画 https://github.com/benfred/venn.js
• Ditaa ASCIIアートから図へ変換 http://ditaa.sourceforge.net/
• shaape 同上 https://github.com/christiangoltz/shaape