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)

使用场景

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

常见问题

DOT 语言和 Graphviz 是什么关系？

DOT 是一种图形描述语言，用于以文本形式定义图形结构和属性。Graphviz 是一组开源工具，负责将 DOT 语言描述的图形渲染为图片（如 PNG、SVG）。本工具集成了 Graphviz 引擎，可以在线实时渲染 DOT 图形。

DOT 语言支持哪些图形类型？

DOT 语言支持有向图（digraph，使用 -> 表示边）和无向图（graph，使用 -- 表示边）。常用的布局引擎包括 dot（层次布局）、neato（力导向布局）、circo（环形布局）和 fdp（力导向布局）等。

如何修改 DOT 图形中节点的样式？

可以在节点定义时通过方括号添加属性，如 A [shape=box, color=red, style=filled, fillcolor=lightblue]。常用的 shape 包括 box、circle、ellipse、diamond、record 等。

DOT 图形可以导出为什么格式？

本工具支持将渲染后的图形导出为 SVG 和 PNG 格式。SVG 是矢量格式，适合打印和进一步编辑；PNG 是位图格式，适合在文档和网页中直接使用。