baoyu-diagram

Design Community v1.117.3

Repo stars 0
Author updated Jul 4, 2026, 09:22 AM
Author repo baoyu-skills

Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

Core job: Create professional SVG diagrams across multiple diagram types. All output is a single self-contained .svg file with embedded st…
Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

Structure: The skill is organized around “Supported Diagram Types”, “Design System”, “Color Palette”, “Typography”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
Invocation: Name baoyu-diagram directly; if the source includes slash commands, start with the command and then add task context.
Validation: Start small and check whether the result follows “Supported Diagram Types / Design System / Color Palette” before expanding.

Boundaries And Review

Dependencies: It usually needs no extra API key, so start with a small validation task.
Permissions: Declared permissions include read / write; ask the agent to state file, command, and rollback boundaries before acting.
Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

Diagram Generator

Create professional SVG diagrams across multiple diagram types. All output is a single self-contained .svg file with embedded styles and fonts.

Supported Diagram Types

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

Design System

Color Palette

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.

Typography

Use embedded SVG @font-face or system monospace fallback:

<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');
  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>

Font sizes by role:

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

Core Visual Elements

Background: #0f172a (slate-900) with subtle grid:

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#0f172a"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

Arrowhead marker (standard):

<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
</marker>

Arrowhead marker (colored) — create per-color as needed:

<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
</marker>

Open arrowhead (for async/return messages):

<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
</marker>

SVG Structure & Layering

Draw elements in this order to get correct z-ordering (SVG paints back-to-front):

Background fill + grid pattern
Region/group boundaries (dashed outlines)
Connection arrows and lines
Opaque masking rects (same position as component boxes, fill="#0f172a")
Component boxes (semi-transparent fill + stroke)
Text labels
Legend (bottom-right or bottom area, outside all boundaries)
Title block (top-left)

The opaque masking rect trick is essential — semi-transparent component fills will show arrows underneath without it:

<!-- Mask layer: opaque background to hide arrows -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="#0f172a"/>
<!-- Visual layer: styled component -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="rgba(8,51,68,0.4)" stroke="#22d3ee" stroke-width="1.5"/>
<text x="180" y="125" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Gateway</text>
<text x="180" y="141" fill="#94a3b8" font-size="9" text-anchor="middle">Kong / Nginx</text>

Spacing Rules

These prevent overlapping — follow them strictly:

Component box height: 50-70px (standard), 80-120px (large/complex)
Minimum gap between components: 40px vertical, 30px horizontal
Arrow label clearance: 10px from any box edge
Region boundary padding: 20px inside edges around contained components
Legend placement: At least 20px below the lowest diagram element
Title block: 20px from top-left, outside diagram content area
viewBox: Always extend to fit all content + 30px padding on all sides

Component Patterns

Standard box (service/process):

<rect x="X" y="Y" width="160" height="60" rx="6" fill="#0f172a"/>
<rect x="X" y="Y" width="160" height="60" rx="6" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
<text x="CX" y="Y+24" fill="white" font-size="11" font-weight="600" text-anchor="middle">Name</text>
<text x="CX" y="Y+40" fill="#94a3b8" font-size="9" text-anchor="middle">description</text>

Decision diamond (flowchart):

<g transform="translate(CX, CY)">
  <polygon points="0,-35 50,0 0,35 -50,0" fill="#0f172a"/>
  <polygon points="0,-35 50,0 0,35 -50,0" fill="rgba(120,53,15,0.3)" stroke="#fbbf24" stroke-width="1.5"/>
  <text y="4" fill="white" font-size="10" font-weight="600" text-anchor="middle">Condition?</text>
</g>

Database cylinder:

<g transform="translate(X, Y)">
  <rect x="0" y="10" width="120" height="50" rx="2" fill="#0f172a"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="#0f172a"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="#0f172a"/>
  <rect x="0" y="10" width="120" height="50" fill="rgba(76,29,149,0.4)"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="0" y1="10" x2="0" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="120" y1="10" x2="120" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <text x="60" y="40" fill="white" font-size="11" font-weight="600" text-anchor="middle">PostgreSQL</text>
</g>

Region boundary:

<rect x="X" y="Y" width="W" height="H" rx="12" fill="none" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
<text x="X+12" y="Y+16" fill="#fbbf24" font-size="9" font-weight="600">AWS us-east-1</text>

Security group:

<rect x="X" y="Y" width="W" height="H" rx="8" fill="none" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>
<text x="X+10" y="Y+14" fill="#fb7185" font-size="8" font-weight="500">VPC / Security Group</text>

Type-Specific Layout Guidance

Determine this SKILL.md file's directory path as {baseDir}. Read the reference file for the specific diagram type before starting layout. Reference files are located at {baseDir}/references/ and contain detailed layout algorithms and examples.

Architecture Diagrams

