让Claude用JSON「画」出版级架构图，figure-spec有点东西

让Claude用JSON「画」出版级架构图，这个Skill有点东西

做技术文档的时候，最烦的不是写文字，而是画那张架构图。

用Draw.io嫌慢，用Mermaid语法写出来丑，用Figma又得反复对位置。最要命的是——每次想改个小地方，得重来一遍。

最近发现一个Skill叫 figure-spec，解决这个痛点的方式挺有意思的：你写JSON，它吐SVG。

不是AI生成那种「随机发挥」，是确定性渲染——你给同一段JSON，它永远输出同一张图。这点对写论文、做PPT的人太重要了。

它能画什么？

官方定位是「出版级架构图、工作流图、流程图」。实际用下来覆盖这几类场景：

• 系统架构图（分层、中心辐射、多层架构都支持）
• 工作流 / Pipeline 示意图
• 审核 / 审批流程图
• 网络拓扑图

核心特点

确定性输出：同一个JSON，渲染出来的SVG完全一样。适合论文、投标文档、技术博客——你需要「改完还能对上原来那张图」。

输出是纯SVG：矢量图，可以直接用文本编辑器改节点文字、颜色、连接线。Figma导出的图你想改还得回Figma操作，这个不用。

支持中文标签：内置CJK字符宽度估算，中文节点名不会挤成一团。

本地运行，不需要API Key：纯Python脚本，跑在本地，不联网，不绑任何商业服务。

带Schema校验：JSON格式不对会直接报错，不会输出一张坏掉的图。

怎么用

两步搞定：

# 安装（需要npx）
npx skills add https://github.com/wanshuiyin/Auto-claude-code-research-in-sleep --skill figure-spec

# 在Claude Code里触发
/figure-spec 系统微服务架构图

然后Claude会引导你写FigureSpec JSON，写完自动渲染成SVG保存在项目目录。

比如一个典型JSON长这样——定义节点（形状、颜色、标签）、定义连线（起点终点、箭头方向）、定义分组。Claude帮你生成JSON，你省的是「排版对齐」这部分机械劳动。

适合谁

• 写论文要插架构图的研究党（确定性输出，论文评审不会出幺蛾子）
• 做技术分享要画流程图的工程师（比Mermaid好看，比Figma快）
• 写提案/投标文档需要专业配图的同学

不适合：数据图表（用专门的绘图工具）、手绘风格插图、需要AI创意发挥的场景。

一句话总结

figure-spec把「画架构图」变成了「写结构化JSON描述图」，配合Claude的代码能力，让机器帮你处理排版和渲染。对技术写作者来说，是把精力放回内容本身的好帮手。

GitHub仓库（ARIS项目，含figure-spec）

GitHub: https://github.com/wanshuiyin/Auto-claude-code-research-in-sleep