# Baoyu Diagram

Create professional diagrams with configurable dark/light theme via CSS custom properties.

- Repository: https://github.com/JimLiu/baoyu-skills (27159 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add JimLiu/baoyu-skills --skill baoyu-diagram -g -a claude-code -y`
Codex: `npx skills add JimLiu/baoyu-skills --skill baoyu-diagram -g -a codex -y`
Cursor: `npx skills add JimLiu/baoyu-skills --skill baoyu-diagram -g -a cursor -y`
Gemini CLI: `npx skills add JimLiu/baoyu-skills --skill baoyu-diagram -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add JimLiu/baoyu-skills`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

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

The rest: https://github.com/JimLiu/baoyu-skills/blob/HEAD/skills/baoyu-diagram/SKILL.md