DOT Graph Renderer

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 {
  // Node definitions
  A [label="Start", shape=box];
  B [label="Process", shape=ellipse];
  C [label="End", shape=doublecircle];
  
  // Edge definitions
  A -> B [label="Execute"];
  B -> C [label="Finish"];
}

Undirected Graph

graph G {
  // Node definitions
  Node1 [label="Server 1"];
  Node2 [label="Server 2"];
  Node3 [label="Database"];
  
  // Edge definitions
  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

常见问题

What's the relationship between the DOT language and Graphviz?

DOT is a graph description language that defines graph structures and attributes in text. Graphviz is an open-source toolkit that renders DOT-described graphs into images (such as PNG or SVG). This tool bundles the Graphviz engine so you can render DOT graphs online in real time.

What kinds of graphs does DOT support?

DOT supports directed graphs (digraph, using -> for edges) and undirected graphs (graph, using -- for edges). Common layout engines include dot (hierarchical), neato (force-directed), circo (circular) and fdp (force-directed).

How do I customize node styles in DOT?

Add attributes inside square brackets when defining a node, e.g. A [shape=box, color=red, style=filled, fillcolor=lightblue]. Common shapes include box, circle, ellipse, diamond, record.

What formats can the rendered graph be exported to?

This tool supports exporting the rendered graph as SVG and PNG. SVG is a vector format, ideal for printing and further editing; PNG is a bitmap, good for embedding directly in documents and web pages.