产品文档里要放业务流程、技术文档里要放架构图、后台系统里要放节点连线，这类画图需求几乎每个项目都会碰到。如果每张图都靠设计软件画好再上传，改一次就得重新导一遍，图和数据对不上是常事。换成用代码画图，图形跟着文档一起存，改起来就是改几行文本，版本管理也方便，这次整理了 3 款开源免费、可商用的网页图表绘制库，覆盖从文档配图到可视化编辑的不同场景。
三款库分别管什么
Mermaid 是用类似 Markdown 的纯文本描述图形，再渲染成流程图、时序图、甘特图、类图、状态图、饼图等十几种图表，改文字就改图，很多代码托管平台都内置支持这套语法，写在说明文档里特别省事。Drawflow 做的是可视化节点编辑器，节点可以自由拖动、连线、缩放画布，编辑结果能导出成 JSON 数据，适合低代码平台、审批流配置、AI 工作流编排这类要让用户自己连线的界面。LeaderLine 专画页面上两个元素之间的连线，支持直线、折线、弧线、箭头和标注文字，元素滚动缩放时会自动跟着走，可以画多段折线绕开页面上的其他元素，做新手引导和关系标注很省事。
为什么值得用代码画图
最直接的好处是图和内容不会脱节。设计稿一旦定稿就成了静态图片，流程改了没人记得去更新，过一阵图就成了摆设。代码化的图是文本，跟文档放在一起，改动走同一套流程，谁改的、什么时候改的一目了然，团队成员换了几拨，图也跟着文档一起留了下来。另外做配置类界面时，Drawflow 这类库让用户自己拖节点连线，比让人填一大堆表单直观得多，产品体验也更好。
包内容和用法
压缩包里按库名分成了三个目录，每个目录都放了压缩版和说明文档，用 script 标签直接引入即可，不需要构建工具，也不依赖任何框架。三款定位不同，通常按场景选一个：要在文档里写图用 Mermaid，要做拖拽编辑界面用 Drawflow，要连页面元素用 LeaderLine。需要留意的是 Mermaid 的浏览器构建文件体积偏大，建议按需引入或者放到 CDN 上，别打进主包影响首屏。三个目录都附带了许可文件和基础用法说明。
画图这件事看似辅助，其实直接影响文档的可读性和产品的可维护性。用代码把图管起来，长期看省下的返工时间远超过上手成本。三款库加起来一兆多，其中大头是 Mermaid，其余两款都很轻。全部是 MIT 协议，可以免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。
暂无评论内容