一、前言做技术方案评审、写 README、画系统架构图是很多工程师的日常。Visio、Draw.io、ProcessOn 用久了常见问题是一张复杂架构图要 2–4 小时改一个组件要动一堆线和标签不同人风格不一图和代码经常对不上AI Mermaid 提供了一条新路径用自然语言或代码描述架构自动生成、版本管理、持续更新。二、传统 IT 架构图的三类痛点2.1 绘制效率低手工拖拽组件、连线、排版耗时长架构变更后要逐处修改版本对比困难历史版本易丢失2.2 绘制质量不稳定缺乏统一规范风格因人而异易漏组件、连错关系、标注不规范新人上手成本高2.3 维护成本高代码改了图往往没同步更新多人协作同一文件易冲突文档维护负担重三、解决方案AI 架构图绘制3.1 什么是 AI 架构图绘制利用 大语言模型LLM通过 自然语言描述 自动生成 IT 架构图的技术方案。示例 Prompt画一个微服务架构图包含 API 网关、用户服务、订单服务和 MySQL 数据库。AI 会理解需求提取组件与关系生成专业架构图。3.2 四大核心优势优势说明效率提升 10 倍从数小时缩短到分钟级质量标准化风格统一符合规范自动同步更新结合代码分析识别架构变化零学习成本自然语言描述即可无需精通绘图工具3.3 四大核心能力自然语言理解NLU解析需求提取组件与关系智能布局设计自动排版与连线多格式支持Draw.io、Mermaid、PlantUML 等架构模式识别微服务、分层、事件驱动等3.4 适用场景新项目快速出初版架构图做评审存量系统结合代码分析自动生成技术评审快速产出多方案对比团队协作统一标准降低沟通成本3.5 工具类型与注意事项工具类型AI 增强绘图工具如 next-ai-draw-io代码生成图表Mermaid、PlantUML 等注意事项AI 生成结果需 人工审核业务细节可能遗漏持续优化 Prompt 提高准确度架构图建议 纳入版本控制与代码同步更新按场景和团队习惯 选对工具四、工程师的秘密武器Mermaid4.1 为什么需要 Mermaid维护难PNG/JPG 难版本管理、难修改自动化可嵌入 Markdown、GitHub、GitLab、Notion、Typora协作友好Diagram as Code支持 Code Review4.2 什么是 Mermaid基于 JavaScript 的开源图表库用 类 Markdown 文本语法 定义图表自动渲染为 SVG / PNG官方文档Mermaid 中文网核心特性Diagram as Code可 Git 管理、可 Review多图表类型流程图、时序图、类图、架构图、甘特图、ER 图等平台广泛支持GitHub、GitLab、Notion、TyporaAI 友好适合用大模型生成 Mermaid 代码4.3 基础语法示例流程图Flowchart时序图Sequence DiagramTip在 Typora 等编辑器中代码块需指定语言为mermaid才能正确渲染五、Mermaid 在线实战5.1 推荐在线编辑器国内Mermaid 在线编辑器国际Online FlowChart Diagrams Editor - Mermaid Live Editor5.2 实战微服务三层架构要求网关层、服务层、数据层并清晰展示组件关系。5.3 实战ER 图电商订单5.4 实战甘特图项目计划六、Mermaid 在项目中的最佳实践场景用法READMEGitHub/GitLab 项目首页放架构图技术文档设计文档中嵌入 Mermaid 代码块Wiki团队知识库统一维护代码注释复杂逻辑用 Mermaid 可视化关键点语法简单上手快可配合 ChatGPT 等 AI 快速生成代码纳入 Git支持协作与 Review架构变更只改代码图自动更新七、总结AI Mermaid 工作流需求描述自然语言↓AI 生成 Mermaid 代码↓在线编辑器预览 / 微调↓提交到 GitREADME / 文档 / Wiki↓架构变更 → 改代码 → 图自动更新建议路径简单场景直接用 AI 生成 Mermaid 代码复杂场景AI 出初稿 人工审核微调长期维护Diagram as Code 版本控制八、参考资源Mermaid 官方文档Mermaid 中文网Mermaid Live EditorOnline FlowChart Diagrams Editor - Mermaid Live Editor国内镜像Mermaid 在线编辑器