web-dev-qa-db-ja.com

テキスト付きの依存関係グラフを生成する方法

次のようなテキスト入力に基づいて、依存関係グラフ（矢印線でリンクされたボックス）を生成するシンプルなオンラインツールはありますか？

A-> B

このようなもの：

www.websequencediagrams.com

（シーケンス図を生成します）

graphdiagramutilities
41
hello_harry

graphviz は、グラフを生成するためのツールです。

webgraphviz.com はgraphvizを使用するWebアプリであり、テキストを変更して対応するグラフを表示できます（5サンプル/サンプルもあります）。

graphvizは次のような入力を受け取ります。

digraph G {
   A->B
}
54
Luis Muñiz

http://www.nomnoml.com

構文を使用しています：

[A] -> [B]
6
fab

私はこれが本当に古いことを知っていますが、後で他の誰かを助けるかもしれません。

個人的にはyUML.meが好きです

次の構文を考えると...

[note: You can stick notes on diagrams too!{bg:cornsilk}],
[Customer]<>1-orders>[Order], 
[Order]++*-items>[LineItem], 
[Order]-1>[DeliveryMethod], 
[Order]*-products>[Product], 
[Category]<->[Product], 
[DeliveryMethod]^[National], 
[DeliveryMethod]^[International]

...かなり複雑なダイアグラムを生成できます。そして、使いやすくするために、これはすべてのWebベースのドキュメントに埋め込むことができる一連の単純なURLとしてすべて公開されています。

  • 後で編集-戻って画像を後で編集するには： http://yuml.me/edit/5a963e1b
  • PNG画像-ブログ、Wiki、または電子メール用。透明な背景： http://yuml.me/5a963e1b
  • PDFドキュメント-印刷に最適です。無限ズーム。
  • JPEG画像-単色の背景。いくつかのデスクトップツールでより良く再生します。
  • JSONファイル-メタデータをプログラムで保存します。
  • SVG Vector Graphics-実験的！
6
SireInsectus
  • このページに移動： Interactive GraphSource Demo
  • 上記のコンボボックスを「動的バインド」に切り替えます
  • これらの値をフィールドに入力してください
    • ノードソース：_['Dummy']_
    • Edgesソース：_['A->B', 'A->C', 'D->C', 'D->A']_
    • 遅延Node定義：チェック済み
    • ソースNodeバインディング：function(Edge) { return /(.+)->(.+)/.exec(Edge)[1];}
    • ターゲットNodeバインディング：function(Edge) { return /(.+)->(.+)/.exec(Edge)[2];}
    • 残りはそのままにしておきます
  • _New Graph_ボタンを押す
  • アニメーションを見て、スクリーンショットを撮ってください！
5
Sebastian

または、人魚を使用することができます。 https://mermaidjs.github.io/ 、Markdownインタープリターでも利用可能です。

2
M.Balázs