baoyu-diagram

Create professional SVG diagrams across multiple diagram types. All output is a single self-contained .svg file with embedded styles and fonts. Semantic colors for component categories: 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: Font sizes by role: Background: #0f172a (slate-900) with subtle grid: Arrowhead marker (standard): Arrowhead marker (colored) — create per-color as needed: Open arrowhead (for async/return messages): Draw elements in this order to get correct z-ordering (SVG paints back-to-front): The opaque masking rect trick is essential — semi-transparent component fills will show arrows underneath without it: These prevent overlapping — follow them strictly: Standard box (service/process): Decision diamond (flowchart): Database cylinder: Region boundary: Security group: 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. → 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.