/baoyu-diagram

name: baoyu-diagram
description: Create professional diagrams with configurable dark/light theme via CSS custom properties. 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. Outputs a dark-theme SVG, a light-theme SVG, and a @2x PNG of each.
version: 1.118.0

Diagram Generator

Create SVG diagrams. Each SVG embeds its own styles, uses CSS custom properties for theming, and loads nothing over the network.

Output Files

For a diagram saved as `<name>.svg`, produce exactly these files:

| File | What it is | Made by | |------|-----------|---------| | `<name>.svg` | Source SVG, CSS variables with dark theme values | You (the LLM) | | `<name>.light.svg` | Same markup with light theme values | `theme-switch.ts --theme=light` | | `<name>@2x.png` | Dark PNG at 2x scale | `main.ts` | | `<name>.light@2x.png` | Light PNG at 2x scale | `main.ts --theme light` |

If the user asks for only one theme, or only SVG, produce just those files.

Themes

All colors are CSS custom properties defined in the `:root` block of the SVG's `<style>`; markup references them as `var(--bg)`, `var(--color-primary-fill)`, etc. Never hardcode color values in SVG attributes.

Theme values live in `{baseDir}/themes/<name>.json` — one flat JSON object mapping CSS property names (keys starting with `--`) to colors. Other keys (e.g. `"description"`) are metadata, ignored by scripts. Built-in: `dark.json`, `light.json`.

**Custom themes:** drop a new `.json` into `themes/` — no script changes needed:

// themes/my-brand.json
{
  "description": "Corporate brand theme",
  "--bg": "#ffffff",
  "--text": "#1a1a2e",
  "--text-muted": "#6b7280",
  "--arrow": "#9ca3af",
  "--color-primary-fill": "rgba(37,99,235,0.12)",
  "--color-primary-stroke": "#2563eb",
  "--color-secondary-fill": "rgba(22,163,74,0.12)",
  "--color-secondary-stroke": "#16a34a"
}

Apply with `--theme=my-brand` (`theme-switch.ts`, `main.ts` and `flatten-vars.ts` all support it). Variables omitted from a custom theme are not replaced. When generating SVGs for a custom theme, use its values in the `:root` block.

CSS Custom Properties

| Variable | Dark Theme Default | Light Theme Value | Usage | |----------|-------------------|-------------------|-------| | `--bg` | `#0f172a` | `#f8fafc` | Page background | | `--bg-grid` | `#1e293b` | `#e2e8f0` | Grid pattern stroke | | `--mask` | `#0f172a` | `#f8fafc` | Opaque mask fill (same as --bg) | | `--text` | `white` | `#0f172a` | Primary text color | | `--text-muted` | `#94a3b8` | `#475569` | Secondary/sublabel text | | `--arrow` | `#64748b` | `#64748b` | Arrow/connector lines (unchanged) | | `--color-primary-fill` | `rgba(8,51,68,0.4)` | `rgba(6,182,212,0.12)` | Frontend, user-facing, inputs | | `--color-primary-stroke` | `#22d3ee` | `#0891b2` | Primary border | | `--color-secondary-fill` | `rgba(6,78,59,0.4)` | `rgba(5,150,105,0.12)` | Backend, services, processing | | `--color-secondary-stroke` | `#34d399` | `#059669` | Secondary border | | `--color-tertiary-fill` | `rgba(76,29,149,0.4)` | `rgba(124,58,237,0.12)` | Database, storage, persistence | | `--color-tertiary-stroke` | `#a78bfa` | `#7c3aed` | Tertiary border | | `--color-accent-fill` | `rgba(120,53,15,0.3)` | `rgba(217,119,6,0.12)` | Cloud, infrastructure, regions | | `--color-accent-stroke` | `#fbbf24` | `#d97706` | Accent border | | `--color-alert-fill` | `rgba(136,19,55,0.4)` | `rgba(225,29,72,0.12)` | Security, errors, warnings | | `--color-alert-stroke` | `#fb7185` | `#e11d48` | Alert border | | `--color-connector-fill` | `rgba(251,146,60,0.3)` | `rgba(234,88,12,0.12)` | Buses, queues, middleware | | `--color-connector-stroke` | `#fb923c` | `#ea580c` | Connector border | | `--color-neutral-fill` | `rgba(30,41,59,0.5)` | `rgba(100,116,139,0.12)` | External, generic, unknown | | `--color-neutral-stroke` | `#94a3b8` | `#64748b` | Neutral border | | `--color-highlight-fill` | `rgba(59,130,246,0.3)` | `rgba(59,130,246,0.12)` | Active state, focus, current step | | `--color-highlight-stroke` | `#60a5fa` | `#3b82f6` | Highlight border |

Design System

Typography

Use a locally installed monospace font stack. Do not `@import` web fonts or reference any remote resource: the SVG must render the same offline, and the PNG converter cannot fetch fonts.

<style>
  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Noto Sans Mono', 'DejaVu Sans Mono', monospace; }
</style>

Font sizes by role:

• **Title:** 16px, weight 700, fill: `var(--text)`
• **Component name:** 11-12px, weight 600, fill: `var(--text)`
• **Sublabel / description:** 9px, weight 400, fill: `var(--text-muted)`
• **Annotation / note:** 8px, weight 400
• **Tiny label (on arrows):** 7-8px

Core Visual Elements

**Background + Grid:**

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--bg-grid)" stroke-width="0.5"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="var(--bg)"/>
<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="var(--arrow)"/>
</marker>

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

<marker id="arrow-primary" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="var(--color-primary-stroke)"/>
</marker>

**Open arrowhead (for async/return messages):**

<marker id="arrow-open" mark