Skip to content

Instantly share code, notes, and snippets.

@hashrock
Last active October 4, 2024 00:50
Show Gist options
  • Save hashrock/208b84c61558663e40bb to your computer and use it in GitHub Desktop.
Save hashrock/208b84c61558663e40bb to your computer and use it in GitHub Desktop.
作図系ツール・ライブラリまとめ

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

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図 / ブロックダイアグラム
  • マウス操作で編集も可能

その他

@namuyan
Copy link

namuyan commented Apr 22, 2020

asciiflow

http://asciiflow.com/

  • JavaScript製
  • text出力
  • オブジェクトとして作図し、テキストとして出力

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment