Baoyu Diagram
Create professional diagrams with configurable dark/light theme via CSS custom properties.
Install
npx skills add JimLiu/baoyu-skills --skill baoyu-diagram -g -a claude-code -y- Repository
- JimLiu/baoyu-skills27.2k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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.
Diagram Generator
Create professional SVG diagrams across multiple diagram types. Each SVG embeds its own styles and uses CSS custom properties for theme switching; it loads nothing over the network.
Output Files
For a diagram saved as <name>.svg, the skill produces 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.
Theme System (CSS Custom Properties)
All colors in the SVG are controlled via CSS custom properties (CSS variables) defined in the :root block of the <style> element. To switch between dark and light themes, run:
bun {baseDir}/scripts/theme-switch.ts <svg-path> --theme=light [--output=<path>]
This produces a light-themed SVG without modifying the original dark-themed source. The LLM should always generate SVGs using CSS variable references (e.g., var(--bg), var(--color-primary-fill)) instead of hardcoded color values.
Theme Files ({baseDir}/themes/)
Theme color values live in {baseDir}/themes/<name>.json, one flat JSON object per theme, mapping CSS custom property names (keys starting with --) to color values. Other keys (e.g. "description") are allowed as metadata and ignored by the scripts. Built-in themes: dark.json, light.json.
Custom themes: anyone can extend the skill by dropping a new .json file into themes/, no script changes needed:
