图像生成

Name: 图像生成
Author: JimLiu

设计与多媒体已审计 v1.117.3

作者仓库星标 21,713
叉子 2,492
作者更新于 2026年6月13日 05:00
作者仓库 baoyu-skills

流狐档案事实层信息：领域、Agent、信任分、运行环境、权限与网络

领域: 设计与多媒体
兼容 Agent: Claude Code
Cursor
Cline
Codex
Windsurf
Gemini CLI

+20
信任分: 92 / 100 · 已通过审计
作者 / 版本 / 许可: @JimLiu · v1.117.3 · 未声明 license
Token 消耗评级: 低消耗
接入复杂程度: 需简单配置
是否需要外部 API Key: 不需要
兼容的系统: macOS · Linux · Windows
底层运行要求: Node.js · Bun
文件与系统权限: 只读
允许写入 / 修改
网络行为: 仅限本地
安装命令数: 26 条

档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。

需要注意： 未限定 allowed-tools，默认拥有全部工具权限。

输出预览 baoyu-diagram.preview

---
name: baoyu-diagram
description: Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, s…
category: 设计与多媒体
runtime: Node.js / Bun
---

# baoyu-diagram 输出预览

## PART A: 任务判断
- 适用问题：视觉内容、演示材料、信息图或设计交付。
- 输入要求：目标材料、限制条件、期望输出和验收方式。
- 证据边界：围绕“Supported Diagram Types / Design System / Color Palette”读取原文规则，不把推断写成作者承诺。

## PART B: 执行结果
- **01** 任务判断：确认你的需求是否属于视觉内容、演示材料、信息图或设计交付，并标出输入、限制和预期结果。
- **02** 执行计划：优先按“Supported Diagram Types / Design System / Color Palette”拆成步骤，说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果：给出可复制的命令、文件改动、检查清单或内容草稿，并说明如何继续迭代。
- **04** 风险边界：结合 读取文件、写入/修改文件、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。

## Running Rules
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先小样例验证，再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。

SKILL.md SKILL.md

---
name: baoyu-diagram
description: Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, s…
category: 设计与多媒体
source: JimLiu/baoyu-skills
---

# baoyu-diagram

## 什么时候使用
- 一段文字描述就能画一张 Mermaid 流程图 / 时序图 / 架构图——输出是文本，可放进 Markdown 随时改 适合处理界面、视觉、封面、信息图或演示材料交付，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agen…
- 面向视觉内容、演示材料、信息图或设计交付，优先处理能明确输入、步骤和验收标准的工作。

## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。

## 执行规则
- 围绕「Supported Diagram Types / Design System / Color Palette」组织步骤，不把推断写成作者事实。
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先跑小样例，确认结果可检查后再扩大任务范围。

## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown，不编造命令、平台或依赖。

证据边界与执行链路

作者原文负责流程事实；仓库文件负责来源和命令；流狐只补充适用场景、限制和质量判断。

skill "baoyu-diagram" {
  输入层     -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
  上下文层   -> Supported Diagram Types / Design System / Color Palette
  规则层     -> SKILL.md 触发条件 / 执行顺序 / 输出格式
  运行层     -> Node.js / Bun | 读取文件、写入/修改文件 | 主要在本地完成
  安全层     -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
  输出层     -> 可复制结果 + 检查清单 + 下一步迭代
}

解读 = 编辑凝练；译文 = 机器逐句翻译；原文 = 作者英文版本

先判断是否适合

核心用途：一段文字描述就能画一张 Mermaid 流程图 / 时序图 / 架构图——输出是文本，可放进 Markdown 随时改适合处理界面、视觉、封面、信息图或演示材料交付，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。把任…
适用任务：更适合界面、视觉、封面、信息图或演示材料交付，尤其是输入、步骤、验收口径可以反复复用的场景。
不宜硬套：如果任务只有一次性问答、来源材料很少，或需要作者没有说明的命令和外部服务，应先降级为普通对话。

作者设计意图

触发依据：使用时机、上下文收集、输出格式和失败处理共同决定它是否适合当前任务。
来源边界：作者原文负责事实，仓库文件负责命令和文件证据；Fluxly 只补充用途、限制和使用判断。

作者的方法与取舍

执行主线：任务围绕「Supported Diagram Types / Design System / Color Palette」组织，把触发条件、必要上下文、执行规则和交付标准连成一条可复核的链路。
设计重点：重点不在重复教程，而在解释作者为什么规定这些步骤、哪些条件不可省略，以及结果偏离时应回到哪一层检查。
使用判断：先确认任务与原文边界一致，再决定是否启用；来源没有说明的命令、平台和依赖保持未知，不由 Fluxly 补写。

边界和复核

依赖条件：通常不需要额外 API Key，适合先用小任务验证触发是否稳定。
权限提醒：会涉及 read / write 权限，执行前要说明可读写范围、命令边界和回退方式。
质量标准：结果应包含明确产物、必要证据和下一步动作；如果只是泛泛解释，需要补充输入和验收条件后重跑。

图表生成器

创建多种图表类型的专业 SVG 图表。所有输出都是一个独立的 .svg 文件，其中包含嵌入式样式和字体。

支持的图表类型

类型	何时使用	主要特点
架构图	系统组件及关系	分组框、连接箭头、区域边界
流程图	决策逻辑、过程步骤	菱形决策、圆角步骤框、方向流
序列图	参与者之间按时间顺序的交互	垂直生命线、水平消息、激活条
结构图	类图、ER 图、组织结构图	分隔框、类型化关系（继承、组合）
思维导图	头脑风暴、主题探索	中心节点、放射状分支、有机布局
时间轴	按时间顺序排列的事件	水平/垂直轴、事件标记、时间跨度
说明图	概念解释、比较	自由布局、图标、注释、视觉隐喻
状态机图	状态转换、生命周期	圆角状态节点、带标签的转换、开始/结束标记
数据流图	数据转换管道	处理气泡、数据存储、外部实体

设计系统

调色板

组件类别的语义颜色：

类别	填充 (rgba)	描边	用于
主要	`rgba(8, 51, 68, 0.4)`	`#22d3ee` (青色)	前端、面向用户、输入
次要	`rgba(6, 78, 59, 0.4)`	`#34d399` (翠绿)	后端、服务、处理
三级	`rgba(76, 29, 149, 0.4)`	`#a78bfa` (紫罗兰)	数据库、存储、持久化
强调	`rgba(120, 53, 15, 0.3)`	`#fbbf24` (琥珀色)	云、基础设施、区域
警报	`rgba(136, 19, 55, 0.4)`	`#fb7185` (玫瑰色)	安全、错误、警告
连接器	`rgba(251, 146, 60, 0.3)`	`#fb923c` (橙色)	总线、队列、中间件
中性	`rgba(30, 41, 59, 0.5)`	`#94a3b8` (石板灰)	外部、通用、未知
高亮	`rgba(59, 130, 246, 0.3)`	`#60a5fa` (蓝色)	活跃状态、焦点、当前步骤

对于流程图和序列图，按角色（参与者、决策、过程）而不是按技术分配颜色。

排版

使用嵌入式 SVG @font-face 或系统等宽字体回退：

<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');
  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>

按角色的字体大小：

标题： 16px，字重 700
组件名称： 11-12px，字重 600
副标签/描述： 9px，字重 400，颜色 #94a3b8
注释/备注： 8px，字重 400
小标签（在箭头上）： 7-8px

核心视觉元素

背景： #0f172a (slate-900) 带细微网格：

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#0f172a"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

箭头标记（标准）：

<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
</marker>

箭头标记（彩色）——根据需要为每种颜色创建：

<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
</marker>

开放式箭头（用于异步/返回消息）：

<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
</marker>

SVG 结构与分层

按此顺序绘制元素以获得正确的 Z 轴顺序（SVG 从后往前绘制）：

背景填充 + 网格图案
区域/组边界（虚线轮廓）
连接箭头和线条
不透明遮罩矩形（与组件框位置相同，fill="#0f172a"）
组件框（半透明填充 + 描边）
文本标签
图例（右下角或底部区域，所有边界之外）
标题块（左上角）

不透明遮罩矩形技巧至关重要——半透明组件填充会在没有它的情况下显示下面的箭头：

<!-- Mask layer: opaque background to hide arrows -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="#0f172a"/>
<!-- Visual layer: styled component -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="rgba(8,51,68,0.4)" stroke="#22d3ee" stroke-width="1.5"/>
<text x="180" y="125" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Gateway</text>
<text x="180" y="141" fill="#94a3b8" font-size="9" text-anchor="middle">Kong / Nginx</text>

