Movatterモバイル変換


[0]ホーム

URL:


Skip to content
Search Gists
Sign in Sign up

Instantly share code, notes, and snippets.

@hashrock
Last activeSeptember 18, 2025 01:43

    Select an option

    Save hashrock/208b84c61558663e40bb to your computer and use it in GitHub Desktop.
    作図系ツール・ライブラリまとめ

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

    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

    asciiflow

    http://asciiflow.com/

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

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

    [8]ページ先頭

    ©2009-2025 Movatter.jp