用于快速产出**架构图 / 流程图 / 时序图 / 部署图**等可视化交付物,常见输出为 `.svg`(可离线打开)或 `.html`(浏览器直接预览)
面向架构与流程的专业制图技能。支持两种产出方式:(1) 直接生成高质量 SVG 分层架构图,提供 11+ 种风格(blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind),支持精确布局与中文;(2) 使用 Mer... Skill: 用于快速产出**架构图 / 流程图 / 时序图 / 部署图**等可视化交付物,常见输出为 .svg(可离线打开)或 .html(浏览器直接预览) Owner: footya Summary: 面向架构与流程的专业制图技能。支持两种产出方式:(1) 直接生成高质量 SVG 分层架构图,提供 11+ 种风格(blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind),支持精确布局与中文;(2) 使用 Mer... Tags: latest:1.0.1 Version history: v1.0.1 | 2026-04-20T13:41:56.091Z | user arch-diagrammer v1.0.1 - 专业架构/流程制图技能,支持高质量 SVG 分层架构图与 Kroki 驱动的 Mermaid/PlantUM
Rank
62
Safety
84
Downloads
1.4k
Updated
Oct 10, 2026
Version
1.0.1
Source
CLAWHUB
About
What it does, and when to use it.
Capability contract not published. No trust telemetry is available yet. 1.4K downloads reported by the source. Last updated 10/10/2026.
Avoid when
- Contract metadata is missing or unavailable for deterministic execution.
Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing
Public facts
Every fact links back to the source it came from.
- Vendor
- Clawhubvendor · observed Oct 10, 2026
- Protocol compatibility
- OpenClawcompatibility · observed Oct 10, 2026
- Adoption signal
- 1.4K downloadsadoption · observed Oct 10, 2026
- Latest release
- 1.0.1release · observed Apr 20, 2026
- Handshake status
- UNKNOWNsecurity
Install and run
Setup complexity: low.
clawhub skill install s17b3kmczwmrw0r70tc88brds5857asv:arch-diagrammer- Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
- Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.
Contract: missing
curl -s "https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/snapshot"
Documentation
CLAWHUB
30,706 characters of source documentation, loaded on request.
Extracted files
5 files captured from the source.
SKILL.md
--- name: arch-diagrammer description: 面向架构与流程的专业制图技能。支持两种产出方式:(1) 直接生成高质量 SVG 分层架构图,提供 11+ 种风格(blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind),支持精确布局与中文;(2) 使用 Mermaid / PlantUML / Graphviz 描述结构,并通过 Kroki 渲染为 SVG 或 HTML。适用于系统架构设计、方案评审与技术沟通中的可视化输出。 version: 1.0.1 author: yongsheng.hang --- # 架构制图技能(Architecture Diagrammer) 本技能帮助在产品/前端/后端/系统等多视角下,快速产出高质量的架构图、流程图、时序图与部署图,并导出为 SVG 与 HTML。 ## 产出模式 ### 模式一:纯 SVG 分层架构图(推荐用于分层展示) 直接生成纯 SVG 代码,无需外部渲染,支持精确控制布局、配色、字体。 **支持 11+ 种风格**(详见 `references/svg-layered-spec.md`): | 风格 | 特点 | 适用场景 | |------|------|----------| | blue | 深蓝商务渐变 | 企业正式 | | cyber | 黑底霓虹色 | 科技演示 | | dark | GitHub Dark 主题 | 开发者 | | gray | 简约灰阶 | 文档嵌入 | | green | 森林绿渐变 | 自然环保 | | handdrawn | 手绘风格 | 草稿创意 | | mono | 极简黑白直角 | 打印极简 | | morandi | 低饱和度复古 | 设计感 | | ocean | 海洋蓝绿 | 清新科技 | | orange | 暖橙渐变 | 活力营销 | | purple | 紫色渐变 | 创意高端 | | tailwind | 多色层级区分 | 层级复杂 | - 适用:系统分层架构、方案架构、技术全景图 - 参考:`references/svg-layered-spec.md`(风格规范、配色表、代码片段) - 模板:`assets/svg-templates/` 目录下各风格模板 说明(重要): - 当用户说“生成一个 **分层架构图** / “我要的是 **svg 的分层架构图**”,默认指 **纯分层 SVG(模式一)**,而不是 “Mermaid 渲染出的 SVG”。 - 目标交付物:一个可离线打开的 `.svg` 文件(不依赖 Kroki / Mermaid CDN)。 ### 模式二:Mermaid/PlantUML/Graphviz + Kroki 渲染 使用图形 DSL 描述结构,通过 Kroki 渲染为 SVG/HTML/PNG/PDF。 - 适用:流程图、时序图、C4 架构图、依赖关系图 - 参考:`references/diagram-quickstart.md`(语法速查) ## 工作流 ### 画图前:先让用户选择 在开始画图前,向用户提供若干建议供选择,确认后再动手: - **产出模式**:纯 SVG 分层图 vs Mermaid/PlantUML/Graphviz + Kroki - **图类型**:分层架构 / 流程图 / 时序图 / C4 / 部署图 等 - **层级或复杂度**:层数按需(常见 2–5 层,不固定)、每层模块数量、是否要图例 - **风格偏好**:11+ 种风格可选(blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind,见 `references/svg-layered-spec.md`)、是否图例、输出格式(.svg / .html) 用户选定或默认后,再按对应模式执行下方步骤。 ### 不确定时询问 以下任一情况不确定时,**先向用户列出选项或给出建议,待确认后再动手**,不要自行假设: - 产出模式、图类型不明确 - 层数、层级名称、每层包含哪些模块 - 配色/风格偏好、是否要图例 - 输出文件名、格式(.svg / .html) ### 纯 SVG 分层架构图 1) 按需求确定层级划分(层数不固定,常见 2–5 层,可少于 2 或多于 5) 2) 选定配色风格(11+ 种可选:blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind,见 `references/svg-layered-spec.md`) 3) 基于模板绘制层级容器与子模块(画布高度、层高按层数动态调整) 4) 结构与连线(按需取舍): - 只表达对沟通有价值的“直接关系/关键路径”,不必把所有区块都强行连起来 - 允许出现不连线的独立模块/模块组(例如同层的独立域、横切能力、外部依赖清单) - 允许同一行放多个互不相连的大模块(并排布局),按视觉平衡与阅读顺序灵活排布 5) 添加箭头连线与标注(只画必要的流向与依赖,并用最少文字说明) 6) 添加图例 7) 对照 `references/architecture-checklist.md` 自检 8) 版式检查(避免重叠): - 层级标题与子模块之间至少预留 8-12px - 子模块与层级容器底部至少预留 10-16px - 同层/同一行可并排多个独立模块组:组间留足间距,避免交叉线,必要时用小标题/分组框增强可读性 - 图例不要贴底,必要时增加画布高度(`<svg height="...">`)并下移图例 9) 编码检查(避免中文乱码): - 输出文件声明 UTF-8:`<?xml version="1.0" encoding="UTF-8"?>` - **推荐**:中文一律使用 XML 数字字符引用(`&#xXXXX;`),不依赖文件编码,任何 SVG 查看器都能正确显示。规则:每个汉字对应 `&#x` + 其 Unicode 码点(4 位十六进制)+ `;`,例如「权限」→ `权限`。详见 `references/svg-layered-spec.md` 的「中文编码与乱码修正」。 - 若已用裸中文且出现乱码,可整体重写为数字字符引用,或用脚本按 UTF-8 重写文件(避免局部编辑混入非 UTF-8 字节)。 ### Mermaid/PlantUML/Graphviz 1) 明确目标与范围:业务目标、上下文、关键约束 2) 选择图类型:C4(Context/Container/Component)、流程图、时序图、部署图 3) 起稿与迭代:从粗到细,命名统一、边界清晰 4) 渲染与导出:使用 `scripts/render_kroki.py` 生成 SVG 或 HTML
README.md
# arch-diagrammer(架构制图技能) 用于快速产出**架构图 / 流程图 / 时序图 / 部署图**等可视化交付物,常见输出为 `.svg`(可离线打开)或 `.html`(浏览器直接预览)。 ## 安装 适合以“个人 skill 包”的方式分发。 1. 将整个 `arch-diagrammer/` 目录复制到 `~/.cursor/skills/` 2. 确保最终目录为 `~/.cursor/skills/arch-diagrammer/` 3. 如需运行渲染脚本,确保本机可用 `python3` 4. 如需本地 Mermaid CLI 渲染,确保本机可用 Node.js 与 `npx` 安装完成后,skill 目录建议至少包含: - `SKILL.md` - `README.md` - `LICENSE` - `VERSION` - `CHANGELOG.md` - `assets/` - `references/` - `scripts/` ## 构建发布包 推荐在发布前先确认版本号已经更新完成: ```bash python3 scripts/bump_version.py patch ``` 如果当前版本号已经正确,也可以跳过这一步。 然后在 `arch-diagrammer` 根目录执行打包: ```bash python3 scripts/build_release.py ``` 如果你当前在仓库根目录,也可以直接执行: ```bash python3 skills/arch-diagrammer/scripts/build_release.py ``` 默认会生成: - `dist/arch-diagrammer-<version>.zip` 例如当前版本 `1.0.1`,生成产物为: - `dist/arch-diagrammer-1.0.1.zip` ## 打包步骤 1. 确认 `VERSION`、`CHANGELOG.md` 已更新到准备发布的版本 2. 在 `arch-diagrammer` 根目录执行 `python3 scripts/build_release.py` 3. 检查 `dist/` 目录下是否生成对应版本的 zip 包 4. 将该 zip 包发给使用者,或上传到你们内部制品库 / 文档平台 5. 使用者解压后,将 `arch-diagrammer/` 整个目录复制到 `~/.cursor/skills/` ## 打包说明 - `build_release.py` 会自动读取 `VERSION` 中的版本号作为发布包文件名 - 打包内容默认包含运行所需的 `SKILL.md`、`assets/`、`references/`、`scripts/` 等必要文件 - 打包产物位于 `dist/` 目录,便于持续发布多个版本 - 该打包方式适合“复制到个人 Cursor skills 目录即可使用”的分发模式 - 如果后续版本升级,重新执行打包命令即可生成新的版本包 压缩包解压后目录结构保持为: - `arch-diagrammer/SKILL.md` - `arch-diagrammer/README.md` - `arch-diagrammer/LICENSE` - `arch-diagrammer/VERSION` - `arch-diagrammer/CHANGELOG.md` - `arch-diagrammer/assets/...` - `arch-diagrammer/references/...` - `arch-diagrammer/scripts/...` ## 版本管理 - 当前版本:`1.0.1` - 变更记录:见 `CHANGELOG.md` - 升级命令:`python3 scripts/bump_version.py patch|minor|major` - 脚本行为:同步更新版本号并自动插入 `CHANGELOG.md` 新版本模板 - 版本规则:遵循语义化版本,`major` 为不兼容调整,`minor` 为新增能力,`patch` 为修正和小优化 ## 选择产出模式 - **模式一:纯 SVG 分层架构图** - 适用:系统分层架构、方案全景图、需要精确布局/配色/字体、离线可用 - 交付:直接输出一份可打开的 `.svg`(不依赖 Kroki/Mermaid CDN) - 风格与模板:见 `references/svg-layered-spec.md` 与 `assets/svg-templates/` - **模式二:Mermaid / PlantUML / Graphviz + Kroki 渲染** - 适用:流程图、时序图、C4、依赖关系图等 - 交付:用 DSL 描述图形,再渲染为 `.svg/.png/.pdf/.html` - 语法速查:见 `references/diagram-quickstart.md` 说明:当需求表述为“分层架构图 / svg 分层架构图”时,默认指**模式一**的纯 SVG 分层图。 ## 最小输入要素(建议你提供) - **产出模式**:模式一 / 模式二 - **图类型**:分层架构 / 流程 / 时序 / C4 / 部署(模式二为主) - **内容结构**: - 模式一:层级名称、每层模块列表、需要表达的关键连线(可选) - 模式二:DSL 源文件(`.mmd/.puml/.dot`)或其文本内容 - **风格偏好**(模式一):`blue/cyber/dark/gray/green/handdrawn/mono/morandi/ocean/orange/purple/tailwind` - **输出**:文件名与格式(`.svg` 或 `.html`) ## 提示词示例 ### 纯 SVG 分层架构图(模式一)  一句话版本(更像口语,复制就能用): ``` 使用 arch-diagrammer 帮我画一个支付系统的分层架构图,包含 4 层结构,使用手绘风格(handdrawn),输出一个可打开的 .svg 文件。 ``` 同款风格的展开版(写清楚一点更稳): ``` 使用 arch-diagrammer 画“支付系统”的分层架构图,4 层,手绘风格:handdrawn,输出 .svg。 标题:支付系统分层架构图。 分几层(4 层):接入层 / 交易编排层 / 支付核心层 / 数据与外部依赖层。 每层放哪些模块(你也可以按你项目改名): - 接入层:App/H5、商户后台、API Gateway、WAF、限流熔断 - 交易编排层:收银台、订单服务、路由/编排、通知回调(Webhook) - 支付核心层:支付服务、风控、账务、清结算、对账 - 数据与外部依赖层:MySQL、Redis、M
_meta.json
{
"ownerId": "kn727nkkzvcmz23s3qcktr52ys81r5cf",
"slug": "arch-diagrammer",
"version": "1.0.1",
"publishedAt": 1776692516091
}references/architecture-checklist.md
# 架构图质量检查清单 ## 表达与一致性 - 名称统一:系统/服务/模块/队列/数据库等命名风格一致 - 边界清晰:系统边界、信任区(Trust Boundary)、外部依赖明确 - 图例可读:颜色/线型/箭头/图标含义在图例中解释 - 视角单一:每张图只表达一个核心视角,避免信息过载 ## 正确性与可追溯 - 源数据一致:与需求文档/接口定义/数据库模型一致 - 数据流/控制流方向正确,协议/端口/鉴权方式明确 - 版本化:图文件纳入版本管理,支持差异对比与回溯 ## 可运维性与安全 - 可观测性:日志/指标/追踪链路位置与聚合方案 - 弹性与容错:限流/重试/降级/熔断策略标注 - 安全:认证鉴权/数据加密/密钥管理/最小权限/审计 - 可靠性:多机房/多可用区/灾备/备份与恢复路径 ## 性能与扩展 - 关键路径:延迟敏感链路、瓶颈点与容量假设 - 缓存策略:层级/一致性/过期与预热机制 - 异步解耦:消息队列/事件流/批处理边界 - 水平扩展:无状态服务/会话粘滞/数据分片 ## 可落地与演进 - 依赖清单:外部系统/第三方服务的 SLA 与限制 - 环境映射:开发/测试/预发/生产部署差异 - 迁移计划:灰度发布/回滚策略/数据迁移步骤 - 模块化:公共能力沉淀与复用点标注
references/diagram-quickstart.md
# 制图语法速查与范例
本页提供常用图形语言的最小可用片段与惯用法,便于快速起稿并通过 Kroki 渲染为 SVG/HTML。
## Mermaid
### 流程图(Flowchart)
```mermaid
flowchart TD
A[用户请求] --> B{鉴权?}
B -- 否 --> X[拒绝]
B -- 是 --> C[路由网关]
C --> D[服务A]
C --> E[服务B]
D -->|事件| F[(消息队列)]
E -->|订阅| F
```
### 时序图(Sequence Diagram)
```mermaid
sequenceDiagram
participant U as 用户
participant GW as 网关
participant S as 服务
U->>GW: 发起请求
GW->>S: 转发请求
S-->>GW: 响应
GW-->>U: 返回结果
```
## PlantUML(含 C4 模型)
> Kroki 内置 C4-PlantUML 宏支持,使用 `--type c4plantuml`(别名 `c4`)时**不需要** `!includeurl` 引用 C4 库。
> 如果通过本地 PlantUML 渲染(非 Kroki),才需要 `!includeurl` 远程引用。
### C4 上下文图(Context)
渲染命令:`python scripts/render_kroki.py --type c4plantuml --in context.puml --out context.svg`
```plantuml
@startuml
Person(user, "用户", "使用系统的人")
System_Boundary(sys, "系统") {
System(api, "API 服务", "提供业务能力的服务")
}
System_Ext(pay, "支付平台", "第三方")
Rel(user, api, "调用")
Rel(api, pay, "支付请求")
@enduml
```
### C4 容器图(Container)
渲染命令:`python scripts/render_kroki.py --type c4plantuml --in container.puml --out container.svg`
```plantuml
@startuml
System_Boundary(sys, "系统") {
Container(gw, "API Gateway", "NGINX/Envoy", "统一入口")
Container(svc, "业务服务", "Java/Spring", "核心业务逻辑")
ContainerDb(db, "主库", "MySQL", "事务数据")
Container(queue, "队列", "Kafka", "异步解耦")
}
Rel(gw, svc, "HTTP")
Rel(svc, db, "JDBC")
Rel(svc, queue, "生产/消费")
@enduml
```
## Graphviz(DOT)
```dot
digraph G {
rankdir=LR;
node [shape=box, style=rounded];
User -> Gateway -> Service -> DB;
Service -> Queue;
}
```
## 渲染提示
- Mermaid 更适合流程/时序;PlantUML 适合 C4/时序/用例;Graphviz 适合结构/依赖关系
- Kroki 支持 28 种图类型(D2、DBML、Ditaa、Erd、BPMN、Excalidraw、Nomnoml 等),用 `--list-types` 查看完整列表
- C4 图用 `--type c4plantuml`(别名 `c4`),Kroki 已内置 C4 宏,源文件无需 `!includeurl`
- 遇到特殊字符渲染失败时加 `--json` 切换为 JSON POST API
- 输出 HTML 时:
- Mermaid:默认生成包含 CDN 渲染逻辑的独立 HTML(不经过 Kroki)
- 其他类型:先通过 Kroki 渲染 SVG,再包裹到 HTMLAionUi
Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!
activepieces
AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents
cherry-studio
AI productivity studio with smart chat, autonomous agents, and 300+ assistants.
CopilotKit
The Frontend for Agents & Generative UI. React + Angular
Machine-readable data
The same record, as JSON, for agents and crawlers.
{
"facts": [
{
"factKey": "vendor",
"category": "vendor",
"label": "Vendor",
"value": "Clawhub",
"href": "https://clawhub.ai/footya/skills/arch-diagrammer",
"sourceUrl": "https://clawhub.ai/footya/skills/arch-diagrammer",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-10T12:01:38.353Z",
"isPublic": true
},
{
"factKey": "protocols",
"category": "compatibility",
"label": "Protocol compatibility",
"value": "OpenClaw",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/contract",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/contract",
"sourceType": "contract",
"confidence": "medium",
"observedAt": "2026-10-10T12:01:38.353Z",
"isPublic": true
},
{
"factKey": "traction",
"category": "adoption",
"label": "Adoption signal",
"value": "1.4K downloads",
"href": "https://clawhub.ai/footya/arch-diagrammer",
"sourceUrl": "https://clawhub.ai/footya/arch-diagrammer",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-10T12:01:38.353Z",
"isPublic": true
},
{
"factKey": "latest_release",
"category": "release",
"label": "Latest release",
"value": "1.0.1",
"href": "https://clawhub.ai/footya/arch-diagrammer",
"sourceUrl": "https://clawhub.ai/footya/arch-diagrammer",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-04-20T13:41:56.091Z",
"isPublic": true
},
{
"factKey": "handshake_status",
"category": "security",
"label": "Handshake status",
"value": "UNKNOWN",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/trust",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-footya-arch-diagrammer/trust",
"sourceType": "trust",
"confidence": "medium",
"observedAt": null,
"isPublic": true
}
],
"events": [
{
"eventType": "release",
"title": "Release 1.0.1",
"description": "arch-diagrammer v1.0.1 - 专业架构/流程制图技能,支持高质量 SVG 分层架构图与 Kroki 驱动的 Mermaid/PlantUML/Graphviz 渲染 - 新增 11+ 种 SVG 风格可选,支持精确布局及中文显示 - 明确用户工作流(先给选项/建议再画图,遇不确定先询问) - 丰富分层架构图与流程图两类产出,详列规范与编码注意事项(如 UTF-8/中文码点引用) - 提供脚本、模板与快速开始说明,适配多种图类型与输出格式 - 内附架构自检清单与用法参考",
"href": "https://clawhub.ai/footya/arch-diagrammer",
"sourceUrl": "https://clawhub.ai/footya/arch-diagrammer",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-04-20T13:41:56.091Z",
"isPublic": true
}
]
}Record generated Oct 10, 2026.
