Claude Code 画架构图的顶级 Skill,按“酷炫程度”排序:fireworks-tech-graph

发布时间:2026/9/30 0:11:24

Claude Code 画架构图的顶级 Skill,按“酷炫程度”排序:fireworks-tech-graph 1. 为什么我最后只留下 fireworks-tech-graph 这一个画图 SkillClaude Code 画架构图这件事我前后折腾过不少方案。最早是让它直接吐 Mermaid结果复杂一点的微服务拓扑就挤成一团后来换成让它写 HTMLSVG可控性上来了但每次都要重新调色、调间距、调字体画一张图的时间够我改三版需求。直到用上 fireworks-tech-graph 这个 Skill我才算把「描述系统 → 拿到能直接贴进 PPT 的高清图」这条链路跑顺。fireworks-tech-graph 是什么一句话它是挂在 Claude Code 里的架构图生成 Skill把「画什么图」和「长什么样」拆成两个维度让你选。画什么图有 14 种覆盖 UML 类图、时序图、状态机以及 AI 领域专属的 RAG Pipeline、Agentic RAG、Multi-Agent、ToolCallFlow、记忆架构、特性对比矩阵长什么样有 7 种风格Flat Icon、Dark Terminal、Blueprint、Notion Clean、Glassmorphism、Claude Official、OpenAI Official。输出是 SVG可继续编辑加 1920px 高清 PNGRetina 屏下不虚直接丢进文档或 PPT 都不掉价。它适合谁三类人最划算。第一类是写技术方案、做架构评审的工程师需要快速把脑子里的分层画出来第二类是写博客、做分享的技术作者图要好看但不能花太多时间第三类是做 AI 应用的人RAG、Agent、向量库这些结构用通用 UML 工具画出来总差点意思而这个 Skill 内置了 AI 语义——LLM 画成双边框矩形加闪电标记Agent 画成六边形Vector Store 画成同心圆柱Graph DB 画成三圆环你描述模式它就懂。这篇不堆概念直接给你可复制的安装命令、配置片段、触发指令和排障清单。我试过从零到出图大概十分钟其中八分钟在等依赖装完。下面按「先装好 → 再配好 → 再画对 → 再排错」的顺序走每一步都能单独验证。2. 装 fireworks-tech-graph 前先把 Claude Code 和 TaoToken 这条链路接稳很多人卡在第一步不是 Skill 装不上而是 Claude Code 本身没连上模型或者连上了但 Key 配错导致后面所有指令都石沉大海。所以先把底座搭好再装 Skill。TaoToken 在这里的角色是给 Claude Code 提供模型接入的入口。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 这个地址后面不加任何参数。你需要先在控制台建一个 API Key控制台入口在 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite Key 管理页在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。建好之后复制那串 sk- 开头的字符串后面配置要用。Claude Code 的接入配置有两种常见写法取决于你用的是环境变量还是配置文件。环境变量方式最直接在 shell 的 rc 文件里加export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENsk-你的Key export ANTHROPIC_MODELclaude-sonnet-4-5-20250929如果你用的是 Claude Code 的 settings 文件路径通常在~/.claude/settings.json内容长这样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的Key, ANTHROPIC_MODEL: claude-sonnet-4-5-20250929 } }这里有个坑要提前说Base URL 一定写https://taotoken.net/api不要自作聪明加/v1或者结尾斜杠加了大概率 404。Model ID 要写全别只写claude-sonnet有些客户端会匹配不上。配完之后重启终端跑一句claude --version确认命令在再进 Claude Code 发一句「你好」看有没有正常回复。这一步通了再往下装 Skill。装 fireworks-tech-graph 有三种方式按省心程度排方式一是命令行一键装前提是本机有 Node.jsnpx skills add yizhiyanhua-ai/fireworks-tech-graph方式二是在 Claude Code 对话框里用自然语言让它装直接发帮我安装 fireworks-tech-graph 这个 skillGitHub 地址是https://github.com/yizhiyanhua-ai/fireworks-tech-graph方式三是手动克隆适合想自己管文件或者前两种网络受限的情况git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph装完还有一步不能漏这个 Skill 导出高清 PNG 依赖rsvg-convert也就是 librsvg 这个工具。macOS 用brew install librsvgUbuntu/Debian 用sudo apt install librsvg2-bin。不装的话 SVG 能出但 PNG 那步会报错。装完重启一次 Claude Code让它重新加载 Skill 列表。3. 可复制配置把风格、尺寸、输出路径写进 settings 和触发指令Skill 装好只是有了能力真正决定出图质量的是你怎么下指令。fireworks-tech-graph 的触发逻辑是「风格 图表类型 系统描述 输出参数」四件套缺一个它就会用默认值默认值不一定是你想要的。先说配置层面。如果你希望每次调用都固定某些参数可以在项目根目录建一个.claude/skills/fireworks-tech-graph/config.toml把常用默认值写进去[defaults] style dark-terminal width 1920 height 1080 format [svg, png] output_dir ~/Desktop/arch-diagrams font JetBrains Mono background slate-950 grid true这个 TOML 不是必须的但写了之后你每次只要说「画一个 RAG 架构图」就会自动套用 dark-terminal 风格和 1920 尺寸省得反复交代。注意 output_dir 用绝对路径或者~开头的路径相对路径在不同工作目录下会飘。然后是触发指令的写法。最基础的调用长这样用 fireworks-tech-graph 帮我画一个 RAG 系统的架构图使用 dark terminal 风格输出到 ~/Desktop/更可控的写法是把风格、图表类型、组件、连线规则、输出格式全写清楚。比如画一个带向量库和重排序的 RAG Pipeline用 fireworks-tech-graph 画 RAG Pipeline 架构图。 风格glassmorphism1920px。 组件 - 用户查询入口 - Embedding 模型双边框矩形 闪电标记 - Vector Store同心圆柱 - Retriever - Reranker - LLM 生成节点 - 记忆模块Memory 连线 - 查询到 Embedding 用实线 - Embedding 到 Vector Store 用虚线 - Retriever 到 Reranker 用实线带箭头 输出SVG 1920px PNG保存到 ~/Desktop/rag-arch/这里的关键是「AI 语义」那部分。你写「Vector Store」它会自动画成同心圆柱写「Agent」自动六边形写「LLM」自动双边框加闪电。你不需要告诉它用什么图形只要用对术语。这也是它比通用画图工具强的地方——它认识 AI 领域的词汇。如果你要画的是多智能体系统触发指令可以这样用 fireworks-tech-graph 画 Multi-Agent 架构图Claude Official 风格。 包含Orchestrator、三个 Worker Agent、Tool 调用层、共享 Memory、外部 API。 连线Orchestrator 到每个 Agent 用实线Agent 之间用虚线表示消息传递Agent 到 Tool 用带箭头实线。 输出 SVG 和 PNG1920x1080。风格选择上给个参考给领导看用 Claude Official 或 Notion Clean干净不刺眼技术分享用 Dark Terminal 或 Blueprint有工程师味道产品文档用 Glassmorphism毛玻璃质感确实抓眼球要打印出来贴墙用 Flat Icon对比度高。尺寸默认 1920x1080如果要放进竖版文档可以改成 1080x1920但布局会重排建议先出横版再裁。4. 验证请求从一段代码结构到成品图的完整跑通流程配置写完不验证等于没配。这一节给你一条从零到出图的完整链路每一步都有可观察的结果哪一步断了立刻能定位。第一步确认 Skill 被加载。在 Claude Code 里发列出当前可用的 skills正常情况你会看到 fireworks-tech-graph 出现在列表里。如果没看到说明安装路径不对或者没重启回到第 2 节检查~/.claude/skills/下有没有对应目录。第二步确认模型链路通。发一句用一句话说明你能做什么如果回复正常说明 TaoToken 的 Base URL 和 Key 都生效了。如果这里就报 401直接跳到第 5 节排障。第三步给一个真实的代码结构让它画。假设你有个简单的三层应用直接把结构贴进去用 fireworks-tech-graph 画这个系统的架构图dark terminal 风格 - 前端React SPA部署在 CDN - 网关Nginx 反向代理 - 后端Node.js API 服务三个实例 - 数据PostgreSQL 主从 Redis 缓存 - 认证JWT 输出 SVG 和 1920px PNG 到 ~/Desktop/demo-arch/第四步观察它的执行过程。正常的话它会先解析你的描述然后生成 SVG 源码再调用 rsvg-convert 转 PNG。你会在终端看到类似「Generating SVG...」「Converting to PNG...」的日志。如果卡在转换那步八成是 librsvg 没装。第五步检查产物。去~/Desktop/demo-arch/看有没有两个文件一个.svg一个.png。SVG 用浏览器打开应该能正常渲染PNG 用图片查看器打开应该是 1920 宽、Retina 下不糊。如果 SVG 有但 PNG 没有就是转换依赖的问题如果两个都没有就是 Skill 没触发或者指令没被识别。第六步验证可编辑性。用 VS Code 或任何文本编辑器打开那个 SVG你应该能看到结构清晰的rect、path、text标签。这意味着你可以手动改颜色、改文字、改位置不用重新生成。这是 SVG 相对 PNG 的核心优势也是我推荐默认输出 SVG 的原因。跑通这一遍之后你可以把第三步的指令换成自己真实的系统结构。复杂系统建议拆成多张图比如「全局总览 核心业务链路 数据流细节」三张每张单独生成。一次性让它在 1920 画布上塞二十个服务结果一定是挤成一团拆图比调参数有效。5. 常见报错排查401、local proxy failed、reading choices、OAuth 逐个拆这一节按真实遇到的报错来每条都给现象、原因、修法。401 Unauthorized。现象是 Claude Code 发任何消息都回 401。原因通常是 Key 错了、Key 过期了、或者 Base URL 写错导致请求打到了别的地方。修法先去 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 确认 Key 还在、还有额度然后检查ANTHROPIC_BASE_URL是不是https://taotoken.net/api结尾不要有斜杠不要加/v1最后确认ANTHROPIC_AUTH_TOKEN没有多余空格或换行。改完重启终端。local proxy failed。现象是连接被拒或者超时。这个报错通常和本地网络配置有关检查你的 shell 里有没有残留的HTTP_PROXY、HTTPS_PROXY环境变量指向一个已经关掉的本地端口。用env | grep -i proxy看一眼有的话unset掉再试。另外确认ANTHROPIC_BASE_URL是 https 不是 http。Error reading choices / reading choices 相关报错。现象是模型返回了内容但客户端解析失败。这多半是 Model ID 写得不完整或者不被识别。修法把ANTHROPIC_MODEL写成完整的模型标识比如claude-sonnet-4-5-20250929不要简写。如果换了模型还是报检查 settings.json 里有没有重复的 model 字段互相覆盖。OAuth 相关报错。现象是提示需要登录或者 token 无效。Claude Code 在某些版本会尝试走 OAuth 流程如果你用的是 API Key 模式需要确认没有同时启用 OAuth 配置。检查~/.claude/下有没有冲突的凭据文件必要时清掉重新用 Key 配置。如果你用的是 Codex 的auth.json那套确认里面的 base_url 和 key 字段和 TaoToken 的一致。PNG 转换失败 / rsvg-convert not found。现象是 SVG 生成了但 PNG 那步报命令找不到。修法就是装 librsvgmacOSbrew install librsvgUbuntusudo apt install librsvg2-bin。装完which rsvg-convert确认路径在再重启 Claude Code。Skill 不触发。现象是你说了「画架构图」但它没用 fireworks-tech-graph。原因可能是指令里没提 Skill 名字或者 Skill 没加载。修法指令里明确写「用 fireworks-tech-graph」然后确认~/.claude/skills/fireworks-tech-graph/目录存在且里面有 SKILL.md 之类的定义文件。出图但风格不对。现象是图出来了但是默认风格不是你指定的。检查风格名拼写dark-terminal和dark terminal有的版本都认但DarkTerminal可能不认。保险起见用连字符小写。另外确认 config.toml 里的默认值没有覆盖你的指令参数。排障的核心思路是分层先确认模型链路通发普通消息再确认 Skill 加载列 skills再确认指令被识别看执行日志最后确认产物生成看文件。哪层断修哪层不要一上来就重装。6. 把这条链路用顺之后我的实际工作流跑通之后我现在的习惯是新项目先在 Claude Code 里把目录结构和依赖关系描述一遍让它用 fireworks-tech-graph 出一张 dark-terminal 的全局图存到项目docs/下。写方案的时候直接引用这张 SVG需要改的时候在 SVG 里手动调两个文字不用重新生成。给非技术同事看的时候换 Glassmorphism 风格再出一版 PNG观感立刻不一样。如果你还没配好 Claude Code 的模型接入先去 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 拿 Key接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 有完整说明。想先试试模型对话效果可以走 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 。如果你打算长期用 Claude Code 做编码和 Agent 相关的事Coding Plan 在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 可以看看。最后留一个我踩过的坑别在同一个对话里连续让它画五张不同风格的图上下文会串第二张开始风格可能飘。一张图一个对话或者画完一张清一次上下文出图稳定性会好很多。
延伸阅读

