一、前言
做技术方案评审、写 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 提高准确度
- 架构图建议 纳入版本控制，与代码同步更新
- 按场景和团队习惯 选对工具
四、工程师的秘密武器：Mermaid
4.1 为什么需要 Mermaid？
- 维护难：PNG/JPG 难版本管理、难修改
- 自动化：可嵌入 Markdown、GitHub、GitLab、Notion、Typora
- 协作友好：Diagram as Code，支持 Code Review
4.2 什么是 Mermaid？
- 基于 JavaScript 的开源图表库
- 用 类 Markdown 文本语法 定义图表
- 自动渲染为 SVG / PNG
- 官方文档：Mermaid 中文网
核心特性：
- Diagram as Code：可 Git 管理、可 Review
- 多图表类型：流程图、时序图、类图、架构图、甘特图、ER 图等
- 平台广泛支持：GitHub、GitLab、Notion、Typora
- AI 友好：适合用大模型生成 Mermaid 代码
4.3 基础语法示例
流程图（Flowchart）
时序图（Sequence Diagram）
Tip：在 Typora 等编辑器中，代码块需指定语言为 mermaid 才能正确渲染
五、Mermaid 在线实战
5.1 推荐在线编辑器
5.2 实战：微服务三层架构
要求：网关层、服务层、数据层，并清晰展示组件关系。
5.3 实战：ER 图（电商订单）
5.4 实战：甘特图（项目计划）
六、Mermaid 在项目中的最佳实践
| 场景 | 用法 |
|---|---|
| README | GitHub/GitLab 项目首页放架构图 |
| 技术文档 | 设计文档中嵌入 Mermaid 代码块 |
| Wiki | 团队知识库统一维护 |
| 代码注释 | 复杂逻辑用 Mermaid 可视化 |
关键点：
- 语法简单，上手快
- 可配合 ChatGPT 等 AI 快速生成代码
- 纳入 Git，支持协作与 Review
- 架构变更只改代码，图自动更新
七、总结：AI + Mermaid 工作流
需求描述（自然语言）
↓
AI 生成 Mermaid 代码
↓
在线编辑器预览 / 微调
↓
提交到 Git（README / 文档 / Wiki）
↓
架构变更 → 改代码 → 图自动更新
建议路径：
- 简单场景：直接用 AI 生成 Mermaid 代码
- 复杂场景：AI 出初稿 + 人工审核微调
- 长期维护：Diagram as Code + 版本控制
八、参考资源
- Mermaid 官方文档：Mermaid 中文网
- Mermaid Live Editor：Online FlowChart & Diagrams Editor - Mermaid Live Editor
- 国内镜像：Mermaid 在线编辑器