Graphviz DOT 在线渲染器

DOT有两种主要图形类型：

• digraph — 有向图（箭头边）
• graph — 无向图（直线边）

基本结构：digraph 名称 { 节点定义; 边定义; }

节点：A [label="节点A", shape=box, color=blue];

有向边：A -> B [label="关系", color=red];

无向边：A -- B;

Graphviz支持丰富的节点形状，常用包括：

• box / rectangle — 矩形
• ellipse / circle — 椭圆/圆形
• diamond — 菱形（常用于流程图判断）
• parallelogram — 平行四边形（输入/输出）
• hexagon / octagon — 多边形
• plaintext — 无边框文本
• record / Mrecord — 表格记录形状

通过属性设置可以大幅提升图形美观度：

• 全局样式：使用graph [bgcolor="#f0f0f0", fontname="Arial"];
• 节点统一样式：node [style=filled, fillcolor="#e8f4f8", fontname="Arial", fontsize=11];
• 边统一样式：edge [color="#666", penwidth=1.5, fontname="Arial"];
• 渐变填充：fillcolor="blue:red" 配合 gradientangle=90
• 圆角：style="rounded,filled"

子图用于将相关节点分组，可以控制分组布局和样式：

subgraph cluster_0 {
    label = "模块A";
    style = filled;
    fillcolor = "#e8f4e8";
    A1; A2; A3;
}

以cluster_开头的子图名称会生成带边框的分组区域，非常适合展示模块化结构或分层架构。

Graphviz提供多种布局引擎，在DOT中可通过layout属性指定：

• dot — 层次布局，适合流程图、树形结构（默认）
• neato — 弹簧模型布局，适合无向图、社交网络
• fdp — 类似neato但使用不同的力导向算法
• circo — 环形布局，适合网络拓扑
• twopi — 放射状布局

本工具使用viz.js的默认布局引擎（dot），如需其他引擎可在代码中通过layout=neato等指定。

• 缺少分号：每条语句必须以;结尾
• 括号不匹配：确保花括号{}正确配对
• 节点名包含特殊字符：使用双引号包裹，如"node-1"
• 边方向错误：无向图使用--，有向图使用->
• 子图命名：分组子图必须以cluster_开头

DOT关系图广泛应用于：

• 软件架构：组件依赖关系、微服务拓扑
• 数据库设计：ER图、表关系图
• 流程管理：业务流程图、审批流程
• 状态机：状态转换图、协议状态
• 组织架构：公司层级、团队结构
• 网络工程：网络拓扑、基础设施图
• 知识图谱：概念关系、思维导图