Graphviz 图形可视化教程 / 01 - Graphviz 概述

第 01 章 · Graphviz 概述

1.1 什么是 Graphviz

Graphviz（Graph Visualization Software）是由 AT&T 实验室开发的开源图形可视化软件包。它的核心理念是：

用声明式语言描述图形的拓扑结构，让算法自动计算最优布局。

与手动拖拽绘图工具（如 Visio、draw.io）不同，Graphviz 让你专注于**“画什么”而非“怎么画”**。

核心优势

1.2 DOT 语言简介

DOT 是 Graphviz 使用的图形描述语言，语法极其简洁：

digraph G {
    A -> B -> C
    A -> C
}

这段代码描述了一个有向图：A 指向 B，B 指向 C，同时 A 也直接指向 C。

DOT 语言的三个核心元素

// 1. 图声明
digraph G { ... }   // 有向图
graph G { ... }     // 无向图

// 2. 节点声明与属性
A [label="节点A" shape=box]

// 3. 边声明与属性
A -> B [label="连接" color=red]

DOT 语法速查

1.3 布局引擎概览

Graphviz 提供多种布局引擎，适用于不同类型的图形结构：

引擎选择流程图

digraph EngineGuide {
    rankdir=TB
    node [shape=box style=rounded fillcolor="#FFF3E0" color="#FF9800" fontname="Microsoft YaHei"]
    edge [color="#666666"]

    start [label="你的图形类型？" shape=diamond fillcolor="#E3F2FD" color="#1976D2"]
    directed [label="有向图/DAG\n流程图"]
    undirected [label="无向图"]
    tree [label="树形/层次"]
    circular [label="环形/循环"]
    large [label="节点数 > 1000?"]

    start -> directed [label="有向边"]
    start -> undirected [label="无向边"]
    start -> tree [label="树结构"]
    start -> circular [label="环形结构"]

    directed -> dot [label="推荐"]
    undirected -> large
    large -> fdp [label="是"]
    large -> neato [label="否"]
    tree -> twopi
    circular -> circo

    dot [fillcolor="#C8E6C9" color="#388E3C"]
    neato [fillcolor="#C8E6C9" color="#388E3C"]
    fdp [fillcolor="#C8E6C9" color="#388E3C"]
    twopi [fillcolor="#C8E6C9" color="#388E3C"]
    circo [fillcolor="#C8E6C9" color="#388E3C"]
}

1.4 适用场景

✅ 典型应用场景

❌ 不适合的场景

1.5 发展历史

设计哲学

Graphviz 遵循 Unix 哲学：

1. 单一职责 — 每个布局引擎只做一件事
2. 文本流 — 输入/输出均为文本，便于管道组合
3. 可组合 — 可与 awk、sed、脚本语言无缝集成

# Unix 管道风格使用 Graphviz
echo 'digraph { A -> B -> C }' | dot -Tsvg > output.svg

1.6 第一个完整示例

让我们绘制一个简单的微服务架构图：

digraph Microservices {
    // 全局设置
    rankdir=TB
    bgcolor="#FAFAFA"
    fontname="Microsoft YaHei"
    node [fontname="Microsoft YaHei" fontsize=11]
    edge [fontname="Microsoft YaHei" fontsize=9]

    // 客户端
    subgraph cluster_clients {
        label="客户端"
        style=dashed
        color="#9E9E9E"
        WebApp [shape=box style=filled fillcolor="#E3F2FD" color="#1976D2" label="Web 应用"]
        MobileApp [shape=box style=filled fillcolor="#E3F2FD" color="#1976D2" label="移动 App"]
    }

    // 网关
    Gateway [shape=box3d style=filled fillcolor="#FFF3E0" color="#FF9800" label="API 网关"]

    // 服务
    subgraph cluster_services {
        label="微服务层"
        style=dashed
        color="#4CAF50"
        UserService [shape=component style=filled fillcolor="#E8F5E9" color="#388E3C" label="用户服务"]
        OrderService [shape=component style=filled fillcolor="#E8F5E9" color="#388E3C" label="订单服务"]
        PayService [shape=component style=filled fillcolor="#E8F5E9" color="#388E3C" label="支付服务"]
    }

    // 数据层
    subgraph cluster_data {
        label="数据层"
        style=dashed
        color="#9C27B0"
        MySQL [shape=cylinder style=filled fillcolor="#F3E5F5" color="#7B1FA2" label="MySQL"]
        Redis [shape=cylinder style=filled fillcolor="#F3E5F5" color="#7B1FA2" label="Redis"]
    }

    // 连接关系
    WebApp -> Gateway [label="HTTP"]
    MobileApp -> Gateway [label="HTTP"]
    Gateway -> UserService [label="gRPC"]
    Gateway -> OrderService [label="gRPC"]
    OrderService -> PayService [label="调用"]
    UserService -> MySQL [label="读写"]
    OrderService -> MySQL [label="读写"]
    UserService -> Redis [label="缓存"]
}

将以上代码保存为 microservices.dot，执行：

dot -Tpng microservices.dot -o microservices.png -Gdpi=150
dot -Tsvg microservices.dot -o microservices.svg

1.7 与其他工具对比

注意事项

⚠️ 编码问题：DOT 文件必须使用 UTF-8 编码，否则中文标签可能乱码。

⚠️ 特殊字符：节点标签中的 <、>、{、}、| 需要转义或使用 HTML 标签。

⚠️ 布局引擎差异：同一份 DOT 代码在不同引擎下效果完全不同，需根据场景选择。

⚠️ 有向图 vs 无向图：digraph 使用 ->，graph 使用 --，混用会报错。

扩展阅读

• Graphviz 官方文档
• DOT 语言规范
• Graphviz Gallery — 官方示例集
• Graphviz 在学术论文中的应用
• 书籍：《Drawing Graphs with Dot》— Graphviz 官方指南

下一章：02 - 安装与环境配置 — 在各平台安装 Graphviz 并配置开发环境。