更多相关文章

2026/9/30 0:06:24

AI工程学习路线:从RAG到Agent的实战指南

最近在技术社区里被问到最多的问题就是:AI工程到底怎么学?大家搜出来的路线往往是“先学Python,再啃PyTorch,然后从Transformer原理开始”,这套路径不能说错,但它更像算法研究员的成长路线。真正做AI工程的…

2026/9/30 0:06:24

多智能体系统生产化落地:架构短板、编排模式与稳定性实践

最近跟几个做AI应用的朋友聊了一圈,发现一个挺有意思的变化:大家讨论的重点已经从"要不要上多智能体"变成了"怎么把多智能体安稳地跑进生产环境"。一份覆盖数百家企业技术决策者的调研里,74%都表示计划在未来一年内把多智…

2026/9/30 0:06:24

残差网络深入解析:从原理到PyTorch实现与训练调优

先开门见山说个现象:很多做深度学习的同学,模型一开始训得好好的,loss降到某个程度之后怎么调都下不去,甚至把网络层数加得更深,效果反而变差了。这时候十有八九不是代码写错了,而是你踩到了网络结构的“退…

2026/9/30 1:06:29

嵌入式驱动开发:从能跑到会崩的量产级工程化实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/30 1:06:29

FreeRTOS实战专栏:从任务调度到内存与项目落地的系统梳理

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/30 1:06:29

