Baoyu Diagram

This is a comprehensive diagram generator that outputs professional, dark-themed SVG files for architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and more. It comes with a complete design system including semantic color palettes (cyan for frontend, emerald for backend, violet for databases), embedded JetBrains Mono typography, and strict spacing rules to prevent overlapping elements. The implementation details are thorough, covering z-index layering tricks, SVG patterns for grid backgrounds, and reusable component templates for common shapes like decision diamonds and database cylinders. It's built for technical documentation and system design work where you need consistent, readable diagrams without reaching for specialized tools. The dark theme and monospace fonts give it a distinctly developer-focused aesthetic.

skills.sh installs: 15.9K
GitHub stars: 27.4K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add jimliu/baoyu-skills --skill baoyu-diagram --agent claude-code

Installs into .claude/skills of the current project.

Files

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`

If the user asks for only one theme, or only SVG, produce just those files.

Themes

All colors are CSS custom properties defined in the :root block of the SVG's <style>; markup references them as var(--bg), var(--color-primary-fill), etc. Never hardcode color values in SVG attributes.

Theme values live in {baseDir}/themes/<name>.json — one flat JSON object mapping CSS property names (keys starting with --) to colors. Other keys (e.g. "description") are metadata, ignored by scripts. Built-in: dark.json, light.json.

SKILL.md on GitHub