间距规则

这些规则可防止重叠——请严格遵守：

组件框高度： 50-70px（标准），80-120px（大型/复杂）
组件之间最小间距： 垂直 40px，水平 30px
箭头标签间隙： 距离任何框边缘 10px
区域边界填充： 包含组件内部边缘周围 20px
图例放置： 至少在图表最低元素下方 20px
标题块： 距离左上角 20px，位于图表内容区域之外
viewBox： 始终扩展以适应所有内容 + 四周 30px 填充

组件模式

标准框（服务/进程）：

<rect x="X" y="Y" width="160" height="60" rx="6" fill="#0f172a"/>
<rect x="X" y="Y" width="160" height="60" rx="6" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
<text x="CX" y="Y+24" fill="white" font-size="11" font-weight="600" text-anchor="middle">Name</text>
<text x="CX" y="Y+40" fill="#94a3b8" font-size="9" text-anchor="middle">description</text>

决策菱形（流程图）：

<g transform="translate(CX, CY)">
  <polygon points="0,-35 50,0 0,35 -50,0" fill="#0f172a"/>
  <polygon points="0,-35 50,0 0,35 -50,0" fill="rgba(120,53,15,0.3)" stroke="#fbbf24" stroke-width="1.5"/>
  <text y="4" fill="white" font-size="10" font-weight="600" text-anchor="middle">Condition?</text>
</g>

数据库圆柱体：

<g transform="translate(X, Y)">
  <rect x="0" y="10" width="120" height="50" rx="2" fill="#0f172a"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="#0f172a"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="#0f172a"/>
  <rect x="0" y="10" width="120" height="50" fill="rgba(76,29,149,0.4)"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="0" y1="10" x2="0" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="120" y1="10" x2="120" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <text x="60" y="40" fill="white" font-size="11" font-weight="600" text-anchor="middle">PostgreSQL</text>
</g>

区域边界：

<rect x="X" y="Y" width="W" height="H" rx="12" fill="none" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
<text x="X+12" y="Y+16" fill="#fbbf24" font-size="9" font-weight="600">AWS us-east-1</text>

安全组：

<rect x="X" y="Y" width="W" height="H" rx="8" fill="none" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>
<text x="X+10" y="Y+14" fill="#fb7185" font-size="8" font-weight="500">VPC / Security Group</text>

特定类型布局指南

将此 SKILL.md 文件的目录路径确定为 {baseDir}。在开始布局之前，请阅读特定图表类型的参考文件。参考文件位于 {baseDir}/references/，包含详细的布局算法和示例。

架构图

→ 阅读 {baseDir}/references/architecture.md

要点：从左到右或从上到下的数据流。在区域边界内对相关服务进行分组。在层之间使用总线/连接器。将数据库放置在底部或右侧。

流程图

→ 阅读 {baseDir}/references/flowchart.md

要点：从上到下的主要流程。菱形表示决策，出口箭头上带有 Yes/No 标签。圆角矩形表示开始/结束。使用高亮颜色表示「快乐路径」。

序列图

→ 阅读 {baseDir}/references/sequence.md

要点：参与者作为顶部的框，垂直虚线生命线，水平箭头表示消息（实线=同步，虚线=返回）。时间向下流动。激活条显示处理过程。如果复杂，请对消息进行编号。

结构图

→ 阅读 {baseDir}/references/structural.md

要点：分隔框（类图的名称/属性/方法）。关系线：实线带实心菱形=组合，实线带空心菱形=聚合，虚线箭头=依赖，实心三角形=继承。

思维导图

从中心概念辐射的自由布局。使用有机曲线（带三次贝塞尔曲线的 <path>）作为分支。使用调色板改变分支颜色。中心节点字体较大，向外逐渐减小。

时间轴

水平或垂直轴线。事件标记为轴上的圆形或菱形。描述文本交替偏移以避免重叠。使用颜色对事件类型进行分类。

状态机图

圆角矩形状态，复合状态使用双边框。实心圆表示初始状态，靶心表示最终状态。自转换使用弯曲箭头。所有转换都以 event [guard] / action 格式标记。

输出规则

