Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Baoyu Diagram Generator

Generates professional dark-themed SVG diagrams — architecture, flowcharts, sequence, mind maps and more — as a single self-contained file.

Design & UIBeginner★ 26,102⑂ 2,884AI score 10/10Last updated: Sep 10, 2026

What it does

  • Covers nine diagram types: architecture, flowchart, sequence, structural (class/ER/org), mind map, timeline, state machine, data flow, and illustrative/conceptual.
  • Enforces one consistent design system: slate-900 background with a grid, semantic color palette (frontend = cyan, backend = emerald, storage = violet, alerts = rose), and JetBrains Mono typography.
  • Ships hard layout rules — 40px minimum vertical gaps, legend placement, 30px viewBox padding — plus practical SVG tricks like the opaque masking rect that hides arrows behind semi-transparent boxes.
  • Saves a single dependency-free .svg, then runs a bundled script to produce a @2x PNG.

Who it's for

  • Developers, architects and technical writers who regularly need diagrams for design docs, blog posts or slide decks.
  • Anyone frustrated by plain Mermaid output who wants presentation-grade visuals.
  • Teams producing diagrams with CJK labels (dedicated font stack and wider box rules included).

Example uses

  1. "Draw our AWS architecture" → SVG with dashed region boundaries, VPC/security-group outlines and database cylinders.
  2. "Turn this payment approval logic into a flowchart" → decision diamonds with Yes/No edge labels and the happy path highlighted.
  3. "Show the OAuth login flow as a sequence diagram" → actor boxes, vertical lifelines, solid sync arrows and dashed return arrows.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/JimLiu/baoyu-skills/HEAD/skills/baoyu-diagram/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

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 /tmp/baoyu-skills && mkdir -p ~/.claude/skills && cp -r /tmp/baoyu-skills/skills/baoyu-diagram ~/.claude/skills/

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

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/JimLiu/baoyu-skills.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the whole skill directory (the references/ and scripts/ subfolders matter): cp -r baoyu-skills/skills/baoyu-diagram ~/.claude/skills/
  5. For PNG export, install bun: curl -fsSL https://bun.sh/install | bash (skip if you already have npx).
  6. Restart Claude Code and ask something like "draw an architecture diagram of this system" — the skill triggers automatically.
View source on GitHub ↗License: MIT