baoyu-diagram
Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diag…
What it does
- Title: 16px, weight 700
- Component name: 11-12px, weight 600
- Sublabel / description: 9px, weight 400, color #94a3b8
- Annotation / note: 8px, weight 400
- Tiny label (on arrows): 7-8px
- Component box height: 50-70px (standard), 80-120px (large/complex)
- Minimum gap between components: 40px vertical, 30px horizontal
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
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, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Output is always a standalone .svg file.
Source
Repository: https://github.com/jimliu/baoyu-skills
baoyu-diagram FAQ
What does the baoyu-diagram skill do?
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, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Output is always a standalone .svg file. Title: 16px, weight 700 Component name: 11-12px, weight 600
How do I install baoyu-diagram?
Run: npx -y skills add https://github.com/jimliu/baoyu-skills --skill baoyu-diagram --agent claude-code — the source lives at github.com/jimliu/baoyu-skills.
Maintain baoyu-diagram?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/jimliu-baoyu-skills-baoyu-diagram?ref=badge) npx agentictools info skills/jimliu-baoyu-skills-baoyu-diagram The second line is the CLI lookup for this page — handy in READMEs and docs.
Related skills
design-system-patterns Establish design token hierarchies, theming infrastructure, and component architecture for scalable design systems.
slidev Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations,…
react-state-management Modern React state management with Redux Toolkit, Zustand, Jotai, and React Query for every state category.
react-native-architecture Production-ready React Native patterns with Expo, navigation, offline-first architecture, and native module integration.
tailwind-css-patterns Utility-first CSS framework patterns for responsive, component-based styling with Tailwind v4.1+.
fixing-metadata Audit and fix HTML metadata including titles, descriptions, canonical URLs, Open Graph tags, and structured data.