Individual skill
baoyu-diagram
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.
skills/baoyu-diagram/SKILL.md
Source commit b436d6bb494c8731c8181783f75fdc5c28013912
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Not checked yet
- Last checked
- Nov 4, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 991
- Repository last updated
- Nov 8, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- ai-skills Repository topic
- workflows Repository topic
- skills Repository topic
- anthropic-skills Repository topic
- planning Repository topic
- superpowers Repository topic
- context-engineering Repository topic
- ui-ux-design Repository topic
- ai-agents Repository topic
- claude-code Repository topic
- data Derived category
- design Derived category
- operations Derived category
- writing Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 16,177 bytesSKILL.mdcore · 16,177 bytesSKILL.mdcore · 16,177 bytesSKILL.mdcore · 16,177 bytesSKILL.mdcore · 16,177 bytesSKILL.mdcore · 16,177 bytesSKILL.mdcore · 16,177 bytesreferences/architecture.mddoc · 3,142 bytesreferences/flowchart.mddoc · 2,353 bytesreferences/sequence.mddoc · 4,029 bytesreferences/structural.mddoc · 3,893 bytesscripts/bun.lockasset · 8,283 bytesscripts/flatten-vars.tsruns · 1,348 bytesscripts/main.tsruns · 5,429 bytesscripts/package.jsonruns · 104 bytesscripts/theme-switch.tsruns · 7,260 bytesscripts/themes.test.tsruns · 2,928 bytesscripts/themes.tsruns · 4,223 bytesthemes/dark.jsonasset · 958 bytesthemes/light.jsonasset · 978 bytes
Read excerpt
# 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` |