关于 drawio-aws
drawio-aws 是通过 drawio-ai CLI 和布局引擎创建 draw.io AWS 架构图的技能,说明构建、验证、渲染和视觉检查流程,并包含 AWS 专属布局规则。
主要功能
- 01预先检查 drawio-ai CLI
- 02使用声明式布局引擎构建
- 03AWS 架构图规则
- 04验证和渲染图表
- 05检查渲染图像
适用场景
- 01创建 AWS 架构图
- 02检查图中的 AWS 服务布局
- 03交付前渲染并验证图表
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ sparklabx/ drawio-ai-kit --skill drawio-aws安装后在 Claude Code 中输入/drawio-aws确认已加载。
详细介绍
Draw.io AWS
在 draw.io 中绘制正确的 AWS 架构图。此技能是一个精简的前端;确定性引擎、验证器和规则位于
drawio-ai-kit 包中,通过 drawio-ai CLI 调用。
0. 预检 — 必须已安装 CLI
command -v drawio-ai >/dev/null 2>&1 || echo "Install the Kit first: npm i -g github:sparklabx/drawio-ai-kit"
如果 drawio-ai 不在 PATH 中,请停止并告知用户运行
npm i -g github:sparklabx/drawio-ai-kit。切勿自行运行 npm i -g——未经用户许可,不得更改其全局环境。
1. 委派构建(如果运行环境支持,优先采用)
如果你的运行环境可以启动能运行 shell 命令并读取图像的自主子 Agent(例如 Claude Code 的 Task 工具、通用 Agent),请在子 Agent 中运行完整的构建循环——规则、图标搜索以及每次渲染/修复迭代都不会占用本次对话的资源。如果不支持(或子 Agent 无法读取图像),请跳到下方的内联路径——循环和规则相同。
启动前,先确认子 Agent 无法询问的事项:图表范围、输出目录(用户项目中的绝对路径)、文件名。自行运行上方的预检。若用户请求绘制多个图表,请并行启动一个子 Agent 绘制一个图表,并为每个图表指定不同的文件名。
模型路由——如果运行环境允许选择子 Agent 的模型,请根据任务量分配:如果请求符合规则中 Templates 表格里的模板(复现过程机械,验证器的建议字符串会说明所有修复方法),使用快速/低成本层级(Claude Haiku 级别——必须支持视觉能力);对于自由绘制或新颖架构,使用你的默认强模型。如果低成本子 Agent 返回 VALIDATE not ok 或 ITERATIONS > 3,请在接管内联处理之前,使用强模型重新启动一次。对于多个图表的请求,请分别为每个图表选择模型。
子 Agent 提示词(填写每个 <...>):
Build an AWS architecture .drawio diagram with the drawio-ai CLI.
Request: <user's request + clarifications, verbatim>
Output: <ABS_PROJECT_DIR>/<NAME>.drawio — never write inside the Kit, never into cwd.
Follow exactly:
1. Set ROOT="$(drawio-ai root)". Read $ROOT/docs/api-cheatsheet.md — the full layout-engine
API in one file; never read library source.
2. Run `drawio-ai workflow` and `drawio-ai principles --mode aws` — the source of
truth. (Fallback if a command is blocked: read $ROOT/rules/*.md directly.)
3. Look up every icon with ONE batched `drawio-ai search "a, b, c"`; never recolor icons.
4. Scaffold, don't write: `drawio-ai scaffold --list`, pick the closest template, then
`drawio-ai scaffold <name>.mjs -o <dir>/build.mjs` — the script arrives runnable
(absolute imports, self-validating, self-rendering with an issues list). Edit only the
deltas. If no template is close AND you'd change more than half of it, Write a new
script instead (keep the scaffold's self-check tail). Layout engine only
(group/frame/grid/icon/box + renderTree), NO hand-written coordinates.
5. Each `node build.mjs` run prints validate JSON AND the render's machine-readable
`issues` list. Fix from THAT checklist — all issues in one Edit round — then re-run.
Loop until issues is empty.
6. Only when issues is empty: Read the PNG once as final visual confirmation (list any
remaining visual problems, fix ALL in one round). Target <= 2 PNG reads total. Then
render once WITHOUT --check for the final deliverable PNG.
Do NOT invoke any drawio skill — this prompt already contains the full procedure.
Do not ask questions — make the standard choice and record it under ASSUMPTIONS.
Return EXACTLY this block, nothing else:
DRAWIO: <absolute path to .drawio>
PNG: <absolute path to .png>
VALIDATE: <verbatim final validate JSON>
ICONS: <comma-separated icon names used>
ITERATIONS: <number of render/fix cycles>
SUMMARY: <one sentence describing the diagram>
ASSUMPTIONS: <choices made without asking, or "none">
将 DRAWIO、PNG 和 SUMMARY 原样转给用户;在本次对话中不要重新读取 .drawio 或 PNG——子 Agent 已经完成了视觉自检。如果 VALIDATE 不为 ok,请通过内联路径接手处理(返回路径下已有 build .mjs 和 .drawio 文件)。
内联路径(不支持子 Agent)
1. 共享工作流
drawio-ai workflow
输出每个图表都会遵循的“构建 → 验证 → 渲染 → 写入项目路径”循环。请阅读;这是流程的权威说明。
2. 领域规则
drawio-ai principles --mode aws
返回 AWS 规则 + 共享原则 + 目录分类。
3. 使用引擎构建,然后验证并渲染
确定 Kit 的安装目录,然后通过绝对路径 import 引擎(共享工作流中展示了确切的模式):
ROOT="$(drawio-ai root)" # absolute path to the installed Kit
使用声明式布局引擎构建(禁止手写坐标),然后:
drawio-ai validate <file> → drawio-ai render <file> -o <file>.png(读取 PNG 进行视觉自检)→ 将 .drawio 写入用户项目中的绝对路径(切勿写入 Kit 或 cwd)。
领域说明
容器嵌套顺序:AWS Cloud → Region → VPC → AZ → Subnet → SG。
托管/全局服务(CloudFront、Route 53、S3、DynamoDB、SQS/SNS)
位于 VPC 之外——它们不属于子网。目录中的类别颜色具有权威性;切勿更改 AWS 图标的颜色。
自检(交付前)
- 使用布局引擎构建——未手写坐标。
-
drawio-ai validate→ ok,无警告、无建议。 -
drawio-ai suggest-layout→ 推荐的布局原型与当前布局相符;无稀疏(单图标框架)警告。 - 每个图标均来自
drawio-ai search(类别颜色保持不变)。 -
drawio-ai render视觉自检通过。 - 输出已写入用户的项目,而不是 Kit。