→ Read {baseDir}/references/architecture.md

Key points: left-to-right or top-to-bottom data flow. Group related services in region boundaries. Use buses/connectors between layers. Place databases at the bottom or right.

Flowcharts

→ Read {baseDir}/references/flowchart.md

Key points: top-to-bottom primary flow. Diamonds for decisions with Yes/No labels on exit arrows. Rounded rectangles for start/end. Use the Highlight color for the happy path.

Sequence Diagrams

→ Read {baseDir}/references/sequence.md

Key points: actors as boxes at top, vertical dashed lifelines, horizontal arrows for messages (solid=sync, dashed=return). Time flows downward. Activation bars show processing. Number messages if complex.

Structural Diagrams

→ Read {baseDir}/references/structural.md

Key points: compartmented boxes (name / attributes / methods for class diagrams). Relationship lines: solid with filled diamond=composition, solid with empty diamond=aggregation, dashed arrow=dependency, solid triangle=inheritance.

Mind Maps

Free-form radiating layout from a central concept. Use organic curves (<path> with cubic beziers) for branches. Vary branch colors using the palette. Larger font for central node, decreasing as you go outward.

Timelines

Horizontal or vertical axis line. Event markers as circles or diamonds on the axis. Description text offset to alternating sides to avoid overlap. Use color to categorize event types.

State Machines

Rounded-rect states with double-border for composite states. Filled circle for initial state, bullseye for final state. Curved arrows for self-transitions. Label all transitions with event [guard] / action format.

Output Rules

Output a single .svg file — no external dependencies except the Google Fonts import
Set viewBox to fit all content with 30px padding; do NOT set fixed width/height attributes (let the SVG scale responsively)
Include xmlns="http://www.w3.org/2000/svg" on the root <svg> element
Put all <style>, <defs>, markers, and patterns at the top of the SVG
Use text-anchor="middle" for centered labels; ensure text doesn't overflow boxes
Chinese text support: When labels contain Chinese characters, use font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif' and increase box widths — CJK characters are wider
Save location: If the input is a file, save to {inputFileDir}/diagram/. Otherwise save to {projectDir}/diagram/{topic-slug}/. Create the directory if it doesn't exist

Script

Determine this SKILL.md file's directory path as {baseDir}. Script path: {baseDir}/scripts/main.ts.

Resolve ${BUN_X} runtime: if bun installed → bun; if npx available → npx -y bun; else suggest installing bun.

SVG → @2x PNG

After saving the SVG, convert it to a @2x PNG:

${BUN_X} {baseDir}/scripts/main.ts <svg-path> [options]

Options:

-s, --scale <n> — Scale factor (default: 2)
-o, --output <path> — Custom output path (default: <input>@2x.png)
--json — JSON output

Process

Identify the diagram type from the user's request
Read the relevant reference file if one exists for that type
Plan the layout: list all components, determine grouping and flow direction, calculate positions
Write the SVG following the layering order above
Verify spacing rules — no overlaps, legends outside boundaries, viewBox large enough
Save the SVG file
Run ${BUN_X} {baseDir}/scripts/main.ts <svg-path> to generate @2x PNG
Present both files to the user

Fluxly profile Author and license come from source; runtime, permissions, and network are Fluxly detections or estimates

Fluxly category: Design
Author-declared agents: No explicit declaration found; this is not inferred or tested compatibility
Static check: 92 / 100 · heuristic scan, not runtime safety proof
Author / version / license: @JimLiu · v1.117.3 · no license declared
Fluxly token estimate: Lean
Fluxly setup estimate: Guided setup
External API key: No requirement detected
Detected OS requirements: macOS · Linux · Windows
Runtime requirements: Node.js · Bun
Detected file/system behavior: Read-only
Write / modify
Detected network behavior: Local-only
Install commands: None (reference only)

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview baoyu-diagram.preview

The current SKILL.md does not define a fixed output example.

SKILL.md SKILL.md

# Diagram Generator

Create professional SVG diagrams across multiple diagram types. All output is a single self-contained `.svg` file with embedded styles and fonts.

## Supported Diagram Types

| 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 |

## Design System

### Color Palette

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 |

…

Evidence boundary and execution chain

Author text anchors workflow facts; Fluxly only indexes current sections, terms, files, and commands.

sections -> Supported Diagram Types → Design System → Color Palette → Typography → Core Visual Elements → SVG Structure & Layering
terms    -> Architecture · Flowchart · Sequence · Structural · Mind Map · Timeline · Illustrative · State Machine
files/cmd -> .svg · rgba(8, 51, 68, 0.4) · #22d3ee · rgba(6, 78, 59, 0.4) · #34d399 · rgba(76, 29, 149, 0.4) · #a78bfa · rgba(120, 53, 15, 0.3)
body sha256 -> 6c25fa2f968b