强曰为道

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

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/Debianaptapt install graphviz最常用
Fedoradnfdnf install graphviz
CentOS/RHELyumyum install graphviz需 EPEL
Archpacmanpacman -S graphviz
macOSHomebrewbrew install graphviz推荐
WindowsMSI下载安装包需手动加 PATH
WindowsChocolateychoco install graphviz自动配 PATH
WindowsScoopscoop 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"))

在线编辑器

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

工具地址特点
Edotorhttps://edotor.net实时预览,多引擎切换
Graphviz Onlinehttps://dreampuf.github.io/GraphvizOnline简洁,SVG 输出
Viz.jshttps://viz-js.com官方 WASM 版本
GraphvizFiddlehttps://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 YaHeiWindows微软雅黑
SimHeiWindows黑体
SimSunWindows宋体
Noto Sans CJK SCLinuxGoogle Noto(推荐)
WenQuanYi Zen HeiLinux文泉驿正黑
PingFang SCmacOS苹方
Hiragino Sans GBmacOS冬青黑体

在 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));
}

语言绑定对照表

语言包名安装方式类型
Pythongraphvizpip install graphviz接口
Pythonpygraphvizpip install pygraphvizC 绑定
Pythonpydotpip install pydot接口
Gogonumgo get gonum.org/...接口
Node.js@viz-js/viznpm install @viz-js/vizWASM
Node.jsgraphviznpm install graphviz绑定
Rustgraphviz-rustCargo接口
Javaguru.nidi:graphvizMaven绑定
C#Graphviz.NetNuGet绑定

2.6 输出格式支持

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

格式参数用途特点
PNG-Tpng网页嵌入、文档位图,需指定 DPI
SVG-Tsvg网页、可缩放矢量,推荐
PDF-Tpdf打印、论文矢量,高质量
PS-Tps打印PostScript
EPS-TepsLaTeX 嵌入封装 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 语言的核心语法。