Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →guanyang/baoyu-diagram
Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more.
Passed 13 of 21 test cases with the skill, and 9 of 21 without it.
and 5 more in the full report
6 fixed8 passed either way7 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
In a cloud infrastructure visual model, I have user-facing frontend components, backend worker microservices, a PostgreSQL database, and cloud region boundaries. Which stroke color should be applied to the database persistence layer to match semantic guidelines?
| Checked | Without skill | With skill |
|---|---|---|
| The database layer components use stroke `#a78bfa`. | Missed | Passed |
| Frontend components are styled using cyan hues while backend services use emerald hues. | Missed | Passed |
The instructions your model reads when the skill loads.
Create professional SVG diagrams across multiple diagram types. All output is a single self-contained .svg file with embedded styles and fonts.
| Type | When to Use | Key Characteristics |
|---|---|---|
| Architecture | System components & relationships | Grouped boxes, connection arrows, region boundaries |
| Flowchart | Decision logic, process steps | Diamond decisions, rounded step boxes, directional flow |
| Sequence | Time-ordered interactions between actors | Vertical lifelines, horizontal messages, activation bars |
| Structural | Class diagrams, ER diagrams, org charts | Compartmented boxes, typed relationships (inheritance, composition) |
| Mind Map | Brainstorming, topic exploration | Central node, radiating branches, organic layout |
| Timeline | Chronological events | Horizontal/vertical axis, event markers, period spans |
| Illustrative | Conceptual explanations, comparisons | Free-form layout, icons, annotations, visual metaphors |
| State Machine | State transitions, lifecycle | Rounded state nodes, labeled transitions, start/end markers |
| Data Flow | Data transformation pipelines | Process bubbles, data stores, external entities |
Semantic colors for component categories:
| Category | Fill (rgba) | Stroke | Use For |
|---|---|---|---|
| Primary | rgba(8, 51, 68, 0.4) | #22d3ee (cyan) | Frontend, user-facing, inputs |
| Secondary | rgba(6, 78, 59, 0.4) | #34d399 (emerald) | Backend, services, processing |
| Tertiary | rgba(76, 29, 149, 0.4) | #a78bfa (violet) | Database, storage, persistence |
| Accent | rgba(120, 53, 15, 0.3) | #fbbf24 (amber) | Cloud, infrastructure, regions |
| Alert | rgba(136, 19, 55, 0.4) | #fb7185 (rose) | Security, errors, warnings |
| Connector | rgba(251, 146, 60, 0.3) | #fb923c (orange) | Buses, queues, middleware |
| Neutral | rgba(30, 41, 59, 0.5) | #94a3b8 (slate) | External, generic, unknown |
| Highlight | rgba(59, 130, 246, 0.3) | #60a5fa (blue) | Active state, focus, current step |
For flowcharts and sequence diagrams, assign colors by role (actor, decision, process) rather than by technology.
Use embedded SVG @font-face or system monospace fallback:
test cases passed, vs 9 / 21 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.