用内联 SVG 画干净、零依赖的流程图

写技术方案文档、产品说明、汇报 PPT 时，经常要画流程图。很多人惯用截图、外链渲染或引第三方图表库，但都有各自的麻烦：图片不能改、外链怕失效、引库增加依赖。

这里分享一个做法：直接用内联 SVG 把流程图写进 HTML 文档。它零依赖、可维护、能被脚本自动校验。这篇文章讲清楚三个问题：为什么值得用、怎么才能画得干净、以及如何自动化检查别画歪。

一、为什么用内联 SVG

三个字：零依赖。SVG 是 HTML 标准元素，直接把 <svg> 写进页面，不引任何 JS、不加载网络资源、不需要第三方库。

• 即开即看：单文件 HTML，浏览器双击就能打开，离线可用。
• 清晰锐利：矢量图，放大不糊，打印投屏都无损。
• 可维护：每个节点的坐标都是明文，改布局就是改几个数字。
• 可校验：能被脚本自动检查连线是否正交、箭头是否对准——这是图片做不到的。

给个简单的通用示例（注册登录流程），它就是一段可以直接粘进 HTML 的 SVG：

二、怎么才能画得干净

手画 SVG 最容易踩三个坑：连线歪成斜线、折线突然翘起来、箭头没对准目标框。根因都是没有规则地随意摆坐标。遵循下面几条规则就能避免。

规则 1：连线必须正交

每根连线只能是水平或垂直段，禁止对角线。只有指向菱形判断节点的短斜线可以豁免（菱形本身是斜的）。

规则 2：主链中心对齐（最重要）

一条逻辑链上的方框，垂直中心 x 要对齐到同一个值。对齐之后，方块到方块、方块到菱形就是一根笔直的竖线。

关键心法是：要线直，靠的是微调方块的位置去对齐，而不是加折线去绕。很多人一看到错位就去加"竖-横-竖"折线，结果越绕越乱。其实把上面那个方块往右挪几像素，线自然就直了。

规则 3：单折弯优先

只有分支（比如从菱形两侧分流）才允许拐弯，而且每个分支最多拐一个弯（水平引出、再垂直进框，像字母 L）。禁止 S 形多折。

规则 4：箭头对准目标

指向方框的箭头，终点要落在方框顶部正中心；指向菱形的箭头，终点落在菱形上顶点。差几个像素都算没画好。

规则 5：菱形是"夹心饼干"

菱形上下都连着节点，一动就破坏上下对齐。所以别单挪菱形，要挪就挪它上面的方块，让方块中心正好落在菱形顶点的正上方。

规则 6：方块别重叠

并列的分支方框之间留足够间距（经验值 ≥20px），绝不重叠，方框要够大、能容纳文本不贴边。

规则 7：尽量别加图例

如果已经用颜色区分了角色（比如深蓝是主链、绿色是成功分支），就别再加图例了——图例里的小图形最容易画歪，纯属自找麻烦。

三、自动化检查，别靠肉眼

靠肉眼在 500×500 的坐标里去对箭头偏没偏，既累又容易漏。建议写个校验脚本，自动检查三条硬性指标：

• 斜线数 = 0：不允许对角线
• 箭头对准误差 ≤ 2px：方框中心 / 菱形上顶点
• 方块重叠 = 0：并列框间距 ≥ 20px

解析 SVG 里的 <rect>、<polygon>、<line>，把每个方框的坐标、每条线的方向都读出来，再逐条比对，一眼就能打印出"哪根线歪了、哪个箭头偏了、哪两个框叠了"。这个校验工具在开发过程中真的抓到过不少这样肉眼难发现的细节问题。

四、什么时候别用 SVG

SVG 不是万能的。如果只是简单逻辑、要放进 Markdown 或 GitHub README、将来还要频繁改，Mermaid 更合适——语法简单、可编辑、生态标准。

换句话说：要精确控制布局的自包含单 HTML 文档，用内联 SVG；要方便维护的 Markdown 文档，用 Mermaid。两者各司其职。

---

这套方法我已经沉淀成了一个小项目 svg-flowchart（MIT 协议），开源在 GitHub：github.com/tanzhangjia/svg-flowchart-skill。里面有三套起步模板（纯垂直主链、判断菱形+分支、完整正交流程），外加那个自动校验脚本，开箱即用。

一句话总结：流程图要画得干净，核心不是技巧，而是"对齐"两个字——方块对齐了，线自然就直了，剩下的交给校验脚本兜底。