使用 iThinkAir 将 Architecture Diagram Skill 开发成“架构图生成器”应用

使用 iThinkAir 将 Architecture Diagram Skill 开发成“架构图生成器”应用

系统架构图是技术方案、项目评审和团队协作中的重要载体，但手工绘制往往需要反复调整组件、连线、布局与配色。如果已经在 Codex、Claude Code 等 AI 助手中频繁使用 architecture-diagram Skill，不妨再进一步：把它封装成一款独立应用，让架构图的生成、预览和管理都集中在一个直观的界面中完成。

本文将演示如何使用 iThinkAir，把 Cocoon AI 发布的 architecture-diagram Skill 开发成“架构图生成器”应用，并以“云原生数据中台架构”为例完成一次实际生成。

architecture-diagram 是什么？

architecture-diagram 是一款面向 AI 助手的架构图生成 Skill。它将两项能力组合在一起：

• 理解自然语言描述中的系统组件、连接关系、技术栈、协议、端口和部署边界；
• 生成可直接交付的独立 HTML 文件，并以内联 SVG 和 CSS 绘制专业架构图。

这意味着，用户不需要逐个拖放图形，只需清晰描述架构需求，AI 就能完成结构梳理和图形表达。生成的文件不依赖在线绘图平台，便于离线查看、交付和归档。

技能化完成后，还可以查看其说明、版本、设计系统和色彩规范。截图中的版本为 1.1，采用 MIT 许可证。

第一步：下载并技能化

首先访问 architecture-diagram-generator GitHub 仓库，下载 architecture-diagram.zip 技能包。

然后打开 iThinkAir，进入“技能化”页面，点击上传按钮并选择刚刚下载的 ZIP 文件。

上传并完成解析后，architecture-diagram 会出现在技能列表中。此时，原始技能包已经转换为 iThinkAir 可以调用的技能。

第二步：用技能生成应用

切换到“做应用”页面，在应用描述中输入“架构图生成器”，然后从技能列表中勾选 architecture-diagram，点击“生成应用”。

等待几分钟后，一款完整的“架构图生成器”应用就创建好了。生成的应用不仅有独立首页，还内置“生成架构图”和“架构图库”等功能入口。首页会展示架构图总数、本月生成数和最近活跃时间，便于快速了解使用情况。

从 Skill 到应用，变化并不只是多了一个页面。原本需要在 AI 对话中反复描述、下载和整理文件的工作流，被转化成了字段明确、操作连续、结果可管理的产品界面。

第三步：生成一张架构图

进入“生成架构图”页面，填写图表标题和架构需求。为了获得更准确的结果，架构需求应尽量明确地描述以下信息：

• 系统分层和核心组件；
• 组件采用的技术栈；
• 数据流向与调用关系；
• 实时、离线等处理路径；
• 部署方式及运维边界。

本例将标题设为“云原生数据中台架构”，需求中指定数据采集层使用 Flink/Spark、存储层使用 HDFS/Iceberg、计算层使用 Presto/ClickHouse、服务层使用 API Gateway，并要求支持实时与离线数仓，以及通过 Kubernetes 和 Helm 进行管理。填写完成后，点击“立即生成架构图”。

第四步：预览和导出生成结果

生成完成后，应用会打开预览窗口。示例结果清晰呈现了 Kubernetes 集群边界、实时数仓与离线数仓两条链路，以及 Flink、Spark、Iceberg、ClickHouse、Presto 和 API Gateway 等组件之间的关系。

最终成果是一个可离线使用的交互式 HTML 文件。架构图采用深色主题和内联 SVG 绘制，不仅适合直接在浏览器中查看，还可以导出为 PNG 或 PDF，用于方案文档、汇报材料和评审会议。

从示例可以看到，自然语言中的“实时与离线数仓”“湖仓融合”和“云原生治理”等要求，已经被转换为清晰的区域、组件、连线与注释。相比简单地罗列技术名词，这种视觉化表达更容易帮助团队发现依赖关系和系统边界。

第五步：在架构图库中统一管理

生成的架构图会自动进入“架构图库”。这里支持按标题或架构需求搜索、调整排序，并可对每个项目执行预览、下载、编辑和删除操作。

对于需要持续迭代方案的团队，这个图库尤其有价值：它把一次性的 AI 输出沉淀为可检索、可修改、可复用的架构资产，避免生成结果散落在不同对话和本地目录中。

使用建议

为了让生成结果更贴近真实系统，可以在需求描述中补充协议、端口、网络区域、数据方向、安全组件、容灾关系和部署边界。例如，与其只写“微服务架构”，不如明确说明“外部流量经 WAF 和 API Gateway 进入 Kubernetes 集群，服务间使用 gRPC，异步消息通过 Kafka，业务数据写入 PostgreSQL，并标出可观测性组件”。

如果首次生成的结构与预期存在偏差，也可以返回编辑功能，进一步明确组件层级或连接关系后再次生成。把需求写成“组件 + 关系 + 边界 + 约束”的形式，通常能得到更稳定的图形结果。

总结

借助 iThinkAir，architecture-diagram 不再只是 Codex 或 Claude Code 中的一项对话式能力，而是变成了一款有固定输入界面、生成流程和资产管理功能的“架构图生成器”应用。

整个过程可以概括为：下载技能包、在 iThinkAir 中完成技能化、选择技能生成应用、填写架构需求、预览并管理结果。对于经常需要绘制和维护技术架构图的个人或团队，这种应用化方式更直观，也更适合重复使用与长期沉淀。