强曰为道
与天地相似,故不违。知周乎万物,而道济天下,故不过。旁行而不流,乐天知命,故不忧.
文档目录

Graphviz 图形可视化教程 / 02 - 安装与环境配置

第 02 章 · 安装与环境配置

2.1 各平台安装

Linux

Debian / Ubuntu

# 安装核心工具
sudo apt-get update
sudo apt-get install -y graphviz

# 验证安装
dot -V
# dot - graphviz version 2.43.0 (20240101.0000)

# 安装可选组件
sudo apt-get install -y \
    graphviz-dev \          # 开发库(语言绑定需要)
    libgraphviz-dev \       # C 开发头文件
    fonts-noto-cjk          # 中文字体支持

Fedora / RHEL / CentOS

# Fedora
sudo dnf install -y graphviz graphviz-devel

# RHEL / CentOS(需要 EPEL)
sudo yum install -y epel-release
sudo yum install -y graphviz graphviz-devel

Arch Linux

sudo pacman -S graphviz

macOS

# 使用 Homebrew(推荐)
brew install graphviz

# 使用 MacPorts
sudo port install graphviz

# 验证
dot -V

⚠️ macOS 上如果遇到字体问题,可能需要安装中文字体:

brew install font-noto-sans-cjk

Windows

方式一:官方安装包

  1. 访问 https://graphviz.org/download/
  2. 下载 Windows 稳定版 .msi 安装包
  3. 运行安装程序,勾选 “Add to PATH”
  4. 打开新终端验证:
dot -V

方式二:Chocolatey

choco install graphviz

方式三:Scoop

scoop install graphviz

方式四:WSL (推荐开发者)

# 在 WSL 中安装
sudo apt-get install -y graphviz

全平台安装对照

平台 包管理器 命令 备注
Ubuntu/Debian apt apt install graphviz 最常用
Fedora dnf dnf install graphviz
CentOS/RHEL yum yum install graphviz 需 EPEL
Arch pacman pacman -S graphviz
macOS Homebrew brew install graphviz 推荐
Windows MSI 下载安装包 需手动加 PATH
Windows Chocolatey choco install graphviz 自动配 PATH
Windows Scoop scoop install graphviz 自动配 PATH

2.2 验证安装

安装完成后,验证各组件是否可用:

# 检查版本
dot -V

# 列出可用布局引擎
dot -c

# 快速测试
echo 'digraph { A -> B }' | dot -Tpng > test.png && echo "OK"

核心命令列表

命令 说明
dot 层次布局引擎(最常用)
neato 力导向布局
fdp 力导向布局(改进版)
sfdp 多尺度力导向布局
twopi 放射状布局
circo 圆形布局
osage 矩形布局
patchwork 矩形树图
gv2gml 转换为 GML 格式
gv2gxl 转换为 GXL 格式
gml2gv 从 GML 格式导入
gxl2gv 从 GXL 格式导入
gvpack 打包多个图形
gvc 图形上下文配置工具

2.3 编辑器插件

VS Code

推荐插件:

插件名 功能 ID
Graphviz Preview 实时预览 DOT 文件 efoiles.graphviz-preview
Graphviz (DOT) language 语法高亮与补全 joaompinto.vscode-graphviz
Graphviz Preview (by Stepalgo) 侧栏预览 stepalgo.graphviz-preview

安装方式:

# 命令行安装
code --install-extension efoiles.graphviz-preview
code --install-extension joaompinto.vscode-graphviz

IntelliJ IDEA / PyCharm

  • 插件名:Graphviz Diagrams
  • 安装路径:Settings → Plugins → Marketplace → 搜索 “Graphviz”

Vim / Neovim

" 使用 vim-graphviz 插件
Plug 'wannesm/wmgraphviz.vim'

" 或使用 LSP 支持
Plug 'skosch/vim-dotfiles'

Emacs

;; graphviz-dot-mode
(use-package graphviz-dot-mode
  :ensure t
  :mode "\\.dot\\'"
  :config
  (setq graphviz-dot-dot-program "dot")
  (setq graphviz-dot-preview-extension "svg"))

在线编辑器

无需本地安装,浏览器中即可使用:

工具 地址 特点
Edotor https://edotor.net 实时预览,多引擎切换
Graphviz Online https://dreampuf.github.io/GraphvizOnline 简洁,SVG 输出
Viz.js https://viz-js.com 官方 WASM 版本
GraphvizFiddle https://graphs.grevian.org 带示例库

2.4 字体配置

中文字体支持

Graphviz 使用 fontname 属性指定字体。中文字体需要系统中已安装对应字体。

Linux 配置

# 安装常用中文字体
sudo apt-get install -y fonts-noto-cjk      # Noto Sans CJK
sudo apt-get install -y fonts-wqy-zenhei     # 文泉驿正黑
sudo apt-get install -y fonts-wqy-microhei   # 文泉驿微米黑

# 更新字体缓存
fc-cache -fv

# 验证中文字体
fc-list :lang=zh

常用中文字体名

字体族名称 系统 说明
Microsoft YaHei Windows 微软雅黑
SimHei Windows 黑体
SimSun Windows 宋体
Noto Sans CJK SC Linux Google Noto(推荐)
WenQuanYi Zen Hei Linux 文泉驿正黑
PingFang SC macOS 苹方
Hiragino Sans GB macOS 冬青黑体

