Claude Code 能画图吗：流程图、架构图、原型页怎么让它生成，artifact、Mermaid 和输出风格三种做法

本文根据 Claude Code 官方文档《Share session output as artifacts》《Output styles》《Common workflows》整理，资料核对于 2026-11-05。配图为本站整理的示意图，不是界面截图。本站（bigolab.com）不是 Anthropic 官方网站。

适用于谁

• 搜「claude code 能画图吗」「claude code 生成流程图」的人；
• 想让它把代码结构、数据流、接口调用画出来的人；
• 想要一个能点击、能分享的原型或对比页面的人。

结论先说

1. 终端本身只显示文字，所以「画图」的实际做法是让它生成文件（Mermaid 文本、SVG、HTML），或者发布成 artifact。
2. artifact 是官方功能：官方说它把 Claude Code 的工作变成 claude.ai 上的实时交互页面，可以保持私有、分享给组织或发布成公开链接；适合「用眼睛看比一行行读更方便」的输出，比如图表、对比方案、带注释的差异。
3. 官方的输出风格文档里有一个 Mermaid 例子：写一个「Diagrams first」风格，让 Claude 解释代码、架构或数据流时先画 Mermaid 图。
4. Claude 也能读图：官方常用工作流页说明可以把截图、设计稿、图表给它分析。反过来的「画图」要靠上面几种办法。
5. 生成的图一定要对照代码核对，箭头和分支是否真实存在，别直接放进文档。

图：本站根据 Claude Code 官方文档：Artifacts 整理的示意图

一、做法一：让它写 Mermaid / SVG / HTML 文件

直接在提示里说清楚要什么、保存到哪：

text
读一下 src/auth/ 下的登录流程，用 Mermaid 的 sequenceDiagram 画出
从用户提交表单到拿到 token 的请求路径，保存为 docs/login-flow.md，
节点不超过 15 个，图下面用三句话说明每一步。

text
根据 src/orders/ 的状态流转，画一张 flowchart TD 的订单状态图，
只画代码里真实存在的状态和转换，没有把握的地方标注「待确认」。

要点：

• 让它读代码再画，并要求「只画代码里存在的」，避免它凭印象补步骤；
• 指定图的类型：官方示例里用的是 flowchart TD（控制流）和 sequenceDiagram（请求路径），并建议保持在 15 个节点以内；
• 格式选择：Mermaid 是文本源码，需要支持它的环境才会显示成图（这点不在 Claude Code 官方文档里，请按你用的文档工具确认）；想要不依赖渲染器的图，可以让它写 SVG 或 HTML。官方 artifact 页的省 token 建议也是：画图优先用 SVG，或 HTML 加 CSS，而不是嵌入位图。

Claude 在对话里生成图片、PNG 图表的能力属于 Claude 应用，不属于 Claude Code，区别见 /guides/claude-image-generation。

二、做法二：发布成 artifact

官方举的用法包括：给评审者带注释地走一遍 PR、用已拿到的数据渲染仪表盘、并排比较几种设计或实现方案、在长任务里维护调查时间线。提示词示例（官方原文大意）：

text
做一个 artifact，带注释地讲解这个 PR，把差异渲染出来，按严重程度给发现的问题上色。

画流程图时可以这样说：

text
做一个 artifact：用 SVG 画出支付回调的处理流程，每个节点可以点击展开说明，
说明文字取自 src/payments/ 里的注释和代码。

官方限制，务必先看：

• 套餐：Pro、Max、Ultra、Team、Enterprise；
• 登录：会话必须用 /login 登录 claude.ai 账号；用 API 密钥、网关令牌或云厂商凭据的会话不能发布；
• 平台：Anthropic API；Amazon Bedrock、Google Vertex、Microsoft Foundry 上不可用，平台差异见 /guides/claude-code-other-models-bedrock-vertex-foundry；
• 只能是一个静态页面：无后端，相对链接不能用，页面渲染后要不超过 16 MiB；
• 页面受严格的内容安全策略限制：外部图片被全部拦截，脚本只能从官方列出的几个公共 CDN 加载；
• 文件格式必须是 .html、.htm 或 .md，且为 UTF-8；
• 默认私有，只有你自己能看，分享要手动设置。

发布后 Claude 会打印链接并打开浏览器，按 Ctrl+] 可以重新打开本会话最近的 artifact。不想自动打开浏览器，设 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0。想关掉这个功能，可以在 /config 里关闭 Artifacts，或在设置里写 "enableArtifact": false。官方也提醒：一个带样式的页面比同样内容的终端文字更费 token。

网页版 Claude 里的 Artifacts 是另一套入口，见 /guides/claude-artifacts。

三、做法三：写一个「先画图」的输出风格

官方输出风格页给的例子就是：

markdown
---
name: Diagrams first
description: Lead every explanation with a diagram
keep-coding-instructions: true
---

When explaining code, architecture, or data flow, start with a Mermaid diagram showing the structure, then explain in prose.

## Diagram conventions

Use `flowchart TD` for control flow and `sequenceDiagram` for request paths. Keep diagrams under 15 nodes.

把它存为 ~/.claude/output-styles/ 或项目的 .claude/output-styles/ 下的 Markdown 文件，用 /output-style Diagrams first（或在 /config 里选）切换。注意官方的两点：终端里是启动时读取风格文件，所以新建或修改后要重启；输出风格只是一份指令，不能保证每次都执行，需要保证每次发生的事应该用钩子。输出风格的完整介绍见 /guides/claude-code-output-styles-writing-assistant。

四、提示词里要交代什么

图：本站自己整理的清单，节点上限取自官方输出风格示例

五、核对生成的图

• 对照代码检查每个箭头；让它列出每条边对应的文件和函数，便于你抽查；
• 漏掉的分支（错误、超时、重试）最常见，可以追问「还有哪些没画出来的分支」；
• 命名要和代码一致，否则图和代码会越来越对不上；
• 把图放进文档后，在仓库里同步维护，可以把「改流程时同时更新 docs/ 下的图」写进 CLAUDE.md，见 /guides/claude-md-agents-md。

使用较多、想要更高的额度和稳定的订阅，可以了解 /chongzhi/claude-pro 或 /chongzhi/claude-code。

常见问题

Q：为什么提示「Artifacts need a claude.ai login」？

这是官方文档里列出的报错之一，意思是会话没有用 claude.ai 账号登录，官方的错误说明页有登录方法。

Q：图能直接在终端里显示吗？

官方文档没有说明终端内渲染 Mermaid。Claude Code 的终端输出是文字；要看图，请打开生成的文件或 artifact 页面。

Q：能还原设计稿 / 画原型吗？

可以让它在 artifact 里做并排方案或页面原型，官方用法列表里就有「并排展示几种设计或实现方案」。用设计工具连接设计稿属于另一类用法，不在本文范围。

相关教程

• /guides/claude-image-generation：Claude 能生成图片吗
• /guides/claude-artifacts：网页版 Artifacts
• /guides/claude-code-slash-commands：斜杠命令速查

参考资料

• Claude Code 官方文档：Share session output as artifacts — https://code.claude.com/docs/en/artifacts
• Claude Code 官方文档：Output styles — https://code.claude.com/docs/en/output-styles
• Claude Code 官方文档：Common workflows — https://code.claude.com/docs/en/common-workflows