Skip to content
Get packs

SVG Diagram Generator

Turns descriptions of systems, flows, and sequences into dark-themed SVG diagram files

Source Download skill
Repository
JimLiu/baoyu-skills
Stars
27,191
Licence
MIT
Files
13 files

What it does

Once installed, the agent can produce professional-looking technical diagrams such as architecture diagrams, flowcharts, sequence diagrams, class and ER diagrams, mind maps and timelines, saved as a single standalone .svg file. It follows a built-in visual style (dark background, colour-coded components, consistent fonts and spacing) so the output looks consistent. A bundled script can also convert the SVG to PNG at a chosen scale.

Great for

  • Developers who want to quickly illustrate a system architecture or data flow for a doc or pull request
  • Students or teachers producing clean conceptual diagrams from a text explanation
  • Anyone who wants a consistent dark-style diagram without designing it by hand

Skip it if

  • Final brand or print artwork that needs precise manual control, since layout is generated from rules and may need tweaking
  • Confidential architecture details if the SVG pulls in online fonts, because the output references a Google Fonts URL when rendered

Try asking

  • “Draw me an architecture diagram of our API gateway, auth service, and Postgres database”
  • “Make a flowchart of the checkout process with decision points for payment failure”
  • “Create a sequence diagram showing how a browser, server, and OAuth provider exchange tokens”
  • “Turn this project README into a mind map diagram”
Step-by-step guide: how to use SVG Diagram GeneratorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 13 original files, the MIT licence and an attribution note.

    baoyu-diagram.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip baoyu-diagram.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip baoyu-diagram.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Describe the components, their relationships, and the diagram type you want, and name any groups or regions explicitly for a cleaner layout.
  • Ask for a PNG export only when you need it; the SVG is the primary output.
  • Review the generated SVG in a browser, since automatic spacing may occasionally cause overlaps that need a follow-up request.

What's inside

  • references/architecture.md
  • references/flowchart.md
  • references/sequence.md
  • references/structural.md
  • scripts/flatten-vars.ts
  • scripts/main.ts
  • scripts/package.json
  • scripts/theme-switch.ts
  • scripts/themes.test.ts
  • scripts/themes.ts
  • SKILL.md
  • themes/dark.json
  • themes/light.json

Redistributed unmodified from JimLiu/baoyu-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.