输出一个独立的 .svg 文件——除了 Google Fonts 导入之外，没有外部依赖
设置 viewBox 以适应所有内容并留有 30px 填充；不要设置固定的 width/height 属性（让 SVG 响应式缩放）
在根 <svg> 元素上包含 xmlns="http://www.w3.org/2000/svg"
将所有 <style>、<defs>、标记和图案放在 SVG 的顶部
使用 text-anchor="middle" 进行居中标签；确保文本不溢出框
中文文本支持： 当标签包含中文字符时，使用 font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif' 并增加框的宽度——CJK 字符更宽
保存位置： 如果输入是文件，保存到 {inputFileDir}/diagram/。否则保存到 {projectDir}/diagram/{topic-slug}/。如果目录不存在，则创建它。

脚本

将此 SKILL.md 文件的目录路径确定为 {baseDir}。脚本路径：{baseDir}/scripts/main.ts。

解析 ${BUN_X} 运行时：如果安装了 bun → bun；如果 npx 可用 → npx -y bun；否则建议安装 bun。

SVG → @2x PNG

保存 SVG 后，将其转换为 @2x PNG：

${BUN_X} {baseDir}/scripts/main.ts <svg-path> [options]

选项：

-s, --scale <n> — 缩放因子（默认值：2）
-o, --output <path> — 自定义输出路径（默认值：<input>@2x.png）
--json — JSON 输出

流程

从用户的请求中识别图表类型
如果该类型存在相关参考文件，则读取该文件
规划布局：列出所有组件，确定分组和流向，计算位置
按照上述分层顺序编写 SVG
验证间距规则——无重叠，图例在边界之外，viewBox 足够大
保存 SVG 文件
运行 ${BUN_X} {baseDir}/scripts/main.ts <svg-path> 生成 @2x PNG
将两个文件呈现给用户

Diagram Generator

Create professional SVG diagrams across multiple diagram types. All output is a single self-contained .svg file with embedded styles and fonts.

Supported Diagram Types

Type	When to Use	Key Characteristics
Architecture	System components & relationships	Grouped boxes, connection arrows, region boundaries
Flowchart	Decision logic, process steps	Diamond decisions, rounded step boxes, directional flow
Sequence	Time-ordered interactions between actors	Vertical lifelines, horizontal messages, activation bars
Structural	Class diagrams, ER diagrams, org charts	Compartmented boxes, typed relationships (inheritance, composition)
Mind Map	Brainstorming, topic exploration	Central node, radiating branches, organic layout
Timeline	Chronological events	Horizontal/vertical axis, event markers, period spans
Illustrative	Conceptual explanations, comparisons	Free-form layout, icons, annotations, visual metaphors
State Machine	State transitions, lifecycle	Rounded state nodes, labeled transitions, start/end markers
Data Flow	Data transformation pipelines	Process bubbles, data stores, external entities

Design System

Color Palette

Semantic colors for component categories:

Category	Fill (rgba)	Stroke	Use For
Primary	`rgba(8, 51, 68, 0.4)`	`#22d3ee` (cyan)	Frontend, user-facing, inputs
Secondary	`rgba(6, 78, 59, 0.4)`	`#34d399` (emerald)	Backend, services, processing
Tertiary	`rgba(76, 29, 149, 0.4)`	`#a78bfa` (violet)	Database, storage, persistence
Accent	`rgba(120, 53, 15, 0.3)`	`#fbbf24` (amber)	Cloud, infrastructure, regions
Alert	`rgba(136, 19, 55, 0.4)`	`#fb7185` (rose)	Security, errors, warnings
Connector	`rgba(251, 146, 60, 0.3)`	`#fb923c` (orange)	Buses, queues, middleware
Neutral	`rgba(30, 41, 59, 0.5)`	`#94a3b8` (slate)	External, generic, unknown
Highlight	`rgba(59, 130, 246, 0.3)`	`#60a5fa` (blue)	Active state, focus, current step

For flowcharts and sequence diagrams, assign colors by role (actor, decision, process) rather than by technology.

Typography

Use embedded SVG @font-face or system monospace fallback:

<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');
  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>

Font sizes by role:

Title: 16px, weight 700
Component name: 11-12px, weight 600
Sublabel / description: 9px, weight 400, color #94a3b8
Annotation / note: 8px, weight 400
Tiny label (on arrows): 7-8px

