Mermaid.js 接入 Confluence3 步搭起一套用文本维护的图表知识库【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid团队知识库里那张流程图是半年前画的没人记得是谁画的流程一改图就跟不上想改一个小格子还得打开图形工具把整张图画一遍——这可能是每个维护 Confluence 的人都碰到过的麻烦。Mermaid.js 让你用文本写图把一段纯文本放进 Confluence就能自动渲染出流程图或时序图。下面说说怎么快速用起来以及怎么长期维护。为什么值得把 Mermaid.js 放进知识库比起用图形工具直接画把 Mermaid.js 接进 Confluence 主要省了四件事改文字即改图流程变了改一行字就行不用打开绘图软件挪格子、调箭头版本白送页面历史就是图的版本历史新版出了问题一键回退到旧版协作不打架文本可以多人合并修改版本之间的差异一目了然渲染效果一致同一段文字在任何机器上都是同一套样式告别你那边清晰我这边糊适用于 Confluence Cloud以及 Server / Data Center 7.10 及以上版本。图表选型知识库里最常用的 3 类Mermaid.js 支持 20 多种图表你只需要先会这三种。流程图—— 业务流程、审批链路、决策树最百搭。flowchart TD A[提交订单] -- B{支付成功?} B --|是| C[发货] B --|否| D[提示支付]时序图—— 系统交互、接口调用链谁调了谁、谁回了什么一眼看清。sequenceDiagram 用户 - 网关: 下单 网关 - 支付服务: 扣款 支付服务 -- 用户: 返回结果甘特图—— 项目排期、迭代计划直接挂在项目页面上就能跟踪。gantt title 九月迭代 section 开发 功能A :a1, 2025-09-01, 7d 功能B :after a1, 5d每类图表的完整语法可以在文档里查例如 docs/syntax/sequenceDiagram.md。3 步完成 Confluence 集成装插件用管理员账号登录 Confluence打开应用管理在应用市场搜 Mermaid挑一个口碑好的插件点安装、等部署完成。渲第一张图建一个测试页面插入 Mermaid 宏粘贴上面的流程图画法确认页面上出现了图。调资源地址内网里渲染慢或加载失败时把插件全局配置中的 JS 资源地址换成你们能访问的 CDN注意锁死版本号避免上游升级把线上弄挂。三步做完 从此加一张图写一段文字。维护与避坑5 条实用建议图表上了线真正的考验是维护 几条被用过的团队验证过的做法语法里留版本注释把版本号和变更原因写在图的第一行如%% v2.1 增加退款分支以后翻页面历史改了什么一目了然集中管理建一个图表库页面当图的统一入口别的文档用包含页面宏引用它改一处、处处更新统一命名建议[业务域]-[类型]-[用途]的格式比如订单-流程图-审批检索和定期审计都省事大图拆开单页塞多个复杂图表时渲染明显变慢拆成几张关联子图用链接跳转渲染挂了按顺序排查先验证语法再看浏览器控制台有没有 JS 报错资源加载失败最常见还不行就临时关掉其他渲染类插件排除冲突更多配置项说明可参考 docs/config/usage.md。常见问题速查Q能控制谁来编辑图表吗A可以。在空间权限里建一个图表编辑者组只把编辑权给到这个组敏感页面普通成员只读。Q旧图形工具画了几十张图怎么迁移A不用一次性全迁。先转改得勤、看得多的那几张剩下的可以借助 Confluence REST API 批量替换页面内容加快进度。Q文档里的图和别人本地渲染的不一样A多半是版本差异。把插件资源地址锁死在固定版本各环境保持一致即可。从最常改的那几张图开始转就好。等你体会到改一个字、图就变之后剩下的事会自然而然跟上。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考