baoyu-diagram

Name: baoyu-diagram
Author: JimLiu

12kinstalls2.7kforks

How to install baoyu-diagram?

jimliu/baoyu-skills/baoyu-diagram

$npx -y skills add jimliu/baoyu-skills --skill baoyu-diagram

Installs into the current project.

Summary

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 d

Files · 1

View on GitHub

SKILL.md

1	# Diagram Generator
2
3	Create professional SVG diagrams across multiple diagram types. All output is a single self-contained `.svg` file with embedded styles and fonts.
4
5	## Supported Diagram Types
6
7	\| Type \| When to Use \| Key Characteristics \|
8	\|------\|-------------\|-------------------\|
9	\| Architecture \| System components & relationships \| Grouped boxes, connection arrows, region boundaries \|
10	\| Flowchart \| Decision logic, process steps \| Diamond decisions, rounded step boxes, directional flow \|
11	\| Sequence \| Time-ordered interactions between actors \| Vertical lifelines, horizontal messages, activation bars \|
12	\| Structural \| Class diagrams, ER diagrams, org charts \| Compartmented boxes, typed relationships (inheritance, composition) \|
13	\| Mind Map \| Brainstorming, topic exploration \| Central node, radiating branches, organic layout \|
14	\| Timeline \| Chronological events \| Horizontal/vertical axis, event markers, period spans \|
15	\| Illustrative \| Conceptual explanations, comparisons \| Free-form layout, icons, annotations, visual metaphors \|
16	\| State Machine \| State transitions, lifecycle \| Rounded state nodes, labeled transitions, start/end markers \|
17	\| Data Flow \| Data transformation pipelines \| Process bubbles, data stores, external entities \|
18
19	## Design System
20
21	### Color Palette
22
23	Semantic colors for component categories:
24
25	\| Category \| Fill (rgba) \| Stroke \| Use For \|
26	\|----------\|-------------\|--------\|---------\|
27	\| Primary \| `rgba(8, 51, 68, 0.4)` \| `#22d3ee` (cyan) \| Frontend, user-facing, inputs \|
28	\| Secondary \| `rgba(6, 78, 59, 0.4)` \| `#34d399` (emerald) \| Backend, services, processing \|
29	\| Tertiary \| `rgba(76, 29, 149, 0.4)` \| `#a78bfa` (violet) \| Database, storage, persistence \|
30	\| Accent \| `rgba(120, 53, 15, 0.3)` \| `#fbbf24` (amber) \| Cloud, infrastructure, regions \|
31	\| Alert \| `rgba(136, 19, 55, 0.4)` \| `#fb7185` (rose) \| Security, errors, warnings \|
32	\| Connector \| `rgba(251, 146, 60, 0.3)` \| `#fb923c` (orange) \| Buses, queues, middleware \|
33	\| Neutral \| `rgba(30, 41, 59, 0.5)` \| `#94a3b8` (slate) \| External, generic, unknown \|
34	\| Highlight \| `rgba(59, 130, 246, 0.3)` \| `#60a5fa` (blue) \| Active state, focus, current step \|
35
36	For flowcharts and sequence diagrams, assign colors by role (actor, decision, process) rather than by technology.
37
38	### Typography
39
40	Use embedded SVG `@font-face` or system monospace fallback:
41
42	```svg
43	<style>
44	@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
45	text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
46	</style>
47	```
48
49	Font sizes by role:
50	- Title: 16px, weight 700
51	- Component name: 11-12px, weight 600
52	- Sublabel / description: 9px, weight 400, color `#94a3b8`
53	- Annotation / note: 8px, weight 400
54	- Tiny label (on arrows): 7-8px
55
56	### Core Visual Elements
57
58	Background: `#0f172a` (slate-900) with subtle grid:
59	```svg
60	<defs>
61	<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
62	<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
63	</pattern>
64	</defs>
65	<rect width="100%" height="100%" fill="#0f172a"/>
66	<rect width="100%" height="100%" fill="url(#grid)"/>
67	```
68
69	Arrowhead marker (standard):
70	```svg
71	<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
72	<polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
73	</marker>
74	```
75
76	Arrowhead marker (colored) — create per-color as needed:
77	```svg
78	<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
79	<polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
80	</marker>
81	```
82
83	Open arrowhead (for async/return messages):
84	```svg
85	<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
86	<polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
87	</marker>
88	```
89
90	### SVG Structure & Layering
91
92	Draw elements in this order to get correct z-ordering (SVG paints back-to-front):
93
94	1. Background fill + grid pattern
95	2. Region/group boundaries (dashed outlines)
96	3. Connection arrows and lines
97	4. Opaque masking rects (same position as component boxes, `fill="#0f172a"`)
98	5. Component boxes (semi-transparent fill + stroke)
99	6. Text labels
100	7. Legend (bo

People who liked this also viewed

6 picks

Type

baoyu-diagram

12kinstalls2.7kforks

View on GitHub

How to install baoyu-diagram?

jimliu/baoyu-skills/baoyu-diagram

$npx -y skills add jimliu/baoyu-skills --skill baoyu-diagram

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Diagram Generator
2
3	Create professional SVG diagrams across multiple diagram types. All output is a single self-contained `.svg` file with embedded styles and fonts.
4
5	## Supported Diagram Types
6
7	\| Type \| When to Use \| Key Characteristics \|
8	\|------\|-------------\|-------------------\|
9	\| Architecture \| System components & relationships \| Grouped boxes, connection arrows, region boundaries \|
10	\| Flowchart \| Decision logic, process steps \| Diamond decisions, rounded step boxes, directional flow \|
11	\| Sequence \| Time-ordered interactions between actors \| Vertical lifelines, horizontal messages, activation bars \|
12	\| Structural \| Class diagrams, ER diagrams, org charts \| Compartmented boxes, typed relationships (inheritance, composition) \|
13	\| Mind Map \| Brainstorming, topic exploration \| Central node, radiating branches, organic layout \|
14	\| Timeline \| Chronological events \| Horizontal/vertical axis, event markers, period spans \|
15	\| Illustrative \| Conceptual explanations, comparisons \| Free-form layout, icons, annotations, visual metaphors \|
16	\| State Machine \| State transitions, lifecycle \| Rounded state nodes, labeled transitions, start/end markers \|
17	\| Data Flow \| Data transformation pipelines \| Process bubbles, data stores, external entities \|
18
19	## Design System
20
21	### Color Palette
22
23	Semantic colors for component categories:
24
25	\| Category \| Fill (rgba) \| Stroke \| Use For \|
26	\|----------\|-------------\|--------\|---------\|
27	\| Primary \| `rgba(8, 51, 68, 0.4)` \| `#22d3ee` (cyan) \| Frontend, user-facing, inputs \|
28	\| Secondary \| `rgba(6, 78, 59, 0.4)` \| `#34d399` (emerald) \| Backend, services, processing \|
29	\| Tertiary \| `rgba(76, 29, 149, 0.4)` \| `#a78bfa` (violet) \| Database, storage, persistence \|
30	\| Accent \| `rgba(120, 53, 15, 0.3)` \| `#fbbf24` (amber) \| Cloud, infrastructure, regions \|
31	\| Alert \| `rgba(136, 19, 55, 0.4)` \| `#fb7185` (rose) \| Security, errors, warnings \|
32	\| Connector \| `rgba(251, 146, 60, 0.3)` \| `#fb923c` (orange) \| Buses, queues, middleware \|
33	\| Neutral \| `rgba(30, 41, 59, 0.5)` \| `#94a3b8` (slate) \| External, generic, unknown \|
34	\| Highlight \| `rgba(59, 130, 246, 0.3)` \| `#60a5fa` (blue) \| Active state, focus, current step \|
35
36	For flowcharts and sequence diagrams, assign colors by role (actor, decision, process) rather than by technology.
37
38	### Typography
39
40	Use embedded SVG `@font-face` or system monospace fallback:
41
42	```svg
43	<style>
44	@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
45	text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
46	</style>
47	```
48
49	Font sizes by role:
50	- Title: 16px, weight 700
51	- Component name: 11-12px, weight 600
52	- Sublabel / description: 9px, weight 400, color `#94a3b8`
53	- Annotation / note: 8px, weight 400
54	- Tiny label (on arrows): 7-8px
55
56	### Core Visual Elements
57
58	Background: `#0f172a` (slate-900) with subtle grid:
59	```svg
60	<defs>
61	<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
62	<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
63	</pattern>
64	</defs>
65	<rect width="100%" height="100%" fill="#0f172a"/>
66	<rect width="100%" height="100%" fill="url(#grid)"/>
67	```
68
69	Arrowhead marker (standard):
70	```svg
71	<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
72	<polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
73	</marker>
74	```
75
76	Arrowhead marker (colored) — create per-color as needed:
77	```svg
78	<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
79	<polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
80	</marker>
81	```
82
83	Open arrowhead (for async/return messages):
84	```svg
85	<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
86	<polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
87	</marker>
88	```
89
90	### SVG Structure & Layering
91
92	Draw elements in this order to get correct z-ordering (SVG paints back-to-front):
93
94	1. Background fill + grid pattern
95	2. Region/group boundaries (dashed outlines)
96	3. Connection arrows and lines
97	4. Opaque masking rects (same position as component boxes, `fill="#0f172a"`)
98	5. Component boxes (semi-transparent fill + stroke)
99	6. Text labels
100	7. Legend (bo

People who liked this also viewed

6 picks

Type