Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Baoyu Diagram (SVG Diagram Generator)

Generates professional dark-themed, self-contained SVG diagrams across nine types — architecture, flowchart, sequence, mind map, timeline and more.

Design & UIIntermediate★ 24,749⑂ 2,764AI score 8/10Last updated: Jul 4, 2026

What it does

Detects which diagram type your request needs and renders it as a single self-contained .svg file with embedded styles, markers and patterns.

  • Types covered: architecture, flowchart, sequence, structural (class/ER/org), mind map, timeline, illustrative/conceptual, state machine, data flow
  • Dark slate canvas with a subtle grid, plus a semantic palette (cyan = frontend, emerald = backend, violet = storage, rose = security, amber = infra regions)
  • Hard spacing rules (box heights, minimum gaps, legend placement, viewBox padding) so elements don't overlap
  • Uses an opaque "mask rect" layer so arrows never bleed through semi-transparent component boxes
  • Converts the saved SVG to an @2x PNG via scripts/main.ts

Who it's for

  • Engineers who need decent diagrams for design docs, READMEs and tech blogs without opening Figma
  • Tech leads and architects who want presentation-grade visuals instead of default Mermaid output
  • PMs and DevRel folks turning meeting notes or specs into visuals on the spot

Example uses

  1. "Diagram our AWS setup: ALB, three ECS services, RDS, Redis, S3" → architecture SVG with dashed region boundaries and layered data flow, plus an @2x PNG
  2. "Flowchart the payment retry logic" → decision diamonds with Yes/No edge labels and the happy path drawn in the highlight color
  3. Attach a spec .md and ask "turn the login flow into a sequence diagram" → lifelines, activation bars, saved into a diagram/ folder next to the input file

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/baoyu-diagram folder from the GitHub repo JimLiu/baoyu-skills into my ~/.claude/skills/baoyu-diagram/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/JimLiu/baoyu-skills.git && mkdir -p ~/.claude/skills && cp -r baoyu-skills/skills/baoyu-diagram ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal (Terminal on macOS/Linux, WSL or Git Bash on Windows).
  2. Create the skills folder if needed: mkdir -p ~/.claude/skills
  3. Clone the repository: git clone https://github.com/JimLiu/baoyu-skills.git
  4. Copy just this skill: cp -r baoyu-skills/skills/baoyu-diagram ~/.claude/skills/
  5. Optional, for PNG export: install bun with curl -fsSL https://bun.sh/install | bash; otherwise the skill falls back to npx -y bun.
  6. Restart Claude Code and try a prompt like "draw me an architecture diagram of this repo".
  7. Output lands in a diagram/ folder as a .svg file plus an @2x.png.
View source on GitHub ↗License: MIT