在 DOT 文件中设置字体

digraph G {
    // 全局字体设置
    graph [fontname="Noto Sans CJK SC"]
    node  [fontname="Noto Sans CJK SC"]
    edge  [fontname="Noto Sans CJK SC"]

    中文节点 -> 另一个节点 [label="中文标签"]
}

创建字体别名(推荐)

在 Linux 上创建 Graphviz 字体配置:

# 创建配置文件
sudo mkdir -p /etc/graphviz
cat << 'EOF' | sudo tee /etc/graphviz/fontmap
Microsoft YaHei     Noto Sans CJK SC
SimHei              Noto Sans CJK SC
SimSun              Noto Serif CJK SC
PingFang SC         Noto Sans CJK SC
EOF

2.5 语言绑定安装

Python — graphviz

# 安装 Python 绑定(纯接口,仍需系统安装 graphviz)
pip install graphviz

# 或使用 pygraphviz(C 绑定,需先安装 graphviz-dev)
pip install pygraphviz
from graphviz import Digraph

dot = Digraph(comment='示例')
dot.node('A', '开始')
dot.node('B', '结束')
dot.edge('A', 'B', label='流程')
dot.render('output', format='png', cleanup=True)

Python — pydot

pip install pydot
import pydot

graph = pydot.Dot(graph_type='digraph')
node_a = pydot.Node('A', label='开始')
node_b = pydot.Node('B', label='结束')
graph.add_node(node_a)
graph.add_node(node_b)
graph.add_edge(pydot.Edge(node_a, node_b, label='流程'))
graph.write_png('output.png')

Go — gonum/graphviz

go get gonum.org/v1/gonum/graph/viz

Node.js — graphviz / viz.js

npm install @viz-js/viz    # 官方 WASM 版本(推荐)
npm install graphviz        # Node 绑定
import { instance } from "@viz-js/viz";

const viz = await instance();
const svg = viz.renderSVGElement('digraph { A -> B }');
document.body.appendChild(svg);

Rust — graphviz-rust

# Cargo.toml
[dependencies]
graphviz-rust = "0.9"
use graphviz_rust::dot_generator::*;
use graphviz_rust::dot_structures::*;
use graphviz_rust::print;

fn main() {
    let g = graph!(id!("G");
        node!("A"; attr!("label", "开始")),
        node!("B"; attr!("label", "结束")),
        edge!(node_id!("A") => node_id!("B"))
    );
    println!("{}", print(g));
}

语言绑定对照表

语言 包名 安装方式 类型
Python graphviz pip install graphviz 接口
Python pygraphviz pip install pygraphviz C 绑定
Python pydot pip install pydot 接口
Go gonum go get gonum.org/... 接口
Node.js @viz-js/viz npm install @viz-js/viz WASM
Node.js graphviz npm install graphviz 绑定
Rust graphviz-rust Cargo 接口
Java guru.nidi:graphviz Maven 绑定
C# Graphviz.Net NuGet 绑定

2.6 输出格式支持

Graphviz 支持丰富的输出格式,不同格式适合不同用途:

格式 参数 用途 特点
PNG -Tpng 网页嵌入、文档 位图,需指定 DPI
SVG -Tsvg 网页、可缩放 矢量,推荐
PDF -Tpdf 打印、论文 矢量,高质量
PS -Tps 打印 PostScript
EPS -Teps LaTeX 嵌入 封装 PS
JSON -Tjson 程序解析 结构化数据
DOT -Tdot 带位置信息的 DOT 含坐标
XDOT -Txdot 扩展 DOT 含绘图指令
plain -Tplain 简单文本输出 便于程序解析
plain-ext -Tplain-ext 扩展文本输出 含端口信息

输出格式依赖

不同格式可能需要额外的库:

# PNG/JPEG 输出 — 需要 librsvg 或 Cairo
sudo apt-get install librsvg2-dev libcairo2-dev libpango1.0-dev

# PDF 输出 — 需要 Cairo 和 Pango
# 同上,Cairo/Pango 安装后自动支持

# 检查支持的格式
dot -T?

2.7 配置文件

全局配置

Graphviz 支持通过 ~/.config/graphviz/config 或环境变量进行全局配置。

# 环境变量方式
export GV_FILE_PATH="/home/user/graphviz/fonts:/home/user/graphviz/stdlib"

# 设置默认字体
export DOTFONTPATH="/usr/share/fonts/truetype/noto"

系统级配置

/etc/graphviz/config/usr/lib/graphviz/config64

# 字体映射示例
fontcharlist = /usr/lib/graphviz/fontcharlist

注意事项

⚠️ graphviz 与 graphviz-dev:仅运行 DOT 文件只需 graphviz 包;编译 pygraphviz 等 C 绑定需要 -dev 包。

⚠️ Windows PATH:Windows 安装后务必确认 dot.exe 所在目录已加入 PATH 环境变量。

⚠️ Docker 镜像:如需在容器中使用,参考第 11 章。

⚠️ 版本差异:Graphviz 2.x 系列功能差异较大,建议使用 2.42+ 版本。

⚠️ WASM 方案:如不想本地安装,可使用 viz.js(WebAssembly 版本),在浏览器或 Node.js 中运行。


扩展阅读


下一章03 - DOT 语言基础 — 掌握 DOT 语言的核心语法。