企业官网建设流程全解析

1. 为什么 AI 画的图总像草稿：diagram-design 要解决的真实痛点

如果你用 Claude Code 写过技术方案，大概率遇到过这种尴尬：让 AI 画一张微服务调用流程图，它给你吐出一段 Mermaid 代码，渲染出来箭头歪斜、节点挤成一团、配色像上世纪的 PPT。更麻烦的是，这种图你根本不敢直接贴进正式文档——客户看到会怀疑你的专业度。

diagram-design 就是冲着这个场景来的。它是一个专为 Claude Code 设计的开源图表插件集合，提供 29 种编辑级图表类型，全部输出为自包含的 HTML + SVG 文件。说白了，它让 AI 生成的图表从"能看"变成"能直接交付"。适合谁用？写技术文档的后端工程师、做架构评审的 Tech Lead、需要给产品画泳道图的研发、以及任何被 Mermaid 丑图折磨过的人。

我实测下来，它最核心的价值在于三点。第一，零依赖：每张图是一个独立.html文件，内嵌 CSS 和 SVG，双击浏览器打开就是成品，不需要装 D3.js、ECharts 这些库。第二，矢量输出：SVG 可以无限缩放不失真，直接复制进 Word、Notion、Confluence 都清晰。第三，视觉克制：项目明确喊出 "No shadows, no Mermaid-slop"，统一配色、清晰层级、合理间距，符合出版标准。

29 种图表覆盖了绝大多数场景：流程图类的 Flowchart、Swimlane、State Diagram；关系图类的 ERD、Venn、Mind Map；时间轴类的 Timeline、Gantt、Schedule；数据展示类的 Bar、Line、Pie、Radar；架构图类的 Network Topology、Cloud Architecture、Container Diagram；还有决策树、鱼骨图、UI 线框图这些特殊类型。基本上你能想到的技术图表，它都有对应模板。

但要注意，diagram-design 不是"装完就自动变好看"的魔法。它的本质是一套高质量模板 + Claude Code 的调用能力，你需要把数据、结构、层级描述清楚，AI 才能填对模板。下面我会把安装、配置、生成、验证、排障整条链路拆开讲，每一步都能直接复制操作。

2. 前置准备：TaoToken 接入 Claude Code 的完整配置

diagram-design 是 Claude Code 的插件，所以第一步是让 Claude Code 能正常跑起来。如果你已经在用官方订阅，可以跳过这节；但如果你想像我一样用 API 方式灵活控制成本，或者团队需要统一走一个网关，那 TaoToken 的接入方式值得配一遍。

TaoToken 提供的是兼容 Anthropic 协议的 API 入口，Claude Code 可以直接对接。核心是三件套：Base URL、API Key、Model ID。缺一个都跑不通，这是后面排障时最常踩的坑。

先拿 Key。打开 https://taotoken.net/api-keys ，登录后创建一个新 Key，复制保存。注意 Key 只在创建时完整显示一次，丢了就得重建。

然后配置 Claude Code 的环境变量。Claude Code 读取的是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY这两个变量。在 macOS/Linux 下，编辑~/.zshrc或~/.bashrc：

export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_API_KEY="sk-你的Key"

Windows PowerShell 用户用：

$env:ANTHROPIC_BASE_URL="https://taotoken.net/api" $env:ANTHROPIC_API_KEY="sk-你的Key"

如果你用的是 Claude Code 的 settings 文件方式（推荐，避免污染全局环境），路径在~/.claude/settings.json，写入：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "sk-你的Key", "ANTHROPIC_MODEL": "claude-sonnet-4-20250514" } }

这里的 Model ID 要和你账号可用的模型对齐。写错模型名会直接报 404 或 model not found。配置完重启终端，运行claude --version确认 CLI 正常，再跑一句claude -p "hello"看是否能拿到回复。

如果你同时用 Codex 或 Cline，它们的配置文件不一样。Codex 走~/.codex/auth.json，Cline 走 VS Code 设置里的 MCP 配置。但无论哪个工具，记住三件套必须齐全：Base URL 指向https://taotoken.net/api，Key 用刚创建的，Model ID 填对。这三样任何一样缺失或写错，都会在下一步生成图表时暴露出来。

