企业官网建设流程全解析

drawio-ai-kit 是一个让 AI 生成"结构正确、风格统一"的 draw.io 架构图的开源框架，内置声明式布局引擎、真实图标目录（ground-truth stencils）、结构校验器和视觉自检。它目前已支持 AWS、Azure、GCP、Databricks 和 BPMN 五个领域。本文带你用3 步学会添加自己的云域：只需编写一份规则文件、接一根--mode参数、再放一个 Skill 文件，就能让 AI 按你的领域规范画出专业架构图。

一、先搞懂 Domain Skill：薄前端 + 厚引擎 🧩

在动手之前，理解 drawio-ai-kit 的分层设计能让你少走弯路：

• Kit 本体（厚引擎）：零依赖的drawio-aiCLI，提供图标搜索（search）、布局构建（builder/layout-engine）、结构校验（validate）、PNG 渲染与视觉自检（render）。领域知识全部沉淀在 rules/ 目录的规则文件里。
• Domain Skill（薄前端）：位于skills/drawio-<domain>/SKILL.md的指针文件。它本身几乎不含逻辑，只负责告诉 AI："当用户要画某类图时，加载哪套规则、走哪条工作流"。

这种"知识在 Kit、触发在 Skill"的设计，保证了每个 Skill 保持轻薄、规则单一来源。官方把新增一个云域总结为Three moves，完整说明见官方文档 docs/adding-a-domain-skill.md。

💡 核心理念：Skill 是"扳机"，规则文件才是"子弹"。

二、第 1 步：编写领域规则文件

📁路径：rules/<domain>-architecture.md

新建一个规则文件，参考现有文件的写法即可，例如 rules/aws-architecture.md、rules/azure-architecture.md 或 rules/gcp-architecture.md。

规则文件的核心内容是让这个领域的图"画对"所必需的知识，通常包括四类：

以 rules/azure-architecture.md 为例，它用一棵简明的嵌套树讲清了 Azure "逻辑优先、网络其次"的层级顺序，这正是 AI 绘图时最常犯错的环节。写规则时尽量具体到"固定字符串"级别（如AzureFirewallSubnet这种保留名），AI 就能一次画对。

三、第 2 步：在 CLI 中接入 --mode 参数 🔌

规则文件写好后，要让drawio-ai principles --mode <domain>能返回它。改动点在 src/cli.mjs 的principles分支，只有两处：

1. 注册 mode：把领域名加入 src/cli.mjs#L140 的MODES数组——未注册的 mode 会直接报错退出，防止 AI 拿到错误云域的规则：

   const MODES = ["aws", "azure", "gcp", "databricks", "bpmn"];

2. 映射规则文件：云类领域只需在 src/cli.mjs#L157 的cloudMap里加一条，新规则会自动与共享文件（principles.md、diagram-types.md、style-guide.md）拼接送给 AI：

   const cloudMap = { azure: "azure-architecture.md", gcp: "gcp-architecture.md", "<domain>": "<domain>-architecture.md" };

⚠️ 注意：如果你新增的是非云领域（类似 BPMN 的流程类图），则需要像bpmn分支一样加一个独立的if (mode === "...")分支，自行组合所需文件。

四、第 3 步：创建 Skill 文件

📁路径：skills/drawio-<domain>/SKILL.md

直接复制现有 Skill（如 skills/drawio-azure/SKILL.md）替换领域名词即可，官方模板全文收录在 docs/adding-a-domain-skill.md。关键只有一点：

写一个"锐利"的 frontmatter description。它是 AI 决定"该不该加载这个 Skill"的唯一触发器。对照 GCP 的写法（见 skills/drawio-gcp/SKILL.md）：

name: drawio-gcp description: Use when the user asks for a GCP or Google Cloud architecture diagram — VPC/networking, GKE, Cloud Run, landing zone...

description 里直接列出典型场景词（VPC、GKE、landing zone…），用户说"画个 GKE 架构"时 AI 就能精准命中。

Skill 正文本身保持模板原样：preflight 检查 CLI 是否安装 → 委托子代理或走 Inline 工作流（drawio-ai workflow→drawio-ai principles --mode <domain>→ 用布局引擎构建 →validate→render视觉自检）。不要在 Skill 里手写坐标，布局一律交给引擎。

五、验证清单：3 条命令确认新域可用 ✅

三步完成后，按 docs/adding-a-domain-skill.md 的 Checklist 跑一遍：

• rules/<domain>-architecture.md已写，且遵循现有规则文件模式
• src/cli.mjs中MODES+cloudMap（或独立分支）已接入
• skills/drawio-<domain>/SKILL.md已创建，description 足够锐利
• drawio-ai principles --mode <domain>返回正确规则
• 用新域画一张测试图，drawio-ai validate与drawio-ai search均正常

三条验证命令，一分钟出结果：

drawio-ai principles --mode <domain> # 规则返回是否正常 drawio-ai search "关键词" # 图标搜索是否命中 drawio-ai validate test.drawio # 结构校验是否通过

小结

为 drawio-ai-kit 添加新云域的本质，就是把"这个领域的正确画法"写成 AI 可执行的知识：规则文件定对错，--mode管送达，Skill 负责触发。整个流程只改 3 个文件、几乎不写业务代码——这正是该 Kit 把领域知识做成"单一来源"的回报。完成教程后，AI 就能用同样的声明式引擎、校验器和视觉自检，为你的新领域生成零坐标、零臆造图标的专业架构图。

延伸阅读：

• 官方新增指南：docs/adding-a-domain-skill.md
• 共享绘图原则：rules/principles.md
• 图表类型与模板索引：rules/diagram-types.md · examples/README.md