这次我们看一个很实际的话题Claude Code 在写文档、做方案、梳理代码架构时到底能生成哪些图表类型怎么让它稳定输出可渲染的图表。很多人用 Claude Code 只让它写代码、改 bug、跑测试其实它更适合做一件容易被忽略的事情把代码库的结构、接口调用关系、业务流程和项目排期直接变成图表。你不需要单独开绘图工具也不需要手画架构图只需要在终端里用自然语言提出要求它会直接返回 Mermaid 或其他格式的图表文本你复制进 Markdown 文档就能渲染。这篇文章会覆盖下面几块内容Claude Code 的图表能力边界、支持的主要图表类型、从源码生成架构图的完整流程、图表文档的批量工程化方法以及安装和配置时的常见坑。如果你最近在看 Claude Code 的安装、本地模型接入、VS Code 配置或者订阅权限问题文章后半部分的排查清单也能直接参考。先给一个结论Claude Code 生成图表的核心能力不在某个专门的绘图功能上而是在于它能把“代码阅读 需求理解 图表语法生成”这三件事一次做完。真正限制产出质量的往往不是你用的是什么客户端而是你给的上下文够不够清楚、提示词有没有指定图表类型和目标读者。1. Claude Code 图表能力速览能力项说明项目类型终端 AI 编程智能体官方命令行工具核心交互终端对话、文件读写、命令执行、代码库检索图表输出格式Mermaid、PlantUML、ASCII 草图等文本格式主要图表类型流程图、时序图、类图、状态图、ER 图、甘特图、饼图、Git 图、思维导图、时间线、架构图渲染方式复制到 GitHub、VS Code、Typora、mermaid-cli 等工具渲染是否支持批量任务支持可结合脚本和命令模板批量生成图表是否支持 APIClaude Code 本身面向终端交互批量能力通过命令行脚本和自定义命令实现典型应用架构文档、技术方案、接口文档、数据库设计、项目排期、代码评审材料硬件门槛云端模型场景下本机只跑 Node 进程接入本地模型时取决于模型自身要求注意一点如果你用的是 Claude 官方云端模型图表生成基本不依赖本机显卡资源占用对普通开发机很友好。如果你通过代理层接入本地模型比如网上常讨论的 DeepSeek、Qwen 系列那么显存和内存要求要以你选择的模型为准不能一概而论。2. Claude Code 是什么终端里的智能体助手Claude Code 是 Anthropic 推出的命令行 AI 编程工具它不是普通补全插件而是能理解任务、读取文件、执行命令、自动修改代码的智能体。你可以在项目目录里启动它让它自己搜索代码、定位问题、给出修改方案甚至直接执行命令跑测试。图表能力就建立在这个基础上。你可以让它扫描当前项目的目录结构和代码文件生成模块依赖图阅读数据库 Schema 或 ORM 模型生成 ER 图梳理登录、支付、订单等业务流程生成时序图根据 TODO 和 Issue 信息生成项目排期甘特图。这种做法的好处是图表不是凭空画的它基于真实代码和真实上下文。相比你手动画一张架构图Claude Code 至少能保证模块名称、目录层级、接口调用关系是跟着代码走的不容易出现“图是图、代码是代码”的脱节。安装方面Claude Code 支持 macOS、Linux 和 Windows 10 以上系统。官方推荐的方式是 npm 全局安装也可以用安装脚本具体命令以官方文档为准。# npm 全局安装方式 npm install -g anthropic-ai/claude-code# 官方安装脚本方式Windows 用户可使用 Git Bash 或 WSL 执行 curl -fsSL https://claude.ai/install.sh | bash安装完成后在项目根目录运行claude就能进入交互界面。第一次启动可能会要求登录账号或配置令牌这一步根据你使用的订阅方式和网络环境来定。如果提示“your organization has disabled claude subscription access for claude code”说明当前组织策略不允许使用 Claude 订阅访问该工具需要找管理员确认开通权限而不是绕过限制。3. Claude Code 支持的主要图表类型从实际使用角度看Claude Code 生成图表最常用的载体是 Mermaid。Mermaid 是一种基于文本的图表描述语言把图表写成代码再由渲染器生成图片或 SVG。GitHub 原生支持 MermaidVS Code、Typora、Obsidian 也都有对应的渲染插件。下面按类型拆开讲。3.1 流程图 Flowchart流程图是最常用的图表类型。Claude Code 在分析业务流程、梳理代码执行路径、解释命令行工具工作流程时第一选择就是 flowchart。典型请求示例请阅读 src/auth/ 目录下的代码为登录流程生成一个 Mermaid 流程图包含接收用户名密码、验证、生成 Token、失败重试。用中文标注节点。输出结果通常长这样flowchart TD A[开始] -- B[输入用户名密码] B -- C{验证用户} C -- 失败 -- D[返回错误信息] D -- B C -- 成功 -- E[生成 Token] E -- F[返回登录结果] F -- G[结束]从代码里生成流程图的关键是让 Claude Code 先读文件再画图。不要一上来就说“画一张系统架构图”要先给它指定目录、文件或搜索范围否则它只能靠泛泛理解产出质量不稳定。3.2 时序图 Sequence Diagram时序图适合描述系统间或模块间的调用顺序比如前端调后端、服务 A 调服务 B、订单服务调支付服务。典型请求示例查看 api/order.js 和 services/payment.js画出提交订单的完整时序图包含前端请求、订单服务、支付服务、数据库操作。输出结果sequenceDiagram participant F as 前端 participant O as 订单服务 participant P as 支付服务 participant DB as 数据库 F-O: 提交订单 O-DB: 查询商品库存 DB--O: 返回库存结果 O-P: 创建支付单 P--O: 返回支付参数 O--F: 返回下单结果时序图对代码逻辑的准确性要求高。建议在提示词里写清楚“按代码中的实际函数调用顺序”否则模型可能会补出代码里不存在的中间步骤。生成后拿真实代码对照一下这个步骤不能省。3.3 类图 Class Diagram类图适合描述面向对象设计。如果你有一个 Java、Python、TypeScript 项目类很多关联关系复杂可以让 Claude Code 读取源码生成类图。典型请求示例扫描 src/models/ 下的全部类文件生成 Mermaid classDiagram标注继承关系、聚合关系和主要方法。输出结果classDiagram class User { String id String name login() logout() } class Admin { manageUsers() } User |-- Admin类图生成时最容易出现的问题是“方法名不全”或“关系类型判断错误”。模型可能只看了部分文件就动手画为减少这种情况你可以先让 Claude Code 列出目录文件再指定读取范围。3.4 状态图 State Diagram状态图适合描述状态机。比如工单状态、订单状态、审批流程每个状态之间怎么流转在哪些条件下触发变更。典型请求示例根据 models/order.js 中的状态字段画出订单状态机包含待支付、已支付、已发货、已完成、已取消标注状态流转条件。输出结果stateDiagram-v2 [*] -- 待支付 待支付 -- 已支付: 支付成功 待支付 -- 已取消: 用户取消 已支付 -- 已发货: 商家发货 已发货 -- 已完成: 确认收货 已完成 -- [*]状态图比流程图简单但特别依赖枚举值和业务规则。生成后重点确认“有没有遗漏异常分支”比如超时关闭、退款导致的状态回退。3.5 ER 图 ER DiagramER 图用于数据库设计。Claude Code 可以读取 SQL 文件、ORM 模型或数据库迁移文件生成实体关系图。典型请求示例读取 prisma/schema.prisma生成 Mermaid erDiagram标注每个表的主键、外键和字段类型。输出结果erDiagram USER ||--o{ ORDER : places ORDER ||--|{ ORDER_ITEM : contains USER { string id PK string name } ORDER { string id PK string user_id FK float total } ORDER_ITEM { string id PK string order_id FK string product_id FK int quantity }ER 图生成相对可靠因为数据模型结构清晰字段名和关系都是明文的。只需要提醒一点如果项目里没有实体定义文件只有数据库表可以先让 Claude Code 读取数据库导出文件或迁移脚本别让它凭空猜表结构。3.6 甘特图 Gantt甘特图适合做项目排期。Claude Code 没有项目管理后台但它可以根据你的文字描述、TODO 列表或 Issue 列表生成可渲染的甘特图。典型请求示例根据 docs/roadmap.md 中的里程碑和任务生成 Mermaid gantt 图按周排期。输出结果gantt title 项目排期 dateFormat YYYY-MM-DD section 准备阶段 需求调研 :done, a1, 2025-06-01, 7d 技术选型 :done, a2, after a1, 3d section 开发阶段 模块开发 :active, b1, 2025-06-11, 14d 联调测试 :b2, after b1, 7d甘特图在精准排期场景下容易出错因为模型无法真正帮你估算工期。更稳妥的做法是先确定任务列表和依赖关系让 Claude Code 生成结构然后你手动修正日期和工期。3.7 饼图和 Git 图饼图适合做简单的比例展示比如代码语言占比、模块耗时占比、分类统计。pie title 项目语言占比 JavaScript : 45 TypeScript : 30 Python : 15 其他 : 10Git 图适合展示分支合并流程比如 release 分支和 feature 分支的合入关系。gitGraph commit branch feature checkout feature commit commit checkout main merge feature这两种图技术含量不高但在周报和项目复盘里很好用。Claude Code 可以从 git log 数据里推导出分支结构适合快速生成。3.8 思维导图、时间线和象限图Mermaid 还支持 mindmap、timeline 和 quadrantChart这些类型适合做规划类图表。mindmap root((项目)) 前端 页面 组件 后端 API 数据库 运维 部署 监控timeline title 项目里程碑 2025-06-01 : 项目启动 2025-06-15 : 原型评审 2025-07-01 : 开发完成 2025-07-10 : 上线这类图表对代码要求不高主要考验模型对文字信息的归纳能力。用途集中在方案汇报、产品规划、个人知识整理上。3.9 架构图 C4 与系统上下文图代码架构图是 Claude Code 最受欢迎的场景之一。它可以生成分层架构图、模块依赖图也可以尝试 C4 风格的上下文图。flowchart LR subgraph 前端 Web[Web 应用] Mobile[移动端] end subgraph 后端 API[网关服务] Order[订单服务] UserService[用户服务] end subgraph 数据层 MySQL[(主数据库)] Redis[(缓存)] end Web -- API Mobile -- API API -- Order API -- UserService Order -- MySQL Order -- Redis UserService -- MySQLC4 模型通常包含 Context、Container、Component、Code 四层。让 Claude Code 生成完整的 C4 比较吃力它更擅长生成接近“容器图”或“组件图”的架构图。对于大型项目建议你先把架构说明写清楚再交给 Claude Code 画图而不是完全依赖它自己从代码里推理。3.10 ASCII 草图终端场景下有时候不需要渲染成图片直接在对话里画一个 ASCII 图更直观。Claude Code 也能做这件事。需求系统 A 接收请求转发到系统 BB 调用外部接口结果回写数据库。 输出一个终端可显示的 ASCII 时序图。系统A --- 系统B --- 外部接口 | | |----- 转发结果 -----| | v 数据库ASCII 草图适合快速沟通不算正式交付物但能加速理解。如果你想直接放进技术文档Mermaid 仍然是更合适的选择。4. 在 Claude Code 中生成图表的实操流程抛开具体图表类型Claude Code 生成图表的完整流程可以归纳成五个步骤。4.1 进入项目目录并启动首先进入项目根目录启动 Claude Code。cd /path/to/your/project claude启动后你会进入交互式终端。建议先测试一句“读取当前目录结构”确认工具能正常访问文件再继续生成图表。如果这一步都失败说明权限、路径或模型连接有问题先排查再往下走。4.2 明确图表类型和目标提示词里最好包含四要素输入源哪个目录、哪些文件、哪个文件。图表类型flowchart、sequenceDiagram、classDiagram、gantt 等。语言要求节点用中文还是英文。输出形式直接输出 Mermaid 代码还是写入指定 Markdown 文件。示例提示词请扫描 src/modules/ 目录生成 Mermaid flowchart画出模块间的调用依赖节点标签用中文。输出到 docs/diagrams.md。4.3 检查输出语法生成 Mermaid 代码后不要直接认为没问题。Mermaid 语法版本变化较快旧版支持的状态图写法可能在新渲染器里失效。把代码粘贴到 GitHub、Typora 或 VS Code 里先渲染一次再决定是否使用。# 安装 mermaid-cli 后可用命令行验证 Mermaid 语法 npx -y mermaid-js/mermaid-cli -i input.mmd -o output.svg4.4 保存到文档建议把图表放在 docs 或 diags 目录下而不是散落在笔记里。统一命名为diagrams.md、architecture.md、flow.md方便维护。# 将生成结果追加写入或新建文档 claude 生成模块依赖图保存为 docs/architecture.md4.5 在 VS Code 中调试如果你日常用 VS Code可以在编辑器中直接打开 Markdown 预览安装支持 Mermaid 的插件后保存文件即可实时渲染。这样你可以一边和 Claude Code 对话一边检查图表效果不用来回切窗口。5. 从源码生成架构图的完整示例下面用一个“读取代码生成图表”的完整思路来做演示。假设你有这样一个项目my-service/ ├── src/ │ ├── api/ │ │ └── order.js │ ├── services/ │ │ └── payment.js │ └── models/ │ └── user.js ├── prisma/ │ └── schema.prisma └── docs/进入项目后分三步让 Claude Code 生成三张图。第一步生成时序图读取 src/api/order.js 和 src/services/payment.js画出“用户下单到支付”时序图按真实函数调用顺序使用 Mermaid sequenceDiagram。节点用中文。第二步生成类图扫描 src/models/生成 classDiagram标注所有类的字段和方法。第三步生成 ER 图读取 prisma/schema.prisma生成 erDiagram标注主外键关系。这套方法的要点是每张图都绑定明确代码源。相比“帮我画一下系统架构图”这种开放式问题指定文件路径后的产出会稳定得多。如果 Claude Code 生成的代码里出现不存在的函数名用下面的追问纠正你刚才标注的 checkStock 函数在代码里不存在。请重新按 payment.js 中的实际函数生成。这样反复修正两三轮后得到的图表才真正可用于文档。6. 图表批量生成与文档工程化Claude Code 的优势是可以用自定义命令把常用图表生成流程固定下来形成工程化能力。在项目根目录创建.claude/commands/目录添加一个命令文件例如生成架构图# 文件.claude/commands/diagrams.md 读取当前项目目录结构分析主要模块生成 Mermaid 架构图保存为 docs/diagrams.md。重点标注领域。节点用中文。之后在 Claude Code 中直接使用/diagrams这样就不用重复输入长提示词。配合脚本扫描你甚至可以对多个子项目批量生成图表。批量生成的思路写一个脚本遍历子项目目录。对每个项目执行 Claude Code 命令。统一输出到各自 docs 目录。最后用 mermaid-cli 遍历所有 Mermaid 文件验证语法并导出 SVG。# 批量验证与导出 Mermaid 文件 for file in docs/*.mmd; do npx -y mermaid-js/mermaid-cli -i $file -o ${file%.mmd}.svg done这里提醒一下批量任务要加输出日志。如果中间某个项目生成失败保留日志才能定位是提示词问题、路径问题还是模型返回格式问题。不要把几十个任务一次性丢进去先小范围跑通再扩展。7. 接入第三方模型与本地模型的注意事项Claude Code 的图表能力依赖底层模型。从网络热词可以看到很多人关心“Claude Code 接入 DeepSeek”“Claude Code 使用本地模型”“Qwen 27B 是否可用于 Claude Code”这类问题。这里给几条通用判断依据不算具体配置教程但比直接复制一段命令更能帮你排查问题。如果你通过代理层或环境变量接入第三方模型出现类似deepseek-v4-pro is not a model this version of claude code recognizes的报错原因通常是两种模型名与当前版本不匹配或者模型名称需要加上特定前缀/别名。你需要按你的代理层文档确认正确模型标识而不是随意改代码。如果你的场景是本地模型需要注意三点图表生成是一种结构化输出任务模型必须能稳定生成 Mermaid 语法。小参数模型在简单流程图上可能表现不错但处理大型项目时的准确率会下降。本地模型对显存和内存要求不等7B、14B、27B 模型差异很大。实际占用需要按你选择的模型和推理框架测试。不要把本地模型接入复杂到影响开发效率。Claude Code 的价值是快速扫描代码库这一步骤对上下文长度要求高模型上下文太短会直接导致“图不完整”。我的建议是如果只是想体验图表功能直接用官方或经过验证的云端模型如果数据敏感必须本地部署先拿一个小项目跑通流程再逐步扩大到完整代码库。8. 常见问题与排查方法问题现象可能原因排查方式解决方案启动后无法交互未登录、订阅权限异常、地区限制查看启动日志确认账号订阅状态按官方支持范围确认账号权限组织禁用时联系管理员提示 organization has disabled claude subscription access企业策略禁止使用 Claude 订阅访问检查组织后台配置联系管理员开通或改用允许的认证方式提示 version recognizes 错误模型名称不正确或版本过旧升级 Claude Code核对模型标识按官方文档填写正确的模型名或别名生成的 Mermaid 无法渲染语法版本不兼容、节点文本特殊字符本地跑 mermaid-cli 验证调整语法版本对特殊字符转义流程图和代码不一致上下文不足模型只看了部分文件指定更精确的文件路径分模块生成逐张图验证生成图表太慢项目文件多、上下文过长缩小扫描范围先让 Claude Code 列出目录再定向读取批量任务卡住某个项目生成失败或模型返回格式异常查看日志单项目重试加超时和失败重试本地模型接入后输出乱码模型能力不足或上下文截断降低项目范围检查输入输出编码换更强模型或减小任务粒度遇到问题时先看日志再动手改配置。Claude Code 的多数问题发生在“权限”“模型名”“上下文范围”三者之间逐项排查即可。9. 最佳实践与合规提醒图表生成看似简单要真正用到正式文档里还是有一套工程纪律。第一提示词里永远带文件和目录范围。不用“整个项目都看一下”这种模糊指令改成“读取 src/api/ 下所有文件”。这样生成速度快结果也准。第二图表和代码绑定。流程图里面的每个步骤、时序图里面的每个调用都要能在代码里找到对应。如果找不到宁可删掉让模型重画也不要留下“看起来合理但实际不存在”的图。第三统一渲染验证。把 Mermaid 代码放进 Git 仓库在 CI 里跑一遍语法验证避免有人改了代码后文档图还是旧逻辑。第四涉及代码和数据安全。Claude Code 会把上下文发送给你配置的模型服务。如果是企业代码、用户数据或未公开项目务必确认你使用的模型服务符合公司数据安全要求。本地模型适合敏感场景但需要额外投入硬件配置和适配成本。第五涉及第三方素材、图表模板、参考文档时注意授权边界。生成图表本身不构成版权问题但复制别人的架构图、UI 稿或付费模板用于商业方案要确认有没有授权。10. 总结与下一步Claude Code 最值得尝试的点不是让它帮你画一张单张图而是把“读代码、理解逻辑、输出图表文档”这个链路变成可重复的工作流。第一步先挑一个小项目让它生成一张时序图或架构图跟真实代码对照一下准确率第二步再把常用提示词固化成自定义命令第三步考虑把图表生成纳入文档维护流程。最容易踩的坑是以为模型能一次性生成完全准确的架构图。实际上它可能需要多轮修正而且你需要给它明确的文件和目录边界。先把范围缩小再逐步扩大成功率高很多。后续可以继续扩展的方向包括把图表能力和代码扫描结合生成模块变更影响分析把甘特图和 Issue 数据打通自动更新项目排期或者用本地模型跑一套离线图表生成方案。从一张图开始逐步搭起一套文档自更新能力这个价值比单个图表本身大得多。