svg-diagram

用 SVG 生成精美的架构图、流程图、时序图、层级图、对比图等结构化图表。直接输出 ```html 代码块（内含 SVG），前端在沙箱 iframe 中渲染。效果比 Mermaid 更美观、布局更灵活。

跳到安装

仓库: PM-Shawn/Abu-Cowork
最近来源活动: 2026年7月11日 13:15
检测到的 SKILL.md 语言: 中文
星标: 369
分支: 85

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/PM-Shawn/Abu-Cowork --skill svg-diagram

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

trigger

创建和管理触发器 - 设置事件驱动的自动化任务

2026-08-25

abu-browser

操作阿布应用内置的可见浏览器：打开网页、点击、填写、截图和提取数据。用户要求在阿布内预览或操作网页时使用；无需安装浏览器扩展。

2026-08-21

abu-chrome-bridge

通过 Abu Chrome 扩展操作用户现有的 Chrome 标签页、登录态和浏览器资料。仅在用户明确要求使用 Chrome、已有标签页或现有登录状态时使用。

2026-08-21

查看这个仓库的全部 Skills

色组

浅底色 (fill)

边框色 (stroke)

强调色

深色 (文字)

靛蓝

#EBF0FF

#B4C6FC

#6B7FF5

#2D3A8C

翠绿

#E8FAF0

#8FE8BE

#2EBD7F

#145A3A

琥珀

#FFF8E6

#F5D97E

#E6A817

#7A5200

灰调

#F5F6F8

#D4D8E0

#8B93A1

#2E3440

玫红

#FFF0F1

#F5B3BA

#E8556D

#8C1B30

天蓝

#EDF7FF

#9DD4F5

#3AA8E0

#134B73

色组

浅底色 (fill)

边框色 (stroke)

强调色

深色 (文字)

靛蓝

#EBF0FF

#B4C6FC

#6B7FF5

#2D3A8C

翠绿

#E8FAF0

#8FE8BE

#2EBD7F

#145A3A

琥珀

#FFF8E6

#F5D97E

#E6A817

#7A5200

灰调

#F5F6F8

#D4D8E0

#8B93A1

#2E3440

玫红

#FFF0F1

#F5B3BA

#E8556D

#8C1B30

天蓝

#EDF7FF

#9DD4F5

#3AA8E0

#134B73

name	svg-diagram
description	用 SVG 生成精美的架构图、流程图、时序图、层级图、对比图等结构化图表。直接输出 ```html 代码块（内含 SVG），前端在沙箱 iframe 中渲染。效果比 Mermaid 更美观、布局更灵活。
trigger	用户要求画流程图、架构图、序列图、系统架构、技术架构、层级图、部署图、拓扑图、数据流、状态机、对比图、关系图、组织结构图、路线图、思维导图，或任何结构化的图表/可视化需求
do-not-trigger	用户要求生成照片、插画、艺术画、海报、UI 设计图、Logo（用 generate_image）；用户要求做数据统计海报（用 infographic）；用户要求做交互/动画/按钮操作的组件（用 html-widget）；用户要求数据图表如折线图/柱状图/饼图（用 html-widget + Chart.js）
user-invocable	true
disable-auto-invoke	true
argument-hint	<图表描述>
tags	["图表","diagram","流程图","架构图","可视化","visualization","SVG"]

name	svg-diagram
description	用 SVG 生成精美的架构图、流程图、时序图、层级图、对比图等结构化图表。直接输出 ```html 代码块（内含 SVG），前端在沙箱 iframe 中渲染。效果比 Mermaid 更美观、布局更灵活。
trigger	用户要求画流程图、架构图、序列图、系统架构、技术架构、层级图、部署图、拓扑图、数据流、状态机、对比图、关系图、组织结构图、路线图、思维导图，或任何结构化的图表/可视化需求
do-not-trigger	用户要求生成照片、插画、艺术画、海报、UI 设计图、Logo（用 generate_image）；用户要求做数据统计海报（用 infographic）；用户要求做交互/动画/按钮操作的组件（用 html-widget）；用户要求数据图表如折线图/柱状图/饼图（用 html-widget + Chart.js）
user-invocable	true
disable-auto-invoke	true
argument-hint	<图表描述>
tags	["图表","diagram","流程图","架构图","可视化","visualization","SVG"]

svg-diagram

安装方式

检查来源文件

核心规则

SVG 画布规范

阿布配色体系

排版规范

核心规则

SVG 画布规范

阿布配色体系

排版规范

图表类型与布局指南

1. 流程图（上→下或左→右）

2. 架构图（分层堆叠）

3. 时间线（水平轴）

4. 层级图 / 组织架构（树形）

5. 循环图 / 反馈环

6. 对比图 / 矩阵

7. 关系图 / 拓扑

质量检查清单

完整示例：三层系统架构

svg-diagram

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

核心规则

SVG 画布规范

阿布配色体系

排版规范

核心规则

SVG 画布规范

阿布配色体系

排版规范

图表类型与布局指南

1. 流程图（上→下 或 左→右）

2. 架构图（分层堆叠）

3. 时间线（水平轴）

4. 层级图 / 组织架构（树形）

5. 循环图 / 反馈环

6. 对比图 / 矩阵

7. 关系图 / 拓扑

质量检查清单

完整示例：三层系统架构

1. 流程图（上→下或左→右）