DOT 图形渲染

Examples

Select example

DOT Editor

Loading...

Preview

Enter DOT code and click render to see preview

提示：鼠标拖拽移动、滚轮缩放

Instructions

• DOT is Graphviz graph description language
• Select from examples or manually enter DOT code
• Click "Render" button for real-time preview
• Export as SVG or PNG format
• 交互：鼠标左/右键拖拽移动、滚轮缩放（5%步进）、点击百分比重置

DOT Language Introduction

DOT is a graph description language used by Graphviz to describe graphs, flowcharts, network topologies, etc. It is a simple text format that can describe nodes, edges, and their attributes.

Basic Syntax

Directed Graph

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"];
}

Undirected Graph

graph G {
  // 节点定义
  Node1 [label="Server 1"];
  Node2 [label="Server 2"];
  Node3 [label="Database"];
  
  // 边定义
  Node1 -- Node2;
  Node2 -- Node3;
  Node1 -- Node3;
}

Common Attributes

Attribute	Description	Example
label	Label for node or edge	A [label="Start"]
shape	Node shape	box, circle, ellipse, diamond
color	Color	color="red"
style	Style	filled, dashed, dotted
rankdir	Layout direction	TB (top-bottom), LR (left-right)

Use Cases

• Software Architecture Diagram：Show system components and relationships
• Flowchart：Describe business processes and decisions
• Network Topology：Display network devices and connections
• State Machine Diagram：Describe state transitions
• Organizational Chart：Show team or department relationships

常见问题

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 是位图格式，适合在文档和网页中直接使用。