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 (top-bottom), LR (left-right)

使用场景

• 软件架构图：展示系统组件和关系
• 流程图：描述业务流程和决策
• 网络拓扑图：显示网络设备和连接
• 状态机图：描述状态转换
• 组织结构图：展示团队或部门关系