Loading
Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more.
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
npx skills add JimLiu/baoyu-skills --skill baoyu-diagram -a cursor -y
Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system, process flow, data flow, component relationship, network topology, decision tree, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Output is always a standalone .svg file.
Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system, process flow, data flow, component relationship, network topology, decision tree, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Output is always a standalone .svg file.
Create professional SVG diagrams across multiple diagram types. All output is a single self-contained .svg file with embedded styles and fonts.
| 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 |
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.
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&display=swap');
text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>
Font sizes by role:
#94a3b8Background: #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>
Draw elements in this order to get correct z-ordering (SVG paints back-to-front):
fill="#0f172a")The opaque masking rect trick is essential — semi-transparent component fills will show arrows underneath without it:
<rect x="100" y="100" width="160" height="60" rx="6" fill="#0f172a"/>
<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>
These prevent overlapping — follow them strictly:
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>
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.
→ 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.
→ 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.
→ 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.
→ 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.
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.
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.
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.
.svg file — no external dependencies except the Google Fonts importviewBox to fit all content with 30px padding; do NOT set fixed width/height attributes (let the SVG scale responsively)xmlns="http://www.w3.org/2000/svg" on the root <svg> element<style>, <defs>, markers, and patterns at the top of the SVGtext-anchor="middle" for centered labels; ensure text doesn't overflow boxesfont-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif' and increase box widths — CJK characters are wider{inputFileDir}/diagram/. Otherwise save to {projectDir}/diagram/{topic-slug}/. Create the directory if it doesn't existDetermine 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.
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${BUN_X} {baseDir}/scripts/main.ts <svg-path> to generate @2x PNG