鱼刺图避坑指南：5分钟速查手册，别再被官方文档绕晕
官方文档往往长篇大论，你盯着那一堆XML标签和属性定义，脑子直接宕机。别费劲啃说明书了，直接看这份速查手册。咱们今天不聊虚的，只聊在工程图里画“鱼刺图”（Fishbone Diagram）时，怎么用最少的代码写出最清晰的逻辑。
很多刚接触绘图库的朋友，一上来就试图用 graphviz 或 plantuml 硬造，结果发现层级关系一乱，箭头就打架。其实，“鱼刺”在编程语境下，特指这种层级分明的因果分析图。下面我基于10年实战经验，横向对比三种主流方案：Graphviz (DOT语言)、Mermaid.js 和 Python matplotlib。
1. 各自定位：谁适合画工程级的鱼刺图？
在开始敲代码前，你得搞清楚这三款工具的“性格”。
Graphviz 是老牌的图布局引擎，C语言写成，性能强悍。它的核心优势在于自动布局算法。你只管定义节点和边，它负责算出最美观的位置。对于复杂的鱼刺图，尤其是当“小刺”非常多、文字很长时，Graphviz 能自动避免重叠，这是纯手写坐标方案（如 matplotlib）做不到的。但它的学习曲线陡峭，DOT语言像是一种特殊的配置协议，写起来不像写代码，更像在填表单。
Mermaid.js 是前端领域的宠儿，语法极简，类 Markdown。它的优势是集成成本低，如果你在做 Vue/React 博客或者 Wiki 系统，直接在 Markdown 里插一段 Mermaid 代码就能渲染出图。但对于复杂的鱼刺结构，Mermaid 的支持相对有限，通常需要通过 flowchart 变通实现，或者使用较新的 mindmap 扩展，原生对“鱼刺”这种特定拓扑结构的支持不如 Graphviz 直接。
Python matplotlib 是数据科学家的标配。它的优势是完全控制。你想让哪根刺粗一点，哪个字红色，哪个箭头弯曲，全由你说了算。缺点也很明显：手动布局。你得自己算 x, y 坐标。一旦节点多了，代码量爆炸，而且改一个位置，可能整张图就歪了。
2. 核心差异：一张表看懂选型关键
为了让你快速决策，我整理了对比表格。请注意，这里的“鱼刺”指的是具有主干、大刺、小刺层级的因果图结构。
维度
Graphviz (DOT)
Mermaid.js
Python matplotlib
核心定位
系统级图布局引擎，后端生成图片
前端轻量级图表库，Markdown 友好
通用 2D 绘图库，数据可视化核心
布局机制
自动布局 (SFDP/TU)
基于文本流自动排列
手动指定坐标或简易循环
代码复杂度
中等 (需理解节点/边/子图)
低 (类似伪代码)
高 (需处理坐标计算)
样式控制力
强 (通过属性精确控制)
中 (依赖主题配置)
极强 (像素级控制)
学习成本
高 (需查文档记属性)
低 (语法直观)
中 (需熟悉 Matplotlib API)
适用场景
CI/CD 集成、复杂依赖分析、工程文档
博客、Wiki、快速原型、前端交互
学术论文、定制化报表、数据驱动图表
输出格式
SVG/PNG/PDF (矢量优先)
SVG/HTML (前端渲染)
PNG/SVG/PDF (后端渲染)
依赖关系
需安装 Graphviz 系统库
无后端依赖 (JS 库)
需安装 Python 环境
关键洞察：
如果你的鱼刺图节点超过 15 个，或者文字长度参差不齐，Graphviz 是唯一的稳健选择。Mermaid 在处理长文本换行时经常报错或布局崩坏，而 Matplotlib 会把你逼疯在坐标计算上。
3. 代码写法对比：同一张图，三种实现
假设我们要画一个经典的“系统响应慢”鱼刺图：
主干：系统响应慢
大刺 (4类)：代码、服务器、网络、数据
小刺 (示例)：
代码：循环嵌套、N+1查询
服务器：CPU高、内存泄漏
网络：DNS解析慢、带宽不足
数据：索引缺失、数据量过大
方案一：Graphviz (DOT 语言)
这是最推荐用于工程文档的方案。注意 rankdir 和 compound 属性，这是画好鱼刺的关键。
digraph Fishbone {
rankdir=LR; // 从左到右，主干在左侧
compound=true; // 允许边跨越子图，形成鱼刺效果
node [shape=box, style=rounded,filled, fillcolor=lightyellow, fontname=Arial, fontsize=10];
edge [fontname=Arial, fontsize=9, color=gray];
// 主干节点
subgraph cluster_main {
label=;
style=invis;
root [label=系统响应慢, shape=ellipse, fillcolor=lightblue, fontsize=12, bold=true];
}
// 第一层大刺
subgraph cluster_code {
label=代码;
style=rounded;
fillcolor=white;
c1 [label=循环嵌套];
c2 [label=N+1查询];
}
subgraph cluster_server {
label=服务器;
style=rounded;
fillcolor=white;
s1 [label=CPU高];
s2 [label=内存泄漏];
}
subgraph cluster_network {
label=网络;
style=rounded;
fillcolor=white;
n1 [label=DNS解析慢];
n2 [label=带宽不足];
}
subgraph cluster_data {
label=数据;
style=rounded;
fillcolor=white;
d1 [label=索引缺失];
d2 [label=数据量过大];
}
// 连接主干与大刺 (使用 compound=true 的边)
{ rank=same; root; }
root - c1 [lhead=cluster_code];
root - c2 [lhead=cluster_code];
root - s1 [lhead=cluster_server];
root - s2 [lhead=cluster_server];
root - n1 [lhead=cluster_network];
root - n2 [lhead=cluster_network];
root - d1 [lhead=cluster_data];
root - d2 [lhead=cluster_data];
}
逐行讲解：
rankdir=LR：决定主干方向。鱼刺图通常主干水平，刺向上/下分布，但在 Graphviz 中，我们通常把主干放在一侧，其他节点通过 lhead 指向子图容器。
compound=true：核心技巧。允许边直接连接到 subgraph 的边框，而不是具体的节点。这是实现“刺”从主干“长出来”视觉效果的关键。
lhead=cluster_code：这条边从 root 发出，指向 cluster_code 这个子图的整体边界。Graphviz 会自动优化这条边的路径，使其看起来像一根刺。
方案二：Mermaid.js (Flowchart 变通)
Mermaid 没有原生的 fishbone 图表类型，但可以用 flowchart 模拟。注意，这种写法在处理大量文本时容易布局混乱，仅适合简单场景。
flowchart LR
Root((系统响应慢))
subgraph Code [代码]
C1[循环嵌套]
C2[N+1查询]
end
subgraph Server [服务器]
S1[CPU高]
S2[内存泄漏]
end
subgraph Network [网络]
N1[DNS解析慢]
N2[带宽不足]
end
subgraph Data [数据]
D1[索引缺失]
D2[数据量过大]
end
Root --> Code
Root --> Server
Root --> Network
Root --> Data
%% 样式调整，使其更像鱼刺
classDef root fill:#3498db,stroke:#2c3e50,stroke-width:2px,color:#fff;
class Root root;
linkStyle default stroke:#999,stroke-width:1.5px;
避坑提示：
在 Stack Overflow 上，很多用户反馈 Mermaid 的 subgraph 连接主干时，箭头位置不可控，经常指到子图中间的某个节点，而不是边缘。如果用于正式工程文档，不建议使用 Mermaid 画复杂鱼刺，它更适合画简单的思维导图或流程图。
方案三：Python matplotlib (手动布局)
适合需要极高定制化的场景，比如你要在鱼刺的每根刺上叠加数据热力图。
import matplotlib.pyplot as plt
import matplotlib.patches as patches
def draw_fishbone(ax, title=System Latency):
ax.set_xlim(0, 10)
ax.set_ylim(0, 10)
ax.axis('off')
# 绘制主干
ax.annotate('', xy=(9, 5), xytext=(1, 5),
arrowprops=dict(arrowstyle='-', color='black', lw=2))
ax.text(5, 5.2, title, fontsize=14, ha='center', weight='bold')
# 定义鱼刺数据: (x_pos, angle, label, sub_labels)
bones = [
(3, 45, Code, [Loop Nesting, N+1 Query]),
(3, -45, Server, [High CPU, Mem Leak]),
(6, 45, Network, [Slow DNS, Low BW]),
(6, -45, Data, [No Index, Big Data]),
]
for x, angle, label, subs in bones:
# 绘制大刺
rad = angle * 3.14159 / 180
dx, dy = 1.5 * __import__('math').cos(rad), 1.5 * __import__('math').sin(rad)
ax.annotate('', xy=(x+dx, 5+dy), xytext=(x, 5),
arrowprops=dict(arrowstyle='-', color='gray', lw=1.5))
ax.text(x+dx, 5+dy, label, fontsize=10, ha='center')
# 绘制小刺 (简化版，实际需更复杂的三角函数计算)
for sub in subs:
ax.text(x+dx*0.6, 5+dy*0.6, sub, fontsize=8, ha='center', color='gray')
fig, ax = plt.subplots(figsize=(10, 6))
draw_fishbone(ax)
plt.savefig('fishbone.png', dpi=150, bbox_inches='tight')
plt.show()
痛点分析：
看代码里的 dx, dy 计算，如果你要调整小刺的角度，或者让小刺也带箭头，你需要修改大量的三角函数参数。维护成本极高。除非你有专门的算法工程师团队，否则别在生产环境用这种方式画静态鱼刺图。
4. 适用场景：什么时候选谁？
结合公路工程、后端开发、数据可视化三个领域，我给出具体建议：
后端微服务架构分析：
选 Graphviz。
理由：你的系统可能有几十微服务，依赖关系复杂。你需要生成 SVG 嵌入到 Confluence 或 GitLab Pages。Graphviz 的 dot 命令可以直接集成到 CI/CD pipeline 中，每次代码合并自动更新架构图。Mermaid 在前端渲染可能因为网络延迟导致图片加载慢，而 Matplotlib 在 CI 环境中安装依赖麻烦且渲染慢。
个人技术博客 / 团队 Wiki：
选 Mermaid (仅限简单结构) 或 Graphviz 预渲染。
理由：如果你是博主，想方便读者复制代码，Mermaid 语法简单，读者可以在线预览。但如果鱼刺超过 10 个节点，强烈建议用 Graphviz 生成 SVG 文件，上传到服务器，博客中引用图片。不要信任 Mermaid 在复杂布局下的稳定性，我在 Stack Overflow 看到太多“Mermaid 布局错乱”的求助帖了。
学术论文 / 定制化报表：
选 Python matplotlib。
理由：你需要在鱼刺的节点上标注 p-value、置信区间，或者调整字体以符合期刊要求。只有 Matplotlib 能提供这种像素级的控制。你可以将鱼刺作为子图的一部分，与其他统计图表组合。
移动端 App 内嵌图表：
选 Mermaid 或 SVG 文件。
理由：Mermaid 是 JS 库，可以直接嵌入 H5 页面。或者用 Graphviz 生成 SVG，SVG 是矢量图，在移动端缩放不失真，且体积小。
5. 选型建议与避坑指南
1. 永远不要手写坐标画复杂鱼刺图
除非是教学演示，否则不要在生产代码里用 Matplotlib 硬算坐标。一旦需求变更（比如增加一根刺），你需要重新调试所有坐标，效率极低。Graphviz 的自动布局算法是经过几十年优化的，能处理绝大多数拓扑结构。
2. Graphviz 的 compound=true 是鱼刺图的灵魂
很多新手画出来的鱼刺图，箭头是乱指的。这是因为没开 compound。务必检查你的 DOT 文件中是否有 compound=true，并在边上使用 lhead 或 ltail 指向子图。
3. 字体嵌入问题
Graphviz 生成的 SVG 在某些浏览器中可能字体丢失。解决方法是在 DOT 文件中指定 fontname=Arial 或系统已安装的字体，并在生成 SVG 时添加 -Gbgcolor=white 以避免透明背景问题。如果发给 Windows 用户，建议直接导出 PNG (DPI 300) 或 PDF。
4. 文本换行处理
鱼刺图里的文字如果太长，Graphviz 不会自动换行。你需要手动在 DOT 文件中用 \n 分割文本，例如 label=Long\nText。否则文字会溢出节点边框，覆盖其他元素。
5. 版本兼容性
Graphviz 不同版本布局算法有细微差异。建议在项目中锁定 Graphviz 版本（如通过 Docker 镜像固定），确保 CI 环境和本地开发环境的输出一致。
总结与互动
鱼刺图看似简单，实则对布局引擎要求极高。
求稳、求自动、求集成：选 Graphviz。
求快、求前端友好、求简单：选 Mermaid (小心布局崩坏)。
求定制、求数据驱动、求美观：选 Matplotlib (准备好被坐标计算折磨)。
在实际工程中，我 90% 的情况都会选择 Graphviz，配合简单的 Shell 脚本或 Python 包装器，自动生成 SVG 嵌入文档。这种“代码即图表”的工作流，能极大减少沟通成本。
这个知识点你面试被问过吗？或者说，你在项目中遇到过哪种图表库让你“头大”的坑？留言说说，咱们一起拆解。 
长河君 · 2026/9/22 5:31:22 · 阅读 1.2k 鱼刺图避坑指南：5分钟速查手册，别再被官方文档绕晕
鱼刺图避坑指南：5分钟速查手册，别再被官方文档绕晕
官方文档往往长篇大论，你盯着那一堆XML标签和属性定义，脑子直接宕机。别费劲啃说明书了，直接看这份速查手册。咱们今天不聊虚的，只聊在工程图里画“鱼刺图”（Fishbone Diagram）时，怎么用最少的代码写出最清晰的逻辑。
很多刚接触绘图库的朋友，一上来就试图用 graphviz 或 plantuml 硬造，结果发现层级关系一乱，箭头就打架。其实，“鱼刺”在编程语境下，特指这种层级分明的因果分析图。下面我基于10年实战经验，横向对比三种主流方案：Graphviz (DOT语言)、Mermaid.js 和 Python matplotlib。
1. 各自定位：谁适合画工程级的鱼刺图？
在开始敲代码前，你得搞清楚这三款工具的“性格”。
Graphviz 是老牌的图布局引擎，C语言写成，性能强悍。它的核心优势在于自动布局算法。你只管定义节点和边，它负责算出最美观的位置。对于复杂的鱼刺图，尤其是当“小刺”非常多、文字很长时，Graphviz 能自动避免重叠，这是纯手写坐标方案（如 matplotlib）做不到的。但它的学习曲线陡峭，DOT语言像是一种特殊的配置协议，写起来不像写代码，更像在填表单。
Mermaid.js 是前端领域的宠儿，语法极简，类 Markdown。它的优势是集成成本低，如果你在做 Vue/React 博客或者 Wiki 系统，直接在 Markdown 里插一段 Mermaid 代码就能渲染出图。但对于复杂的鱼刺结构，Mermaid 的支持相对有限，通常需要通过 flowchart 变通实现，或者使用较新的 mindmap 扩展，原生对“鱼刺”这种特定拓扑结构的支持不如 Graphviz 直接。
Python matplotlib 是数据科学家的标配。它的优势是完全控制。你想让哪根刺粗一点，哪个字红色，哪个箭头弯曲，全由你说了算。缺点也很明显：手动布局。你得自己算 x, y 坐标。一旦节点多了，代码量爆炸，而且改一个位置，可能整张图就歪了。
2. 核心差异：一张表看懂选型关键
为了让你快速决策，我整理了对比表格。请注意，这里的“鱼刺”指的是具有主干、大刺、小刺层级的因果图结构。
维度
Graphviz (DOT)
Mermaid.js
Python matplotlib
核心定位
系统级图布局引擎，后端生成图片
前端轻量级图表库，Markdown 友好
通用 2D 绘图库，数据可视化核心
布局机制
自动布局 (SFDP/TU)
基于文本流自动排列
手动指定坐标或简易循环
代码复杂度
中等 (需理解节点/边/子图)
低 (类似伪代码)
高 (需处理坐标计算)
样式控制力
强 (通过属性精确控制)
中 (依赖主题配置)
极强 (像素级控制)
学习成本
高 (需查文档记属性)
低 (语法直观)
中 (需熟悉 Matplotlib API)
适用场景
CI/CD 集成、复杂依赖分析、工程文档
博客、Wiki、快速原型、前端交互
学术论文、定制化报表、数据驱动图表
输出格式
SVG/PNG/PDF (矢量优先)
SVG/HTML (前端渲染)
PNG/SVG/PDF (后端渲染)
依赖关系
需安装 Graphviz 系统库
无后端依赖 (JS 库)
需安装 Python 环境
关键洞察：
如果你的鱼刺图节点超过 15 个，或者文字长度参差不齐，Graphviz 是唯一的稳健选择。Mermaid 在处理长文本换行时经常报错或布局崩坏，而 Matplotlib 会把你逼疯在坐标计算上。
3. 代码写法对比：同一张图，三种实现
假设我们要画一个经典的“系统响应慢”鱼刺图：
主干：系统响应慢
大刺 (4类)：代码、服务器、网络、数据
小刺 (示例)：
代码：循环嵌套、N+1查询
服务器：CPU高、内存泄漏
网络：DNS解析慢、带宽不足
数据：索引缺失、数据量过大
方案一：Graphviz (DOT 语言)
这是最推荐用于工程文档的方案。注意 rankdir 和 compound 属性，这是画好鱼刺的关键。
digraph Fishbone {
rankdir=LR; // 从左到右，主干在左侧
compound=true; // 允许边跨越子图，形成鱼刺效果
node [shape=box, style=rounded,filled, fillcolor=lightyellow, fontname=Arial, fontsize=10];
edge [fontname=Arial, fontsize=9, color=gray];
// 主干节点
subgraph cluster_main {
label=;
style=invis;
root [label=系统响应慢, shape=ellipse, fillcolor=lightblue, fontsize=12, bold=true];
}
// 第一层大刺
subgraph cluster_code {
label=代码;
style=rounded;
fillcolor=white;
c1 [label=循环嵌套];
c2 [label=N+1查询];
}
subgraph cluster_server {
label=服务器;
style=rounded;
fillcolor=white;
s1 [label=CPU高];
s2 [label=内存泄漏];
}
subgraph cluster_network {
label=网络;
style=rounded;
fillcolor=white;
n1 [label=DNS解析慢];
n2 [label=带宽不足];
}
subgraph cluster_data {
label=数据;
style=rounded;
fillcolor=white;
d1 [label=索引缺失];
d2 [label=数据量过大];
}
// 连接主干与大刺 (使用 compound=true 的边)
{ rank=same; root; }
root - c1 [lhead=cluster_code];
root - c2 [lhead=cluster_code];
root - s1 [lhead=cluster_server];
root - s2 [lhead=cluster_server];
root - n1 [lhead=cluster_network];
root - n2 [lhead=cluster_network];
root - d1 [lhead=cluster_data];
root - d2 [lhead=cluster_data];
}
逐行讲解：
rankdir=LR：决定主干方向。鱼刺图通常主干水平，刺向上/下分布，但在 Graphviz 中，我们通常把主干放在一侧，其他节点通过 lhead 指向子图容器。
compound=true：核心技巧。允许边直接连接到 subgraph 的边框，而不是具体的节点。这是实现“刺”从主干“长出来”视觉效果的关键。
lhead=cluster_code：这条边从 root 发出，指向 cluster_code 这个子图的整体边界。Graphviz 会自动优化这条边的路径，使其看起来像一根刺。
方案二：Mermaid.js (Flowchart 变通)
Mermaid 没有原生的 fishbone 图表类型，但可以用 flowchart 模拟。注意，这种写法在处理大量文本时容易布局混乱，仅适合简单场景。
flowchart LR
Root((系统响应慢))
subgraph Code [代码]
C1[循环嵌套]
C2[N+1查询]
end
subgraph Server [服务器]
S1[CPU高]
S2[内存泄漏]
end
subgraph Network [网络]
N1[DNS解析慢]
N2[带宽不足]
end
subgraph Data [数据]
D1[索引缺失]
D2[数据量过大]
end
Root --> Code
Root --> Server
Root --> Network
Root --> Data
%% 样式调整，使其更像鱼刺
classDef root fill:#3498db,stroke:#2c3e50,stroke-width:2px,color:#fff;
class Root root;
linkStyle default stroke:#999,stroke-width:1.5px;
避坑提示：
在 Stack Overflow 上，很多用户反馈 Mermaid 的 subgraph 连接主干时，箭头位置不可控，经常指到子图中间的某个节点，而不是边缘。如果用于正式工程文档，不建议使用 Mermaid 画复杂鱼刺，它更适合画简单的思维导图或流程图。
方案三：Python matplotlib (手动布局)
适合需要极高定制化的场景，比如你要在鱼刺的每根刺上叠加数据热力图。
import matplotlib.pyplot as plt
import matplotlib.patches as patches
def draw_fishbone(ax, title=System Latency):
ax.set_xlim(0, 10)
ax.set_ylim(0, 10)
ax.axis('off')
# 绘制主干
ax.annotate('', xy=(9, 5), xytext=(1, 5),
arrowprops=dict(arrowstyle='-', color='black', lw=2))
ax.text(5, 5.2, title, fontsize=14, ha='center', weight='bold')
# 定义鱼刺数据: (x_pos, angle, label, sub_labels)
bones = [
(3, 45, Code, [Loop Nesting, N+1 Query]),
(3, -45, Server, [High CPU, Mem Leak]),
(6, 45, Network, [Slow DNS, Low BW]),
(6, -45, Data, [No Index, Big Data]),
]
for x, angle, label, subs in bones:
# 绘制大刺
rad = angle * 3.14159 / 180
dx, dy = 1.5 * __import__('math').cos(rad), 1.5 * __import__('math').sin(rad)
ax.annotate('', xy=(x+dx, 5+dy), xytext=(x, 5),
arrowprops=dict(arrowstyle='-', color='gray', lw=1.5))
ax.text(x+dx, 5+dy, label, fontsize=10, ha='center')
# 绘制小刺 (简化版，实际需更复杂的三角函数计算)
for sub in subs:
ax.text(x+dx*0.6, 5+dy*0.6, sub, fontsize=8, ha='center', color='gray')
fig, ax = plt.subplots(figsize=(10, 6))
draw_fishbone(ax)
plt.savefig('fishbone.png', dpi=150, bbox_inches='tight')
plt.show()
痛点分析：
看代码里的 dx, dy 计算，如果你要调整小刺的角度，或者让小刺也带箭头，你需要修改大量的三角函数参数。维护成本极高。除非你有专门的算法工程师团队，否则别在生产环境用这种方式画静态鱼刺图。
4. 适用场景：什么时候选谁？
结合公路工程、后端开发、数据可视化三个领域，我给出具体建议：
后端微服务架构分析：
选 Graphviz。
理由：你的系统可能有几十微服务，依赖关系复杂。你需要生成 SVG 嵌入到 Confluence 或 GitLab Pages。Graphviz 的 dot 命令可以直接集成到 CI/CD pipeline 中，每次代码合并自动更新架构图。Mermaid 在前端渲染可能因为网络延迟导致图片加载慢，而 Matplotlib 在 CI 环境中安装依赖麻烦且渲染慢。
个人技术博客 / 团队 Wiki：
选 Mermaid (仅限简单结构) 或 Graphviz 预渲染。
理由：如果你是博主，想方便读者复制代码，Mermaid 语法简单，读者可以在线预览。但如果鱼刺超过 10 个节点，强烈建议用 Graphviz 生成 SVG 文件，上传到服务器，博客中引用图片。不要信任 Mermaid 在复杂布局下的稳定性，我在 Stack Overflow 看到太多“Mermaid 布局错乱”的求助帖了。
学术论文 / 定制化报表：
选 Python matplotlib。
理由：你需要在鱼刺的节点上标注 p-value、置信区间，或者调整字体以符合期刊要求。只有 Matplotlib 能提供这种像素级的控制。你可以将鱼刺作为子图的一部分，与其他统计图表组合。
移动端 App 内嵌图表：
选 Mermaid 或 SVG 文件。
理由：Mermaid 是 JS 库，可以直接嵌入 H5 页面。或者用 Graphviz 生成 SVG，SVG 是矢量图，在移动端缩放不失真，且体积小。
5. 选型建议与避坑指南
1. 永远不要手写坐标画复杂鱼刺图
除非是教学演示，否则不要在生产代码里用 Matplotlib 硬算坐标。一旦需求变更（比如增加一根刺），你需要重新调试所有坐标，效率极低。Graphviz 的自动布局算法是经过几十年优化的，能处理绝大多数拓扑结构。
2. Graphviz 的 compound=true 是鱼刺图的灵魂
很多新手画出来的鱼刺图，箭头是乱指的。这是因为没开 compound。务必检查你的 DOT 文件中是否有 compound=true，并在边上使用 lhead 或 ltail 指向子图。
3. 字体嵌入问题
Graphviz 生成的 SVG 在某些浏览器中可能字体丢失。解决方法是在 DOT 文件中指定 fontname=Arial 或系统已安装的字体，并在生成 SVG 时添加 -Gbgcolor=white 以避免透明背景问题。如果发给 Windows 用户，建议直接导出 PNG (DPI 300) 或 PDF。
4. 文本换行处理
鱼刺图里的文字如果太长，Graphviz 不会自动换行。你需要手动在 DOT 文件中用 \n 分割文本，例如 label=Long\nText。否则文字会溢出节点边框，覆盖其他元素。
5. 版本兼容性
Graphviz 不同版本布局算法有细微差异。建议在项目中锁定 Graphviz 版本（如通过 Docker 镜像固定），确保 CI 环境和本地开发环境的输出一致。
总结与互动
鱼刺图看似简单，实则对布局引擎要求极高。
求稳、求自动、求集成：选 Graphviz。
求快、求前端友好、求简单：选 Mermaid (小心布局崩坏)。
求定制、求数据驱动、求美观：选 Matplotlib (准备好被坐标计算折磨)。
在实际工程中，我 90% 的情况都会选择 Graphviz，配合简单的 Shell 脚本或 Python 包装器，自动生成 SVG 嵌入文档。这种“代码即图表”的工作流，能极大减少沟通成本。
这个知识点你面试被问过吗？或者说，你在项目中遇到过哪种图表库让你“头大”的坑？留言说说，咱们一起拆解。