AI图表生成实战：从Mermaid到专业可视化
你会学到什么
用AI画图不是"让AI猜我想要什么图"，而是用精确的提示词让AI输出可渲染的图表代码。本节讲清楚：前端项目开发中哪些时刻需要画图、如何用Claude Code快速生成Mermaid代码、如何迭代优化图表、以及图表和代码如何保持同步。
图表在前端项目中的4个关键时刻
前端开发不是只有写代码。在项目的不同阶段，图表承担着不同的沟通职责：
| 阶段 | 图表类型 | 沟通对象 | 目的 |
|---|---|---|---|
| 需求分析 | 业务流程图、用户故事地图 | 产品经理、设计师 | 对齐"用户怎么用这个功能" |
| 技术设计 | 架构图、模块依赖图 | 开发团队 | 对齐"代码怎么组织" |
| 开发排期 | 甘特图、燃尽图 | 项目管理、团队 | 对齐"谁先做、谁后做" |
| 文档交付 | API时序图、组件状态图 | 使用者、接手人 | 对齐"接口怎么调用" |
这四类图不是一次性的。需求变更要更新流程图，架构重构要更新架构图，API变更要更新时序图。传统的画图工具（Visio、draw.io）最大的问题是改图成本高——改一个节点要重新排版。Mermaid的优势是文本驱动，改一个字重新渲染就行。
Mermaid现状（2026-11-07 核实）：npm最新版本12.3.0，GitHub star超9.1万，是文本图表的事实标准。v12.0起ELK成为捆绑的默认布局引擎，自动布局质量明显提升；v11.13.0（2026年4月）新增维恩图（venn-beta）和石川图/鱼骨图（ishikawa-beta）两种类型。加上11.x陆续加入的架构图（architecture）、看板图（kanban）、雷达图（radar）、桑基图（sankey）、块图（block）、数据包图（packet）、XY图表（xychart）、思维导图（mindmap）、时间线（timeline）、象限图（quadrant），工程常用图表基本全覆盖——流程图、时序图、类图、状态图、ER图、甘特图这些经典类型更不在话下。图表类型参考官方文档的示例库，或直接把画过的图喂给AI"按这个语法输出"。
下面三个实战分别对应技术设计、开发排期、文档交付三个场景。
实战1：用Claude Code生成组件库架构图
先看一个完整的提示词示例，然后拆解为什么这样写。
请用Mermaid语法画一个Vue3组件库的架构图，要求：
1. 分层结构（从上到下）：
- 应用层：使用组件库的Vue项目
- 组件层：Button/Input/Select/Modal/Message等组件
- 基础层：CSS变量/TypeScript类型/工具函数
2. 依赖关系（用箭头表示）：
- Form组件依赖 Input/Select/Checkbox
- Modal组件依赖 Button（关闭按钮）
- 所有组件都依赖 CSS变量
- 所有组件都依赖 TypeScript类型
3. 分组和样式：
- 用subgraph把每层框起来
- 应用层用蓝色，组件层用绿色，基础层用橙色
- 箭头要明确指向方向
用 graph TD 布局。
text
这个提示词的有效性来自三个要素：
明确的数据结构：不是"画一个组件库"，而是列出"三层的名称、每层包含什么、依赖关系是什么"。AI有了具体数据才能生成准确的图。
明确的语法要求：指定"用 graph TD布局"、"用subgraph分组"。不是让AI猜用什么语法，而是告诉AI用什么。
明确的视觉要求：指定颜色、箭头方向。AI不会知道你想要什么风格，要说出来。
AI生成的代码可能是这样的：
预览与导出：从代码到图片
注意AI输出的不是图片，而是一长串Mermaid代码。把它变成可视图表有三种常用途径：
- Typora（macOS/Windows）：Markdown编辑器内置Mermaid渲染，保存即见
- VS Code：安装"Markdown Preview Mermaid Support"扩展，
Cmd/Ctrl+Shift+V打开预览，右侧即渲染 - mermaid.live：官方在线编辑器，粘贴代码即渲染，可直接导出PNG/SVG
渲染出来的图截图或导出后插入Word文档；要把整份含Mermaid的Markdown转Word，可以走Pandoc（需额外配置Mermaid渲染支持，属于进阶用法，这里不展开）。
配色建议：保持黑白。上面的提示词示例演示了颜色指定，是为了说明"视觉要求要明确"这个要素；实际交付中不建议在提示词里堆颜色要求，原因有二：公司内部文档多数黑白打印，彩色图表打出来全是灰阶；更实际的是，颜色和复杂箭头要求会明显增加AI生成语法错误的概率。用最简单最基础的Mermaid语法生成，出现箭头重叠、节点顺序不对时，通过多轮对话"指出问题+说明要什么"修正即可。
迭代优化：从能渲染到好看出差几轮
第一次生成的图往往能渲染但不够清晰。优化是通过"具体描述问题+提出修改要求"实现的：
这个架构图有问题：
1. 应用层和组件层的箭头太多了，看起来乱
2. 基础层的依赖关系没有体现（CSS变量被多个组件依赖）
3. 想把Form相关的组件放在一起
请修改：
1. 应用层只画到Form和Modal两个代表组件（不是每个组件都连）
2. CSS变量用一个箭头指向整个组件层，不是每个组件单独连
3. Form/Input/Select/Checkbox用虚线框圈在一起，标注"表单组件组"
text
AI会理解你描述的问题并针对性修改。注意这里用的是"指出问题+说明要什么"的结构，不是笼统地说"改好看点"。
从架构图到目录结构
架构图不仅是给别人看的，也可以直接变成代码结构。让AI根据架构图生成目录：
基于上面的架构图，生成一个monorepo的目录结构。
要求：
1. packages/下分三个目录：components/（组件层）、base/（基础层）、app-example/（应用层示例）
2. components/下每个组件一个目录（button/input/select/modal/form/message）
3. 每个组件目录下包含：src/、index.ts、__tests__/
4. base/下包含：theme/（CSS变量）、types/、utils/
5. 用tree格式输出
text
输出类似：
packages/
├── components/
│ ├── button/
│ │ ├── src/
│ │ │ └── Button.vue
│ │ ├── index.ts
│ │ └── __tests__/
│ ├── input/
│ ├── select/
│ ├── form/
│ ├── modal/
│ └── message/
├── base/
│ ├── theme/
│ │ └── variables.css
│ ├── types/
│ │ └── index.ts
│ └── utils/
│ └── index.ts
└── app-example/
└── src/
└── main.ts
text
这样架构图和代码结构就对应起来了。以后重构时，先改架构图，再让AI根据图更新目录结构，避免遗漏。
实战2：用Claude Code生成开发排期甘特图
甘特图是项目管理最常用的图表，但手画很麻烦——要计算日期、画进度条、调整任务顺序。
甘特图有两种生成路径：Mermaid适合简单排期、能快速迭代；draw.io适合复杂排期、需要手动调整和导出。先讲Mermaid，再讲draw.io。
方案A：Mermaid甘特图（简单排期，快速迭代）
Mermaid的gantt语法有四个关键要素：
| 要素 | 语法 | 说明 |
|---|---|---|
| 日期格式 | dateFormat YYYY-MM-DD | 定义日期解析格式 |
| 任务状态 | active / done / crit / milestone | 控制颜色和样式，不是自己编的p0/p1 |
| 依赖关系 | after a1 | 任务A完成后才开始任务B |
| 任务持续时间 | 3d | 天数（也支持 1w、2h） |
先给AI一个完整的任务清单：
请用Mermaid gantt语法为Vue3组件库制定开发排期。
任务清单：
- Button组件，预计2天
- Input组件，预计3天
- Tag组件，预计1天
- Select组件，依赖Input，预计3天
- Checkbox组件，预计2天
- Form组件，依赖Input/Select/Checkbox，预计4天
- Modal组件，依赖Button，预计3天
- Message组件，预计2天
约束：
1. 起始日期 2026-06-01
2. 用crit标记P0组件（Button/Input/Select/Form/Modal）
3. 用section按"基础控件""表单组件""反馈组件"分组
4. 用after语法表达依赖关系
5. 所有任务排除周末
text
AI生成的甘特图代码：
Mermaid甘特图的局限性：
- 不支持中文周末标注（
excludes weekends只排除英文周六周日） - 不支持并行分支标注（无法在一个甘特图里区分"前端"和"后端"并行轨道）
- 样式控制有限（只有4种状态颜色，不能自定义P0红色、P1绿色）
- 导出图片需要额外工具（mermaid.live 或 VS Code 插件）
如果你的排期比较复杂（多人并行、多条线路、需要导出PDF给领导），建议用方案B。
方案B：draw.io甘特图（复杂排期，专业输出）
draw.io（diagrams.net）是一个开源免费的在线绘图工具，支持甘特图、流程图、架构图等几乎所有图表类型。它有两个优势：VS Code集成和Mermaid导入。
安装VS Code扩展
在VS Code中搜索安装 Draw.io Integration（作者 HW Solutions）。安装后可以直接在编辑器中打开 .drawio 文件编辑，不用切换到浏览器。
让AI生成draw.io格式的甘特图
draw.io使用XML格式存储图表，Claude Code可以直接生成：
请为Vue3组件库生成一个draw.io格式的甘特图，要求：
任务清单：
- 第1周：Button(2天)、Input(3天)、Tag(1天)
- 第2周：Select(3天，依赖Input)、Checkbox(2天)、Modal(3天，依赖Button)
- 第3周：Form(4天，依赖Select/Checkbox)
- 第4周：Message(2天)
要求：
1. 用表格布局模拟甘特图：左侧任务名，右侧时间条
2. P0任务用红色时间条，P1任务用绿色时间条
3. 用箭头标注依赖关系
4. 输出为.drawio的XML格式
text
AI会生成一个完整的 .drawio 文件，你用VS Code直接打开就能编辑。
draw.io vs Mermaid甘特图对比
| 维度 | Mermaid gantt | draw.io |
|---|---|---|
| 上手难度 | 写代码，需学语法 | 拖拽式，所见即所得 |
| AI生成 | 直接生成文本代码 | 生成XML文件 |
| 样式控制 | 4种预设状态 | 完全自定义颜色、字体、形状 |
| 中文支持 | 基本可用，周末标注有问题 | 完美支持 |
| 依赖箭头 | after 语法，自动连线 | 手动添加，位置精确 |
| 导出格式 | 需工具转PNG/SVG | 直接导出PNG/SVG/PDF/Visio |
| VS Code集成 | Mermaid Preview插件 | Draw.io Integration插件 |
| 版本控制 | 纯文本，Git diff清晰 | XML文本，Git diff可读 |
选择建议：简单排期（10个任务以内）用Mermaid，快速迭代；复杂排期（多人并行、需要导出PDF）用draw.io，专业输出。
调整排期的正确姿势
不管用哪种工具，排期调整的提示词逻辑是一样的——指出具体问题+说明要什么：
这个排期有问题：
1. Button只用2天，但Modal要等Button做完才能开始，浪费时间
2. Input完成后，Select、Checkbox都要等，可以更早开始
请调整：
1. Button完成后立即开始Modal（不要等所有基础控件完成）
2. Input完成后立即开始Select和Checkbox（并行开发）
3. 在第3周结束时检查是否能完成Form组件
4. 标注出哪些任务可以并行
text
Mermaid方案改参数重新生成就行。draw.io方案则需要AI重新生成XML，或者在VS Code里手动拖拽调整。
从甘特图到任务分配
甘特图生成后，可以进一步让AI拆分任务：
基于上面的甘特图，把第一周的任务拆成具体的subtask：
- 每个组件的subtask包含：Props定义/样式编写/单元测试
- 估算每个subtask的时间（以小时为单位）
- 输出成markdown表格，包含"任务/子任务/预计时间/负责人"四列
text
这样甘特图就变成了可执行的任务清单。
实战2.5：draw.io不只是甘特图——AI生成各类图表
draw.io能画的远不止甘特图。它是免费开源的在线绘图工具（diagrams.net），同时提供本地桌面客户端，内置大量案例模板。它的核心优势是AI生成XML，VS Code直接打开编辑，导出PDF给领导——这个工作流比Mermaid更适合正式交付场景。
选型判断：简单排期、流程图、时序图、类图、状态图这类常见图表，Mermaid直接输出；需要完全自定义样式、多人协作编辑同一图表、要在图里导入并编辑图片、或架构图多层嵌套需要精确布局时，用draw.io。draw.io的典型适配场景是架构图、泳道流程图、状态图、甘特图。
一个现实预期：模型确实能输出draw.io的XML（方框、连线都会给你加上），但生成效果千奇百怪——布局、间距、对齐要到交付质量，需要大量手动或AI多轮调整。所以本章不演示AI生成draw.io的过程，提示词模板已给出，动手实践时请做好多轮迭代的心理准备。效率最高的组合是：简单图Mermaid（改字重渲染），复杂图draw.io手动精修。
顺带一提，还有一类工具让模型直接把图表"画"成图片。看似省事，但中文乱码率高，需要反复修正提示词，不适合作为工程图表的生成方式——用draw.io或Mermaid已经足够。
draw.io的四种典型用法
| 图表类型 | Mermaid够不够 | 什么时候用draw.io | 导出格式 |
|---|---|---|---|
| 架构图 | 简单的够用 | 多层嵌套、需要精确布局 | PNG/SVG/PDF |
| 甘特图 | 10个任务以内够用 | 多人并行、自定义颜色 | PNG/PDF |
| 流程图 | 基本够用 | 泳道图、跨部门协作 | PNG/SVG/PDF |
| 状态图 | 够用 | 需要导出Visio格式 | Visio/PNG |
实战：用Claude Code生成draw.io架构图
和Mermaid不同，draw.io使用XML格式。你不需要学XML语法——直接告诉AI你要什么：
请为Vue3组件库生成一个draw.io架构图文件（.drawio格式）。
分层结构：
1. 应用层（蓝色背景）：用户Vue项目
2. 组件层（绿色背景）：Button、Input、Select、Form、Modal、Message
3. 基础层（橙色背景）：CSS变量、TypeScript类型、工具函数
依赖关系：
- Form → Input, Select
- Modal → Button
- 所有组件 → CSS变量
- 所有组件 → TypeScript类型
布局要求：
- 从上到下排列，层间距30px
- 每个节点是圆角矩形，宽120px，高40px
- 依赖箭头用灰色实线
- 输出完整的draw.io XML
text
Claude Code会生成完整的XML内容，保存为 .drawio 文件后在VS Code中直接打开。你可以拖拽调整节点位置、双击修改文字、右键更改颜色——这些在Mermaid里做不到。
实战：用Claude Code生成draw.io泳道流程图
泳道图（Swim Lane Diagram）是产品经理最常用的图表之一，它能清楚展示"哪个角色做什么事"。Mermaid不支持泳道图，这是draw.io的强项。
请生成一个draw.io格式的泳道流程图，描述"用户提交表单"的完整流程。
三个泳道（从左到右）：
1. 用户（蓝色）
2. 前端组件库（绿色）
3. 后端API（橙色）
流程步骤：
1. [用户] 填写表单字段
2. [前端] Input组件触发onChange，传递value给Form
3. [前端] Form组件执行校验规则
4. 判断：校验是否通过？
- 否：[前端] 显示错误提示 → 回到步骤1
- 是：继续
5. [前端] 调用 POST /api/form/submit
6. [后端] 验证数据格式
7. 判断：数据是否合法？
- 否：[后端] 返回400错误 → [前端] 显示错误提示
- 是：继续
8. [后端] 写入数据库，返回200
9. [前端] Message组件显示"提交成功"
10. [用户] 看到成功提示
要求：
- 每个泳道用不同颜色的矩形背景
- 判断节点用菱形
- 箭头标注流转方向
- 输出完整draw.io XML
text
这种图产品经理拿去需求评审，比纯文字描述直观10倍。而且AI生成的XML可以在draw.io里二次编辑，调整布局和样式。
draw.io的实用技巧
技巧1：Mermaid导入draw.io
如果你已经用Mermaid画了一个图，想在draw.io里继续编辑：
- 打开 draw.io（网页版或VS Code）
- 菜单：Arrange → Insert → Advanced → Mermaid
- 粘贴Mermaid代码，点击Insert
- 自动转换为draw.io可编辑的图形
这样你可以先用Mermaid快速迭代，满意后再导入draw.io做最终排版。
技巧2：从draw.io导出多种格式
draw.io支持导出格式比Mermaid多得多：
| 导出格式 | 用途 |
|---|---|
| PNG | 插入Word文档、PPT |
| SVG | 插入网页，无损缩放 |
| 打印、正式交付 | |
| Visio（VSDX） | 给用Visio的同事 |
| HTML | 嵌入网页，可交互 |
技巧3：draw.io文件纳入版本控制
.drawio 文件本质是XML文本，可以直接用Git管理。团队协作时，每个人修改图的某个部分，Git可以merge XML变更（虽然不如纯文本方便，但比二进制PPTX文件强得多）。
推荐在项目中这样组织：
docs/
├── diagrams/
│ ├── architecture.drawio # 架构图
│ ├── gantt.drawio # 开发排期
│ ├── user-flow.drawio # 用户流程图
│ └── form-submit-swimlane.drawio # 泳道图
text
实战2.8：产品经理最常用的三种流程图
产品经理在需求分析阶段要画的图，和开发者不一样。开发者关注架构和接口，产品经理关注用户行为和业务流程。这三种图是产品经理的"标配"：
1. 用户操作流程图（User Flow）
描述用户在产品中的操作路径。不是技术实现，而是用户视角的"点击什么→看到什么→下一步做什么"。
用Mermaid快速生成：
请用Mermaid画一个"用户注册"的操作流程图：
1. 用户打开注册页面
2. 输入邮箱地址
3. 判断：邮箱格式是否正确？
- 否：显示"邮箱格式错误"，回到输入
- 是：继续
4. 输入密码（8-20位）
5. 判断：密码强度是否足够？
- 否：显示"密码太弱，建议包含字母和数字"，回到输入
- 是：继续
6. 点击"注册"按钮
7. 后端发送验证邮件
8. 显示"验证邮件已发送"页面
9. 用户打开邮箱，点击验证链接
10. 判断：链接是否在24小时内？
- 否：显示"链接已过期"，提供重新发送按钮
- 是：继续
11. 注册成功，跳转到首页
用 graph TD 布局，判断节点用菱形（{判断内容}）。
text
生成的Mermaid代码：
这种图的价值在于：它能帮你发现交互设计中的遗漏。比如上面的流程，如果用户关掉了"验证邮件已发送"页面怎么办？需要在步骤8加一个"关闭页面前提示'验证邮件待查收'"的处理分支。
2. 业务状态流转图（State Diagram）
描述一个业务对象在不同状态之间的流转。比如订单的状态变化、组件的显示/隐藏状态。
请用Mermaid画一个"订单"的状态流转图：
状态：
- 待支付 → 已支付 → 待发货 → 已发货 → 已完成
- 任何状态（除已完成） → 已取消
- 已发货 → 退款中 → 已退款
触发条件标注在箭头上：
- 待支付 → 已支付：用户完成支付
- 已支付 → 待发货：商家确认
- 待发货 → 已发货：商家发货
- 已发货 → 已完成：用户确认收货
- * → 已取消：用户/商家取消
- 已发货 → 退款中：用户申请退款
- 退款中 → 已退款：商家同意退款
用 stateDiagram-v2 语法。
text
生成的状态图：
状态图和前面的流程图有什么区别？流程图画的是"用户怎么操作"，状态图画的是"数据怎么变化"。两者配合使用——流程图回答"用户做什么"，状态图回答"系统变成什么状态"。
3. 页面跳转图（Navigation Flow）
描述产品中页面之间的跳转关系。前端开发者特别需要这种图——它直接对应路由配置。
请用Mermaid画一个SaaS产品的页面跳转图：
页面：
- 登录页 /login
- 注册页 /register
- 首页 /home
- 个人设置 /settings
- 组件列表 /components
- 组件详情 /components/:id
跳转关系：
- 登录页 → 首页（登录成功）
- 登录页 → 注册页（点击"注册"）
- 注册页 → 登录页（注册完成）
- 首页 → 组件列表（点击菜单）
- 首页 → 个人设置（点击头像）
- 组件列表 → 组件详情（点击某个组件）
- 组件详情 → 组件列表（返回）
- 个人设置 → 登录页（退出登录）
用 graph LR 布局（从左到右），每个节点标注路由路径。
text
生成的跳转图：
这种图可以直接变成路由配置。让AI根据跳转图生成Vue Router代码：
基于上面的页面跳转图，生成Vue Router的配置代码：
- 使用 createRouter + createWebHistory
- 路由守卫：未登录访问首页时跳转到登录页
- 懒加载所有页面组件
- 输出完整的 TypeScript 代码
text
这样图表就不是"画完就扔"的摆设，而是能直接落地的开发蓝图。
三种图的配合使用
| 图类型 | 回答什么问题 | 谁来看 | 对应代码 |
|---|---|---|---|
| 用户操作流程图 | 用户怎么操作？ | 产品经理、设计师 | 交互逻辑、表单校验 |
| 状态流转图 | 数据怎么变化？ | 开发者、测试 | 状态管理（Pinia/Composable） |
| 页面跳转图 | 页面怎么组织？ | 前端开发者 | Vue Router配置 |
三个图画完，前端的交互逻辑、状态管理、路由配置就都有了明确的依据。不用写完代码再回过头补文档——先画图，再让AI根据图生成代码。
实战3：生成API交互时序图
时序图在文档交付阶段最有用——它能清楚展示"谁先调用谁、返回什么、什么时候结束"。对于前端开发者来说，时序图主要用于两类场景：前后端交互、组件间通信。
前后端交互的时序图
请用Mermaid画一个用户登录的时序图，包含以下流程：
1. 用户在登录页输入账号密码，点击登录按钮
2. 前端校验输入格式（邮箱格式、密码长度）
3. 前端调用POST /api/auth/login，传递{email, password}
4. 后端验证密码，返回{token, userId, expiresIn}
5. 前端存储token到localStorage
6. 前端跳转到首页
7. 首页调用GET /api/user/profile，传递token
8. 后端验证token，返回用户信息
9. 前端渲染用户信息
参与者：User（用户）、LoginPage（登录页面）、API（后端接口）、HomePage（首页）
用 sequenceDiagram 语法。
text
生成的时序图：
组件间通信的时序图
组件库开发中，也需要用来说明"组件A怎么触发组件B的行为"。比如Form组件如何监听Input的变化：
请画一个Form组件和Input组件的通信时序图：
1. 用户在Input组件中输入文字
2. Input组件触发input事件，传递value
3. Form组件监听到input事件，更新内部状态
4. Form组件执行校验规则（required/minLength）
5. 如果校验失败，Form组件把错误信息传回Input
6. Input组件显示错误提示
参与者：User（用户）、Input（输入框组件）、Form（表单组件）
text
生成的时序图：
从时序图到TypeScript接口定义
时序图的价值不仅在于展示，还能直接变成代码。让AI根据时序图生成接口定义：
基于上面的登录时序图，生成TypeScript接口定义：
1. 登录请求接口：POST /api/auth/login
2. 登录响应接口：{token, userId, expiresIn}
3. 获取用户信息接口：GET /api/user/profile
4. 用户信息响应接口：{name, email, avatar}
要求：
- 用interface定义
- 包含完整的类型注解
- token用string类型，expiresIn用number类型（秒数）
text
AI会生成：
// 登录请求
interface LoginRequest {
email: string
password: string
}
// 登录响应
interface LoginResponse {
token: string
userId: string
expiresIn: number // 秒数
}
// 获取用户信息响应
interface UserProfileResponse {
name: string
email: string
avatar: string
}
// API函数签名
interface AuthAPI {
login(data: LoginRequest): Promise<LoginResponse>
getProfile(token: string): Promise<UserProfileResponse>
}
typescript
这样时序图和类型定义就对应起来了。以后后端API变更时，先更新时序图，再让AI更新类型定义，确保文档和代码一致。
进阶：图表与代码的双向同步
实际项目中最大的问题是：图改了但代码没改，或者代码重构了但图没更新。这里有三个实用技巧。
技巧1：把图表写入CLAUDE.md作为持久上下文
在第3章学过CLAUDE.md可以持久化项目上下文。把架构图写入CLAUDE.md后，AI在后续对话中会自动遵守这个架构：
# CLAUDE.md
## 项目架构
```mermaid
graph TD
subgraph 应用层
App[用户Vue项目]
end
subgraph 组件层
Button[Button]
Input[Input]
Form[Form]
end
subgraph 基础层
CSSVar[CSS变量]
Types[TypeScript类型]
end
App --> Button
Button --> CSSVar
```
## 架构约定
- 组件层不直接调用其他组件的内部方法
- 所有组件通过CSS变量获取样式，不写硬编码颜色
- 类型定义统一在base/types/目录
markdown
以后问AI"新增一个Tooltip组件应该放在哪"，AI会读取架构图并回答"放在components/tooltip/，依赖CSS变量但不依赖其他组件"。
技巧2：代码重构后反向更新架构图
重构完成后，让AI根据新的代码结构更新架构图：
我重构了项目结构，现在packages/下是：
- packages/ui/src/components/ （所有组件）
- packages/theme/src/ （CSS变量）
- packages/types/src/ （类型定义）
- packages/utils/src/ （工具函数）
请更新CLAUDE.md中的架构图，反映新的目录结构。
text
AI会读取新的目录结构并更新Mermaid代码。这样架构图始终和代码保持同步。
技巧3：用diff模式检查图和代码的差异
定期让AI检查"图上有的但代码没有的"或者"代码有但图上没有的"：
请检查架构图和实际代码的差异：
1. 架构图中有Message组件，但代码中没有找到
2. 代码中有Switch组件，但架构图中没有标注
请列出所有差异，并建议如何更新架构图。
text
这个检查可以放到项目的CI流程中，每次commit时自动运行，确保文档和代码不脱节。更自动化的做法是用第3章的Hooks：PostToolUse钩子检测到src/代码文件变更时，自动触发"更新docs/diagrams/下对应的Mermaid图表"任务——代码变了图跟着变，双向同步不靠自觉。反方向（图变了改代码）则交给AI：把修改后的时序图或流程图发给它，"按照这个时序图修改对应模块的代码"。
国内AI绘图工具深度对比
Mermaid需要写代码，不是所有人都想学。国内已有多个AI绘图工具支持"说一句话生成流程图"，适合不同场景：
| 工具 | 核心能力 | 价格 | 适合场景 | 局限 |
|---|---|---|---|---|
| ProcessOn | 输入一句话生成流程图/时序图/类图/甘特图，支持AI风格美化、语法修复、OCR识别。在线使用，多人协作，导出PNG/PDF/Visio | 免费版10个文件够用，会员约99元/年 | 日常画图、流程图、思维导图、UML | 复杂图表需要手动调整 |
| 亿图图示 (EdrawMax) | DeepSeek驱动，260种图表类型，上万模板。桌面端+在线版，可替代Visio | 免费版基础功能够用，专业版约299元/年 | 架构图、网络拓扑、组织架构、电路图、专业场景 | 界面复杂，上手需要时间 |
| boardmix | AI协作白板，多人实时拖拽，100+专业模板。支持Mermaid代码导入、AI生成PPT | 免费版基础功能够用，团队版约199元/年 | 团队脑暴、泳道图、架构图、评审白板 | 免费版有协作人数限制 |
| draw.io (diagrams.net) | 开源免费，支持Mermaid导入，VS Code集成插件 | 完全免费 | 个人本地画图、VS Code集成 | 中文模板少，AI功能弱 |
使用建议
- 个人开发者：ProcessOn免费版足够日常使用，支持Mermaid导入导出
- 团队协作：boardmix支持多人实时编辑，适合远程团队的架构评审
- 专业场景：亿图图示有260种图表类型，适合网络拓扑、电路图等非软件开发场景
- 本地开发：draw.io VS Code插件，可以直接在编辑器中画图，不用切换网页
和Mermaid的配合使用
这些工具不是替代Mermaid，而是互补。典型工作流是：
1. 用Claude Code生成Mermaid代码（快速迭代）
2. 把代码复制到ProcessOn/draw.io二次编辑（调整布局、添加备注）
3. 导出PNG/SVG插入文档
4. 需要修改时，更新Mermaid代码重新导入
text
这样既有AI生成的速度，又有专业工具的编辑能力。
local-search配合图表生成
在第5章02节学过local-search可以搜索最新技术资料。画图时配合搜索有三个用途：
用途1：搜索行业最佳实践
不确定架构图怎么画时，让local-search搜索社区标准：
/local-search 搜索"微前端架构图的标准画法"，找出3个典型案例
text
local-search会从技术博客、GitHub文档、设计规范中搜索，给出推荐的架构模式。你可以基于这些标准画图，而不是凭空想象。
用途2：搜索竞品的架构设计
做组件库时，想知道Element Plus、Naive UI的组件依赖关系：
/local-search 搜索"Element Plus组件依赖关系"、"Naive UI架构图"
text
local-search会找到这些项目的官方文档、GitHub分析文章、社区讨论。你可以参考成熟项目的架构，避免设计错误。
用途3：验证技术选型的合理性
选型时用搜索验证社区讨论：
/local-search 搜索"Vite vs Rollup库模式对比 2026"
text
local-search会汇总最新评测、性能对比、迁移指南。你基于这些信息做决策，而不是看几年前的过时文章。
开发者常见错误
| 错误 | 正确做法 |
|---|---|
| 一开始就追求完美的架构图 | 先画一个能用的，迭代优化 |
| 图和代码不同步，图成了摆设 | 把图写入CLAUDE.md，重构时反向更新 |
| 用笼统的提示词让AI"画一个好看的图" | 提供具体数据结构、明确语法要求、说明视觉风格 |
| 只画图不复用，每次都重新生成 | 把提示词存成模板，下次改参数复用 |
| 只用一种图表类型，强行表达所有场景 | 流程图用graph、交互用sequence、排期用gantt、状态流转用stateDiagram |
| 图表太复杂，一页塞不下 | 拆分成多个图，每页聚焦一个核心关系 |
| 不考虑中文排版，导出后文字重叠 | Mermaid代码中用 换行，或者导出后用ProcessOn调整 |
本节要点
- 图表在前端开发中有4个关键时刻：需求分析（业务流程图）、技术设计（架构图）、开发排期（甘特图）、文档交付（时序图）
- Mermaid已到12.x（2026-11-07 npm 12.3.0）：v12起ELK为默认布局引擎，11.x后新增架构图/看板/雷达图/桑基图/维恩图/鱼骨图等类型，工程图表基本全覆盖
- AI画图的核心是提供具体数据结构、明确语法要求、说明视觉风格，不是笼统地说"画一个好看的图"；日常交付建议黑白配色，颜色要求会增加语法出错率
- AI输出的是Mermaid代码不是图片：Typora、VS Code的Markdown Preview Mermaid Support扩展、mermaid.live三种途径预览导出
- 图表生成后要迭代优化：指出具体问题（"箭头太乱"）+ 说明要什么（"用虚线框圈起来"）
- 图表可以反向生成代码：架构图→目录结构、时序图→TypeScript接口、甘特图→任务清单、页面跳转图→Vue Router配置
- 把图表写入CLAUDE.md作为持久上下文，AI后续对话会自动遵守架构约定；用PostToolUse Hook检测代码变更自动更新图表，双向同步不靠自觉
- 代码重构后反向更新架构图，定期用diff模式检查图和代码的差异
- draw.io是Mermaid的补充：支持AI生成XML、VS Code编辑、导出PDF/Visio、泳道图等Mermaid不支持的图表类型；但AI生成的draw.io效果千奇百怪，要按多轮迭代预期投入
- 产品经理三种"标配"图：用户操作流程图（用户怎么操作）、状态流转图（数据怎么变化）、页面跳转图（页面怎么组织），三者画完前端的交互、状态、路由都有了
- 国内AI绘图工具推荐：个人用ProcessOn（免费够用），团队用boardmix（多人协作），本地开发用draw.io（VS Code集成，完全免费）
- local-search配合图表生成：搜索行业最佳实践、竞品架构、技术选型验证
↑