绘制各种风格的 SVG 信息图、架构图与流程图。 当用户提到以下任何场景时,务必使用此 skill: - 画流程图、架构图、系统图、信息图、示意图 - 用 SVG 绘制图表、可视化某个流程或概念 - "帮我画一张图说明……"、"生成一张架构图"、"画个示意图" - 将文字描述的系统或流程可视化为图表 - 想要特定风格的插图(Anthropic 风格、暗色主题等) 即使用户没有明确说"SVG",只要涉及流程/架构/信息的可视化,都应使用此 skill。
绘图由图表类型和视觉风格两个维度独立决定,两两可自由组合。
图表类型决定布局结构(节点排列方式、箭头走向、层次关系)。
| 类型 | 适用场景 | 参考文档 |
|---|---|---|
| layered-flow | 垂直分层流程:Session 初始化 → 循环执行 → 结果;单条主线,强调阶段递进 | types/layered-flow.md |
| column-layer | 水平多列架构:N 个垂直列并排,每列代表一个系统层;列间有箭头流转;底部可有共享平面 | types/column-layer.md |
| swimlane | 泳道图:多个横向参与者各占一行,消息/箭头在泳道间流动;适合协议交互、多方协作 | types/swimlane.md |
| pattern-grid | 模式对比网格:多列并排展示不同模式/方案,每列独立纵向流程,底部有文字说明 | types/pattern-grid.md |
| side-by-side | 左右对比:两个方案/模式各占半幅,中间虚线分隔,适合"旧 vs 新"、"A 方案 vs B 方案" | types/side-by-side.md |
| nested-layer | 水平分层嵌套架构:3–4 个横向大层(如"应用层 → 生产层 → 数据层"),每层内部有子区块嵌套,左侧可附管控面板 | types/nested-layer.md |
选择逻辑:
layered-flowcolumn-layerswimlanepattern-grid 或 side-by-sideside-by-side;三个及以上 → pattern-gridnested-layer视觉风格决定颜色、字体、箭头样式等视觉语言,与类型正交,可任意搭配。
| 风格 | 描述 | 参考文档 |
|---|---|---|
| anthropic-flat | Anthropic/Claude 官方文档视觉语言;低饱和度色块,flat 无阴影,细边框 | styles/anthropic-flat.md |
默认风格:未指定时使用 anthropic-flat。
添加新类型:在
types/下新建.md,在上方类型表中登记。
添加新风格:在styles/下新建.md,在上方风格表中登记。