baoyu-diagram – Design & UI skill for AI agents

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, proce

Design & UISKILL.mdClaude Code · Codex · Hermes · DeepSeek

Install the baoyu-diagram skill with one command

Pick the tool you use, copy the command and paste it in your terminal. The skill lands in that tool's skills folder and is ready in your next session.

Claude Code

mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/baoyu-diagram-9e895.tgz | tar xz -C ~/.claude/skills

Call it in Claude Code: /baoyu-diagram – then describe the task you want done.

Codex

mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/baoyu-diagram-9e895.tgz | tar xz -C ~/.codex/skills

Call it in Codex: $baoyu-diagram – then describe the task you want done.

Hermes Agent

mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/baoyu-diagram-9e895.tgz | tar xz -C ~/.hermes/skills

Call it in Hermes Agent: /baoyu-diagram – then describe the task you want done.

DeepSeek

mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/baoyu-diagram-9e895.tgz | tar xz -C ~/.deepcode/skills

Call it in DeepSeek: /baoyu-diagram – then describe the task you want done.

SKILL.md content

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:

|----------|-------------|--------|---------|

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):

1. Background fill + grid pattern

2. Region/group boundaries (dashed outlines)

3. Connection arrows and lines

4. Opaque masking rects (same position as component boxes, fill="#0f172a")

5. Component boxes (semi-transparent fill + stroke)

6. Text labels

7. Legend (bottom-right or bottom area, outside all boundaries)

8. 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 con

… (full content is in the download package)

Related skills

img2threejs – Turn an object or character reference image into a quality-gated, animation-ready…
architecture-diagram – Dark-themed SVG architecture/cloud/infra diagrams as HTML.
hatch-pet – Create, repair, validate, visually QA, and package Codex-compatible animated pets and…
ip-as-logo – Generate extremely simple, cute, personified square character images with rounded heavy…
ascii-art – ASCII art: pyfiglet, cowsay, boxes, image-to-ascii.
cellprofiler – Runs reproducible CellProfiler microscopy pipelines for nuclear segmentation, cell…
imagegen – Generate or edit raster images when the task benefits from AI-created bitmap visuals…
auteur – Design and build cinematic, award-level web pages.

← Browse all skills