配好之后，Claude Code 就具备了调用模型的能力，接下来才能装 diagram-design 插件。

3. 安装 diagram-design 并生成第一张可编辑图表

Claude Code 的插件安装走/plugin命令。在 Claude Code 交互界面里输入：

/plugin install diagram-design@diagram-design

回车后它会拉取插件仓库并注册 29 个图表模板。安装完成后，你可以用/plugin list确认 diagram-design 出现在列表里。

接下来是关键：怎么让 Claude Code 用对模板。不要只说"画个流程图"，要给它明确的结构信息。我试过最有效的方式是分三步描述——图表类型、节点清单、连接关系。

举个例子，我要画一张订单系统的泳道图，展示 API 网关、用户服务、订单服务、支付服务之间的交互。我会这样写 prompt：

用 diagram-design 的 swimlane 模板画一张订单创建流程泳道图。 泳道：API网关、用户服务、订单服务、支付服务。 流程： 1. API网关 接收创建订单请求 2. API网关 -> 用户服务：校验用户身份 3. 用户服务 -> API网关：返回校验通过 4. API网关 -> 订单服务：创建订单 5. 订单服务 -> 支付服务：发起扣款 6. 支付服务 -> 订单服务：扣款成功 7. 订单服务 -> API网关：返回订单号 输出为自包含 HTML 文件，保存到 ./diagrams/order-flow.html

Claude Code 会调用 diagram-design 的泳道图模板，生成一个内嵌 SVG 的 HTML 文件。生成后你打开./diagrams/order-flow.html，浏览器里就是成品。

这里有个细节：diagram-design 的模板是静态 HTML 结构，AI 负责填充节点文本、坐标、连线路径。所以你的描述越结构化，生成的 SVG 越整齐。如果只给一句模糊需求，AI 可能把节点堆在一起。

生成后想改怎么办？两种方式。一是直接在 Claude Code 里说"把支付服务的节点改成红色，箭头加粗"，它会重新生成整个 HTML。二是手动编辑 HTML 里的<style>段，比如：