Core Visual Elements

Background: #0f172a (slate-900) with subtle grid:

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#0f172a"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

Arrowhead marker (standard):

<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
</marker>

Arrowhead marker (colored) — create per-color as needed:

<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
</marker>

Open arrowhead (for async/return messages):

<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
</marker>

SVG Structure & Layering

Draw elements in this order to get correct z-ordering (SVG paints back-to-front):

Background fill + grid pattern
Region/group boundaries (dashed outlines)
Connection arrows and lines
Opaque masking rects (same position as component boxes, fill="#0f172a")
Component boxes (semi-transparent fill + stroke)
Text labels
Legend (bottom-right or bottom area, outside all boundaries)
Title block (top-left)

The opaque masking rect trick is essential — semi-transparent component fills will show arrows underneath without it:

<!-- Mask layer: opaque background to hide arrows -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="#0f172a"/>
<!-- Visual layer: styled component -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="rgba(8,51,68,0.4)" stroke="#22d3ee" stroke-width="1.5"/>
<text x="180" y="125" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Gateway</text>
<text x="180" y="141" fill="#94a3b8" font-size="9" text-anchor="middle">Kong / Nginx</text>

Spacing Rules

These prevent overlapping — follow them strictly:

Component box height: 50-70px (standard), 80-120px (large/complex)
Minimum gap between components: 40px vertical, 30px horizontal
Arrow label clearance: 10px from any box edge
Region boundary padding: 20px inside edges around contained components
Legend placement: At least 20px below the lowest diagram element
Title block: 20px from top-left, outside diagram content area
viewBox: Always extend to fit all content + 30px padding on all sides

Component Patterns

Standard box (service/process):

<rect x="X" y="Y" width="160" height="60" rx="6" fill="#0f172a"/>
<rect x="X" y="Y" width="160" height="60" rx="6" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
<text x="CX" y="Y+24" fill="white" font-size="11" font-weight="600" text-anchor="middle">Name</text>
<text x="CX" y="Y+40" fill="#94a3b8" font-size="9" text-anchor="middle">description</text>

Decision diamond (flowchart):

<g transform="translate(CX, CY)">
  <polygon points="0,-35 50,0 0,35 -50,0" fill="#0f172a"/>
  <polygon points="0,-35 50,0 0,35 -50,0" fill="rgba(120,53,15,0.3)" stroke="#fbbf24" stroke-width="1.5"/>
  <text y="4" fill="white" font-size="10" font-weight="600" text-anchor="middle">Condition?</text>
</g>

Database cylinder:

<g transform="translate(X, Y)">
  <rect x="0" y="10" width="120" height="50" rx="2" fill="#0f172a"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="#0f172a"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="#0f172a"/>
  <rect x="0" y="10" width="120" height="50" fill="rgba(76,29,149,0.4)"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="0" y1="10" x2="0" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="120" y1="10" x2="120" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <text x="60" y="40" fill="white" font-size="11" font-weight="600" text-anchor="middle">PostgreSQL</text>
</g>

Region boundary:

<rect x="X" y="Y" width="W" height="H" rx="12" fill="none" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
<text x="X+12" y="Y+16" fill="#fbbf24" font-size="9" font-weight="600">AWS us-east-1</text>

Security group:

<rect x="X" y="Y" width="W" height="H" rx="8" fill="none" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>
<text x="X+10" y="Y+14" fill="#fb7185" font-size="8" font-weight="500">VPC / Security Group</text>

Type-Specific Layout Guidance

Determine this SKILL.md file's directory path as {baseDir}. Read the reference file for the specific diagram type before starting layout. Reference files are located at {baseDir}/references/ and contain detailed layout algorithms and examples.

Architecture Diagrams

→ Read {baseDir}/references/architecture.md

Key points: left-to-right or top-to-bottom data flow. Group related services in region boundaries. Use buses/connectors between layers. Place databases at the bottom or right.

Flowcharts

→ Read {baseDir}/references/flowchart.md

Key points: top-to-bottom primary flow. Diamonds for decisions with Yes/No labels on exit arrows. Rounded rectangles for start/end. Use the Highlight color for the happy path.

Sequence Diagrams

→ Read {baseDir}/references/sequence.md

