Wintus
10/17/2015 - 1:48 PM

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

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

diag.md
content_copyfile_download
  • Rendered
  • Source

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

GraphViz

http://www.graphviz.org/

PlantUML

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

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

graph-easy

http://www.showa-corp.jp/special/graphtools/graph-easy.html

  • Perl製
  • ブロック図
  • 基本的にアスキーアートを出すものっぽい
  • ASCII, HTML, PNG, GIF, SVG, DOTに出力可能
  • Ditaaを出力にかますことで綺麗な図を作成出来る。

guiflow

http://qiita.com/hirokidaichi/items/ff54a968bdd7bcc50d42

  • JavaScript製
  • UI Flow図

MarkdownDiagram

http://qiita.com/wakufactory/items/8a0cf4ffdd52936f7469

  • JavaScript製
  • ER図 / ブロックダイアグラム
  • マウス操作で編集も可能

その他