Illustrative cover generated by us — see the source repo for real examples.
How to use
- 1
Copy the install prompt
Sign in, then click the black button. One click, done.
- 2
Paste it to your agent
Send it in Claude Code, Codex, Cursor or similar. It installs itself.
- 3
Ask in one sentence
Say what you want, like below, and the agent follows this skill.
/baoyu-diagram make me: Dark-themed SVG architecture diagrams, flowcharts, timelines and mind mapsExample message showing how to invoke it, not a real output.
What you get
- Hand-tuned SVG you can edit and version
- Many diagram types from one skill
- Dark theme that reads well in docs and slides
Good fit
- Dark-themed SVG architecture diagrams, flowcharts, timelines and mind maps
Not for
- Editable diagrams in draw.io or Figma
- License
- MIT
- Author
- @JimLiu
- Source
- jimliu/baoyu-skills/skills/baoyu-diagram · ★ 26,360
Upstream description
Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. 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,…
Other ways to install
Prefer doing it yourself? These commands do the same as the button.
Read https://skilloop.dev/skills/baoyu-diagram/install.md and follow the instructions to install the skill.
npx skills add https://github.com/jimliu/baoyu-skills/tree/main/skills/baoyu-diagram -g -a claude-code
npx skills add https://github.com/jimliu/baoyu-skills/tree/main/skills/baoyu-diagram -g -a codex
git clone --depth 1 https://github.com/jimliu/baoyu-skills.git /tmp/baoyu-skills mkdir -p ~/.claude/skills && cp -r /tmp/baoyu-skills/skills/baoyu-diagram ~/.claude/skills/baoyu-diagram
Original work by its authors, redistributed under its license. We only link and describe it.
Related skills
Data Report Page
Turn a CSV, Excel or JSON file into a polished visual report page with charts and key takeaways.
Skill Creator
Create, edit and benchmark your own Agent Skills — including evals and description tuning for better triggering.
Brainstorming Before Building
Makes your coding agent clarify intent, requirements and design with you before it writes any code.
Systematic Debugging
A four-phase debugging discipline: find the root cause before proposing fixes, for any bug or failing test.