Chuyển tới nội dung chính

DOT 图形渲染

Ví dụ

Trình soạn thảo DOT

Loading...

Xem trước

Nhập mã DOT và nhấn nút kết xuất để xem trước
提示：鼠标拖拽移动、滚轮缩放

Hướng dẫn sử dụng

  • DOT là ngôn ngữ mô tả đồ thị Graphviz
  • Chọn từ ví dụ hoặc nhập mã DOT thủ công
  • Nhấn nút "Kết xuất" để xem trước thời gian thực
  • Xuất dưới dạng SVG hoặc 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 是位图格式，适合在文档和网页中直接使用。