メインコンテンツまでスキップ

DOT グラフレンダラー

例

DOT エディター

Loading...

プレビュー

DOTコードを入力してレンダリングボタンをクリックするとプレビューが表示されます
提示：鼠标拖拽移动、滚轮缩放

使用説明

  • DOTはGraphvizグラフ記述言語です
  • 例から選択するか、手動でDOTコードを入力してください
  • 「レンダリング」ボタンをクリックしてリアルタイムプレビューを表示
  • SVGまたはPNG形式でエクスポート
  • 交互：鼠标左/右键拖拽移动、滚轮缩放（5%步进）、点击百分比重置

DOT 言語について​

DOT は Graphviz のグラフ記述言語で、グラフ、フローチャート、ネットワークトポロジなどを記述するために使われます。ノード、エッジ、およびそれらの属性を記述するシンプルなテキスト形式です。

基本構文​

有向グラフ​

digraph G {
  // ノード定義
  A [label="Start", shape=box];
  B [label="Process", shape=ellipse];
  C [label="End", shape=doublecircle];
  
  // エッジ定義
  A -> B [label="Execute"];
  B -> C [label="Finish"];
}

無向グラフ​

graph G {
  // ノード定義
  Node1 [label="Server 1"];
  Node2 [label="Server 2"];
  Node3 [label="Database"];
  
  // エッジ定義
  Node1 -- Node2;
  Node2 -- Node3;
  Node1 -- Node3;
}

よく使う属性​

属性説明例
labelノードまたはエッジのラベルA [label="Start"]
shapeノードの形状box, circle, ellipse, diamond
color色color="red"
styleスタイルfilled, dashed, dotted
rankdirレイアウト方向TB (上から下), LR (左から右)

ユースケース​

  • ソフトウェアアーキテクチャ：システムの構成要素と関係を可視化
  • フローチャート：業務フローや意思決定を記述
  • ネットワークトポロジ：ネットワーク機器と接続を表示
  • 状態機械：状態遷移を記述
  • 組織図：チームや部門の関係を可視化

常见问题

DOT 言語と Graphviz の関係は？
DOT はグラフの構造と属性をテキストで定義するグラフ記述言語です。Graphviz は DOT 記述を画像 (PNG や SVG) にレンダリングするオープンソースツールキットです。本ツールは Graphviz エンジンを内蔵し、ブラウザ上でリアルタイムに DOT グラフをレンダリングできます。
DOT 言語が対応するグラフの種類は？
有向グラフ (digraph、エッジに -> を使用) と無向グラフ (graph、エッジに -- を使用) に対応しています。よく使われるレイアウトエンジンには dot (階層型)、neato (力指向)、circo (環状)、fdp (力指向) などがあります。
DOT グラフでノードのスタイルを変更するには？
ノード定義時に角括弧で属性を追加します。例: A [shape=box, color=red, style=filled, fillcolor=lightblue]。よく使う shape として box、circle、ellipse、diamond、record などがあります。
レンダリングしたグラフはどんな形式でエクスポートできますか？
本ツールはレンダリング結果を SVG と PNG 形式でエクスポートできます。SVG はベクター形式で印刷や再編集に適しています。PNG はビットマップ形式で、文書やウェブページに直接埋め込むのに適しています。
このツールを共有