Skip to content

Instantly share code, notes, and snippets.

@hnakamur hnakamur/diag.md forked from hashrock/diag.md
Created Oct 18, 2015

Embed
What would you like to do?
作図系ツール・ライブラリまとめ

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

GraphViz

http://www.graphviz.org/

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

PlantUML

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

wireframe

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使ってる

その他

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.