{"id":"baoyu-diagram","name":"baoyu-diagram","summary":"あらゆるタイプのプロフェッショナルでダークテーマのSVGダイアグラムを作成してください。建築図、フローチャート、シーケンス図、構造図、マインドマップ、タイムライン、イラスト/概念図など多岐にわたります。","body":"# Diagram Generator\n\nCreate professional SVG diagrams across multiple diagram types. All output is a single self-contained `.svg` file with embedded styles and fonts.\n\n## Supported Diagram Types\n\n| Type | When to Use | Key Characteristics |\n|------|-------------|-------------------|\n| **Architecture** | System components & relationships | Grouped boxes, connection arrows, region boundaries |\n| **Flowchart** | Decision logic, process steps | Diamond decisions, rounded step boxes, directional flow |\n| **Sequence** | Time-ordered interactions between actors | Vertical lifelines, horizontal messages, activation bars |\n| **Structural** | Class diagrams, ER diagrams, org charts | Compartmented boxes, typed relationships (inheritance, composition) |\n| **Mind Map** | Brainstorming, topic exploration | Central node, radiating branches, organic layout |\n| **Timeline** | Chronological events | Horizontal/vertical axis, event markers, period spans |\n| **Illustrative** | Conceptual explanations, comparisons | Free-form layout, icons, annotations, visual metaphors |\n| **State Machine** | State transitions, lifecycle | Rounded state nodes, labeled transitions, start/end markers |\n| **Data Flow** | Data transformation pipelines | Process bubbles, data stores, external entities |\n\n## Design System\n\n### Color Palette\n\nSemantic colors for component categories:\n\n| Category | Fill (rgba) | Stroke | Use For |\n|----------|-------------|--------|---------|\n| Primary | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan) | Frontend, user-facing, inputs |\n| Secondary | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald) | Backend, services, processing |\n| Tertiary | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet) | Database, storage, persistence |\n| Accent | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber) | Cloud, infrastructure, regions |\n| Alert | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose) | Security, errors, warnings |\n| Connector | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange) | Buses, queues, middleware |\n| Neutral | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate) | External, generic, unknown |\n| Highlight | `rgba(59, 130, 246, 0.3)` | `#60a5fa` (blue) | Active state, focus, current step |\n\nFor flowcharts and sequence diagrams, assign colors by role (actor, decision, process) rather than by technology.\n\n### Typography\n\nUse embedded SVG `@font-face` or system monospace fallback:\n\n```svg\n<style>\n  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');\n  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }\n</style>\n```\n\nFont sizes by role:\n- **Title:** 16px, weight 700\n- **Component name:** 11-12px, weight 600\n- **Sublabel / description:** 9px, weight 400, color `#94a3b8`\n- **Annotation / note:** 8px, weight 400\n- **Tiny label (on arrows):** 7-8px\n\n### Core Visual Elements\n\n**Background:** `#0f172a` (slate-900) with subtle grid:\n```svg\n<defs>\n  <pattern id=\"grid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n    <path d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"#1e293b\" stroke-width=\"0.5\"/>\n  </pattern>\n</defs>\n<rect width=\"100%\" height=\"100%\" fill=\"#0f172a\"/>\n<rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\"/>\n```\n\n**Arrowhead marker (standard):**\n```svg\n<marker id=\"arrow\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n  <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#64748b\"/>\n</marker>\n```\n\n**Arrowhead marker (colored) — create per-color as needed:**\n```svg\n<marker id=\"arrow-cyan\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n  <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#22d3ee\"/>\n</marker>\n```\n\n**Open arrowhead (for async/return messages):**\n```svg\n<marker id=\"arrow-open\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n  <polyline points=\"0 0, 10 3.5, 0 7\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\"/>\n</marker>\n```\n\n### SVG Structure & Layering\n\nDraw elements in this order to get correct z-ordering (SVG paints back-to-front):\n\n1. Background fill + grid pattern\n2. Region/group boundaries (dashed outlines)\n3. Connection arrows and lines\n4. Opaque masking rects (same position as component boxes, `fill=\"#0f172a\"`)\n5. Component boxes (semi-transparent fill + stroke)\n6. Text labels\n7. Legend (bottom-right or bottom area, outside all boundaries)\n8. Title block (top-left)\n\nThe opaque masking rect trick is essential — semi-transparent component fills will show arrows underneath without it:\n```svg\n<!-- Mask layer: opaque background to hide arrows -->\n<rect x=\"100\" y=\"100\" width=\"160\" height=\"60\" rx=\"6\" fill=\"#0f172a\"/>\n<!-- Visual layer: styled component -->\n<rect x=\"100\" y=\"100\" width=\"160\" height=\"60\" rx=\"6\" fill=\"rgba(8,51,68,0.4)\" stroke=\"#22d3ee\" stroke-width=\"1.5\"/>\n<text x=\"180\" y=\"125\" fill=\"white\" font-size=\"11\" font-weight=\"600\" text-anchor=\"middle\">API Gateway</text>\n<text x=\"180\" y=\"141\" fill=\"#94a3b8\" font-size=\"9\" text-anchor=\"middle\">Kong / Nginx</text>\n```\n\n### Spacing Rules\n\nThese prevent overlapping — follow them strictly:\n\n- **Component box height:** 50-70px (standard), 80-120px (large/complex)\n- **Minimum gap between components:** 40px vertical, 30px horizontal\n- **Arrow label clearance:** 10px from any box edge\n- **Region boundary padding:** 20px inside edges around contained components\n- **Legend placement:** At least 20px below the lowest diagram element\n- **Title block:** 20px from top-left, outside diagram content area\n- **viewBox:** Always extend to fit all content + 30px padding on all sides\n\n### Component Patterns\n\n**Standard box (service/process):**\n```svg\n<rect x=\"X\" y=\"Y\" width=\"160\" height=\"60\" rx=\"6\" fill=\"#0f172a\"/>\n<rect x=\"X\" y=\"Y\" width=\"160\" height=\"60\" rx=\"6\" fill=\"FILL\" stroke=\"STROKE\" stroke-width=\"1.5\"/>\n<text x=\"CX\" y=\"Y+24\" fill=\"white\" font-size=\"11\" font-weight=\"600\" text-anchor=\"middle\">Name</text>\n<text x=\"CX\" y=\"Y+40\" fill=\"#94a3b8\" font-size=\"9\" text-anchor=\"middle\">description</text>\n```\n\n**Decision diamond (flowchart):**\n```svg\n<g transform=\"translate(CX, CY)\">\n  <polygon points=\"0,-35 50,0 0,35 -50,0\" fill=\"#0f172a\"/>\n  <polygon points=\"0,-35 50,0 0,35 -50,0\" fill=\"rgba(120,53,15,0.3)\" stroke=\"#fbbf24\" stroke-width=\"1.5\"/>\n  <text y=\"4\" fill=\"white\" font-size=\"10\" font-weight=\"600\" text-anchor=\"middle\">Condition?</text>\n</g>\n```\n\n**Database cylinder:**\n```svg\n<g transform=\"translate(X, Y)\">\n  <rect x=\"0\" y=\"10\" width=\"120\" height=\"50\" rx=\"2\" fill=\"#0f172a\"/>\n  <ellipse cx=\"60\" cy=\"10\" rx=\"60\" ry=\"12\" fill=\"#0f172a\"/>\n  <ellipse cx=\"60\" cy=\"60\" rx=\"60\" ry=\"12\" fill=\"#0f172a\"/>\n  <rect x=\"0\" y=\"10\" width=\"120\" height=\"50\" fill=\"rgba(76,29,149,0.4)\"/>\n  <ellipse cx=\"60\" cy=\"10\" rx=\"60\" ry=\"12\" fill=\"rgba(76,29,149,0.4)\" stroke=\"#a78bfa\" stroke-width=\"1.5\"/>\n  <ellipse cx=\"60\" cy=\"60\" rx=\"60\" ry=\"12\" fill=\"rgba(76,29,149,0.4)\" stroke=\"#a78bfa\" stroke-width=\"1.5\"/>\n  <line x1=\"0\" y1=\"10\" x2=\"0\" y2=\"60\" stroke=\"#a78bfa\" stroke-width=\"1.5\"/>\n  <line x1=\"120\" y1=\"10\" x2=\"120\" y2=\"60\" stroke=\"#a78bfa\" stroke-width=\"1.5\"/>\n  <text x=\"60\" y=\"40\" fill=\"white\" font-size=\"11\" font-weight=\"600\" text-anchor=\"middle\">PostgreSQL</text>\n</g>\n```\n\n**Region boundary:**\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"12\" fill=\"none\" stroke=\"#fbbf24\" stroke-width=\"1\" stroke-dasharray=\"8,4\"/>\n<text x=\"X+12\" y=\"Y+16\" fill=\"#fbbf24\" font-size=\"9\" font-weight=\"600\">AWS us-east-1</text>\n```\n\n**Security group:**\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"8\" fill=\"none\" stroke=\"#fb7185\" stroke-width=\"1\" stroke-dasharray=\"4,4\"/>\n<text x=\"X+10\" y=\"Y+14\" fill=\"#fb7185\" font-size=\"8\" font-weight=\"500\">VPC / Security Group</text>\n```\n\n## Type-Specific Layout Guidance\n\nDetermine 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.\n\n### Architecture Diagrams\n→ Read `{baseDir}/references/architecture.md`\n\nKey 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.\n\n### Flowcharts\n→ Read `{baseDir}/references/flowchart.md`\n\nKey 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.\n\n### Sequence Diagrams\n→ Read `{baseDir}/references/sequence.md`\n\nKey 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.\n\n### Structural Diagrams\n→ Read `{baseDir}/references/structural.md`\n\nKey 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.\n\n### Mind Maps\nFree-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.\n\n### Timelines\nHorizontal 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.\n\n### State Machines\nRounded-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.\n\n## Output Rules\n\n1. Output a **single `.svg` file** — no external dependencies except the Google Fonts import\n2. Set `viewBox` to fit all content with 30px padding; do NOT set fixed `width`/`height` attributes (let the SVG scale responsively)\n3. Include `xmlns=\"http://www.w3.org/2000/svg\"` on the root `<svg>` element\n4. Put all `<style>`, `<defs>`, markers, and patterns at the top of the SVG\n5. Use `text-anchor=\"middle\"` for centered labels; ensure text doesn't overflow boxes\n6. **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\n7. **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\n\n## Script\n\nDetermine this SKILL.md file's directory path as `{baseDir}`. Script path: `{baseDir}/scripts/main.ts`.\n\nResolve `${BUN_X}` runtime: if `bun` installed → `bun`; if `npx` available → `npx -y bun`; else suggest installing bun.\n\n### SVG → @2x PNG\n\nAfter saving the SVG, convert it to a @2x PNG:\n\n```bash\n${BUN_X} {baseDir}/scripts/main.ts <svg-path> [options]\n```\n\nOptions:\n- `-s, --scale <n>` — Scale factor (default: 2)\n- `-o, --output <path>` — Custom output path (default: `<input>@2x.png`)\n- `--json` — JSON output\n\n## Process\n\n1. Identify the diagram type from the user's request\n2. Read the relevant reference file if one exists for that type\n3. Plan the layout: list all components, determine grouping and flow direction, calculate positions\n4. Write the SVG following the layering order above\n5. Verify spacing rules — no overlaps, legends outside boundaries, viewBox large enough\n6. Save the SVG file\n7. Run `${BUN_X} {baseDir}/scripts/main.ts <svg-path>` to generate @2x PNG\n8. Present both files to the user","author":"@JimLiu","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/JimLiu/baoyu-skills/tree/main/skills/baoyu-diagram","license":"MIT","category":"data","lang":"en","tokens":3355,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"references/architecture.md","size":3137,"sha256":"0a6f09566c9c9673e0f6493ab4081263ffe5a2bc59ae6103f3c6dd0059a4f1ce"},{"path":"references/flowchart.md","size":2303,"sha256":"e9d7c50ef2ed57d76dd1a41e15c816d539fc69ed2bc85f81fbd38ea503235d15"},{"path":"references/sequence.md","size":3812,"sha256":"eb8e0196ef03c89699b60e8ca320927d1368216cba95483dff97852ee7ef395a"},{"path":"references/structural.md","size":3687,"sha256":"fd4314be4c7a27c559641bbbd1c2a9979f647158fbc177ec8a68a2daac61b4c0"},{"path":"scripts/main.ts","size":3520,"sha256":"0ff44332e96ca9a2ecddb23bc91521cf19cacc7550b6f68ec06ef2de859999b4"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":true,"networkEndpoints":[]}}