baoyu-diagram

1# Diagram Generator
2 
3Create SVG diagrams. Each SVG embeds its own styles, uses CSS custom properties for theming, and loads nothing over the network.
4 
5## Output Files
6 
7For a diagram saved as `<name>.svg`, produce exactly these files:
8 
9| File | What it is | Made by |
10|------|-----------|---------|
11| `<name>.svg` | Source SVG, CSS variables with dark theme values | You (the LLM) |
12| `<name>.light.svg` | Same markup with light theme values | `theme-switch.ts --theme=light` |
13| `<name>@2x.png` | Dark PNG at 2x scale | `main.ts` |
14| `<name>.light@2x.png` | Light PNG at 2x scale | `main.ts --theme light` |
15 
16If the user asks for only one theme, or only SVG, produce just those files.
17 
18## Themes
19 
20All 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.
21 
22Theme 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`.
23 
24**Custom themes:** drop a new `.json` into `themes/` — no script changes needed:
25 
26```json
27// themes/my-brand.json
28{
29  "description": "Corporate brand theme",
30  "--bg": "#ffffff",
31  "--text": "#1a1a2e",
32  "--text-muted": "#6b7280",
33  "--arrow": "#9ca3af",
34  "--color-primary-fill": "rgba(37,99,235,0.12)",
35  "--color-primary-stroke": "#2563eb",
36…