Modbus RTU协议详解:从报文结构到实战调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/30 1:06:29

Win7蓝屏报错开启与dump文件分析:从BugCheck到定位肇事驱动

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/30 1:06:29

nginx+keepalived高可用实战:主备与双主模式VIP漂移全解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/30 1:01:29

设备高温死机自动恢复?散热排查与降温修复实操指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/29 11:07:23

东莞市品牌网站建设报价常见报错与解决

东莞品牌网站建设报价单背后:一份保姆级建站教程避坑实录 网站做好了没人访问,这大概是很多老板最头疼的事。花了大几万做的品牌站,上线后流量惨淡,比路边摊还冷清。别急着骂外包公司,很多“东莞品牌网站建设报价”里藏着不少猫腻,比如用模板站冒充定制…

2026/9/29 21:48:03

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解 【免费下载链接】spirula-studio Cross-vendor 3D Gaussian Splatting trainer - video to splat to mesh, Vulkan or CUDA. 项目地址: https://gitcode.com/GitHub_Trending/sp/spirula-studio Sp…

2026/9/29 7:00:49

SEO怎么推广速查手册新手避坑实战指南

SEO怎么推广速查手册新手避坑实战指南 模板网站太丑不够用?别急着加滤镜,那是治标不治本。很多老板盯着后台流量掉得眼红,却还在纠结首页Banner的圆角是不是3像素。这就像穿着西装去挖土,姿势不对,努力白费。我整理这份 速查手册…