.node { fill: #f0f4ff; stroke: #4a90d9; stroke-width: 1.5; } .arrow { stroke: #666; stroke-width: 1.5; marker-end: url(#arrowhead); }

改完保存，刷新浏览器即可看到效果。因为是纯 SVG，你甚至可以用 Figma 或 Illustrator 打开继续精修。

对于架构图，用container或cloud-architecture模板。prompt 里把服务分层写清楚：接入层、业务层、数据层，每层有哪些组件，组件之间怎么调用。生成出来的图会自动分层布局，比手动画快得多。

4. 验证动作：同一份数据生成流程图与架构图，检查 SVG 可编辑性

光生成不算完，得验证输出质量。我用的方法是：拿同一份数据，分别生成流程图和架构图，然后检查两件事——SVG 是否可编辑、渲染是否正确。

先准备一份统一数据。假设是一个简化的电商系统：

组件：Web前端、API网关、用户服务、商品服务、订单服务、MySQL、Redis 关系： Web前端 -> API网关 API网关 -> 用户服务 API网关 -> 商品服务 API网关 -> 订单服务 用户服务 -> MySQL 商品服务 -> Redis 订单服务 -> MySQL 订单服务 -> Redis

第一轮，生成流程图：

用 diagram-design 的 flowchart 模板，基于以下数据生成流程图， 输出到 ./diagrams/verify-flow.html： [粘贴上面的组件和关系]

第二轮，生成架构图：

用 diagram-design 的 container 模板，基于同一份数据生成容器架构图， 按接入层/业务层/数据层分层，输出到 ./diagrams/verify-arch.html： [粘贴同样的数据]

生成后打开两个文件对比。检查点一：SVG 可编辑性。在浏览器里右键检查元素，看<svg>标签内的<rect>、<text>、<path>是否都是独立可选的。如果是，说明结构干净，可以复制到其他工具编辑。如果整张图是一个<image>或大量<foreignObject>，那编辑性就差。

检查点二：渲染正确性。看节点文字有没有溢出边框、箭头有没有指错方向、连线有没有穿过节点。diagram-design 的模板通常处理得不错，但如果你的节点文字太长，可能需要手动调viewBox或节点宽度。

检查点三：跨平台粘贴。把 SVG 复制到 Word 或 Notion 里，看是否保持清晰。矢量格式理论上无损，但如果模板里用了外部字体，粘贴后可能字体回退。解决办法是在<style>里指定通用字体族，比如font-family: -apple-system, "Segoe UI", sans-serif;。

我实测下来，同一份数据生成的流程图偏重"流程走向"，架构图偏重"分层归属"，两者互补。流程图适合讲清一次请求怎么流转，架构图适合讲清系统由哪些部分组成。验证通过后，你就有了两套可复用的模板，以后换数据只改 prompt 里的节点清单即可。

5. 常见报错排查：401、local proxy failed、reading choices、OAuth

配置和生成过程中，最容易卡在几个固定报错上。我把踩过的坑列出来，对照排查。

401 Unauthorized：Key 无效或没传对。检查ANTHROPIC_API_KEY是否完整复制，有没有多余空格。如果用的是 settings.json，确认 JSON 格式没写错，逗号、引号都要对。还有一种情况是 Key 被禁用或额度耗尽，去 https://taotoken.net/console 看下用量。

local proxy failed / connection refused：Base URL 写错，或者本地网络到不了。确认ANTHROPIC_BASE_URL是https://taotoken.net/api，不要多加/v1或结尾斜杠。如果公司网络有出口限制，检查是否能正常访问该域名。

reading 'choices' of undefined：这个报错通常出现在用 OpenAI 兼容格式调 Anthropic 接口时。Claude Code 走的是 Anthropic 协议，返回结构里没有choices字段。如果你在中间层做了协议转换，检查转换逻辑是否正确。直接用 TaoToken 的 Anthropic 兼容入口就不会有这个问题。

OAuth 相关报错：如果你之前登录过官方账号，Claude Code 可能缓存了 OAuth token，和 API Key 冲突。解决办法是清掉~/.claude下的认证缓存，或者显式设置ANTHROPIC_API_KEY覆盖 OAuth。运行claude logout再重新用 Key 方式登录。

插件装了但 AI 不用：prompt 里没点名模板。Claude Code 不会自动猜你要哪种图，必须在 prompt 里写清用 diagram-design 的 xxx 模板。模板名参考插件文档，比如flowchart、swimlane、erd、timeline。

生成的 HTML 打开空白：多半是 SVG 的viewBox和内容坐标不匹配。用浏览器开发者工具看 console 有没有报错，检查<svg>标签是否闭合。有时候 AI 生成的路径数据有语法错误，手动修一下d属性即可。

排查顺序建议：先确认三件套（Base URL + Key + Model ID）齐全，再确认插件安装成功，最后确认 prompt 点名了模板。这三步过了，基本不会有大问题。

6. 把 diagram-design 用进日常：从单张图到文档流水线

单张图生成只是起点。真正提升效率的是把它接进你的文档流程。

我的做法是建一个diagrams/目录，所有图表 HTML 按模块命名，比如auth-flow.html、order-arch.html。写技术方案时，先在 Claude Code 里批量生成，再统一检查。因为都是自包含 HTML，可以直接用 Git 管理，改动了什么一目了然。

对于需要频繁更新的图，比如 API 调用流程，我会把节点数据抽成一个 JSON 文件，prompt 里引用它。这样数据变了只改 JSON，重新生成即可，不用每次重写描述。

如果你团队用 Coding Plan 做长期开发，可以把 diagram-design 的生成步骤写进 CI：提交代码时自动根据接口定义生成架构图，附在 PR 里。这样评审时大家看的是最新图，不会出现文档和图脱节。

想验证不同模型生成图表的效果差异，可以去 https://taotoken.net/models 用模型对话功能，同一份 prompt 分别跑几个模型，对比 SVG 质量。接入文档在 https://taotoken.net/doc ，里面有完整的协议说明和示例。

最后说个实用技巧：diagram-design 的模板可以自己改。把常用的配色、字体、间距固化到模板里，以后生成的图自动符合你们团队的视觉规范。改一次，受益所有后续图表。这比每次手动调样式高效得多。