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)

使用场景​

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