2026/9/30 0:01:22

MATLAB+Yalmip+CPLEX实战:综合能源系统优化调度全流程解析

做综合能源系统优化调度这活儿,最痛苦的不是建模本身,而是模型写完之后不知道该怎么求解。看论文里轻飘飘一句“采用Yalmip调用CPLEX求解”,自己上手时却往往卡在环境配置、变量声明、约束写法和求解状态判读上,一耗就是两三天。这…

2026/9/30 0:01:22

I3C比I2C快10倍?RK3576实战:速率、DTS配置与混合总线避坑指南

I3C 比 I2C 快 10 倍?这句话在嵌入式群里传了很久,每次都能吵出一堆截图。前段时间我正好在 RK3576 上调板级 I3C 接口,从控制器寄存器一路摸到 Linux DTS 配置,踩了不少坑,也把这笔速度账彻底算明白了。本文就用 RK35…

2026/9/30 0:01:22

字符串转对象:JSON.parse、new Function与URLSearchParams

“字符串转对象”这几个字,我在技术群里见过的问法至少有十几种:有人拿着一串{a:1,b:2}说 JSON.parse 直接报错,有人要从 URL 里抠出参数,还有人只是想把abc变成能挂属性的东西。js 这门语言里,字符串和对象之间的转换…

2026/9/29 3:53:39

USB Type-C PCB布局分区设计:电源、高速信号与PD协议全攻略

做硬件这行,Type-C接口算是典型的“看着简单,做起来全坑”的东西。光引脚就24个,高低速信号、电源、控制线全部塞在一个小小的连接器里,如果PCB布局不做规划,打样回来基本就是“插上没反应”、“高速掉线”、“静电一打…

2026/9/29 9:46:12

系统编程学习原型如何补齐稳定性边界

系统编程学习原型如何补齐稳定性边界预算有限时&#xff0c;我先优化明显多余的复制&#xff0c;而不是猜测性地换容器。用借用传递只读数据通常就能减少分配&#xff1a; fn parse(line: &str) -> Result<Item, Error> { /* ... */ }用基准确认热点确实在分配&am…

2026/9/29 6:36:14

雨花区哪家财务公司代理记账比较好?

在雨花区&#xff0c;企业处理财税事务常常面临诸多挑战&#xff0c;选择一家靠谱的财务公司至关重要。湖南巨勤财务管理咨询有限公司就是本地正规实体财税服务机构&#xff0c;深耕本地工商财税行业多年&#xff0c;熟悉当地工商局、税务局最新政策与申报流程。主营公司注册、…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