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