Key points: actors as boxes at top, vertical dashed lifelines, horizontal arrows for messages (solid=sync, dashed=return). Time flows downward. Activation bars show processing. Number messages if complex.

Structural Diagrams

→ Read {baseDir}/references/structural.md

Key points: compartmented boxes (name / attributes / methods for class diagrams). Relationship lines: solid with filled diamond=composition, solid with empty diamond=aggregation, dashed arrow=dependency, solid triangle=inheritance.

Mind Maps

Free-form radiating layout from a central concept. Use organic curves (<path> with cubic beziers) for branches. Vary branch colors using the palette. Larger font for central node, decreasing as you go outward.

Timelines

Horizontal or vertical axis line. Event markers as circles or diamonds on the axis. Description text offset to alternating sides to avoid overlap. Use color to categorize event types.

State Machines

Rounded-rect states with double-border for composite states. Filled circle for initial state, bullseye for final state. Curved arrows for self-transitions. Label all transitions with event [guard] / action format.

Output Rules

Output a single .svg file — no external dependencies except the Google Fonts import
Set viewBox to fit all content with 30px padding; do NOT set fixed width/height attributes (let the SVG scale responsively)
Include xmlns="http://www.w3.org/2000/svg" on the root <svg> element
Put all <style>, <defs>, markers, and patterns at the top of the SVG
Use text-anchor="middle" for centered labels; ensure text doesn't overflow boxes
Chinese text support: When labels contain Chinese characters, use font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif' and increase box widths — CJK characters are wider
Save location: If the input is a file, save to {inputFileDir}/diagram/. Otherwise save to {projectDir}/diagram/{topic-slug}/. Create the directory if it doesn't exist

Script

Determine this SKILL.md file's directory path as {baseDir}. Script path: {baseDir}/scripts/main.ts.

Resolve ${BUN_X} runtime: if bun installed → bun; if npx available → npx -y bun; else suggest installing bun.

SVG → @2x PNG

After saving the SVG, convert it to a @2x PNG:

${BUN_X} {baseDir}/scripts/main.ts <svg-path> [options]

Options:

-s, --scale <n> — Scale factor (default: 2)
-o, --output <path> — Custom output path (default: <input>@2x.png)
--json — JSON output

Process

Identify the diagram type from the user's request
Read the relevant reference file if one exists for that type
Plan the layout: list all components, determine grouping and flow direction, calculate positions
Write the SVG following the layering order above
Verify spacing rules — no overlaps, legends outside boundaries, viewBox large enough
Save the SVG file
Run ${BUN_X} {baseDir}/scripts/main.ts <svg-path> to generate @2x PNG
Present both files to the user

安装命令

一键复制安装选择包管理器,点击右侧复制,粘贴到终端回车即可

npx skills add JimLiu/baoyu-skills/skills/baoyu-diagram -y

查看通用安装教程

查看 Skill 原文

兼容工具

Claude Code
Cursor
Cline
Codex
Windsurf
Gemini
OpenCode
Roo Code
AAide
+Augment
GitHub Copilot
OpenClaw
KKiro
Junie
WWarp
Goose
Trae
Kilo Code
OpenHands
Amp
Zencoder
CContinue
AIAider
CodeBuddy
CodeGeeX
Replit Agent

安全审计

92 / 100

已审计

未声明 license/许可。
未限定 allowed-tools，默认拥有全部工具权限。

元信息

来源: local
JimLiu/baoyu-skills
版本: 1.117.3
English

@JimLiu 的其他技能

分类与标签

分类设计与多媒体

先判断是否适合

作者设计意图

作者的方法与取舍

边界和复核

图表生成器

支持的图表类型

设计系统

调色板

排版

核心视觉元素

SVG 结构与分层

间距规则

组件模式

特定类型布局指南

架构图

流程图

序列图

结构图

思维导图

时间轴

状态机图

输出规则

脚本

SVG → @2x PNG

流程

Diagram Generator

Supported Diagram Types

Design System

Color Palette

Typography

Core Visual Elements

SVG Structure & Layering

Spacing Rules

Component Patterns

Type-Specific Layout Guidance

Architecture Diagrams

Flowcharts

Sequence Diagrams

Structural Diagrams

Mind Maps

Timelines

State Machines

Output Rules

Script

SVG → @2x PNG

Process

讨论