vctech-graph
SolidUse when you need publish-grade SVG or PNG technical diagrams for architecture, flow, sequence, UML, state, or comparison visuals, with preview used afterward for review rather than generation.
Install
Quality Score: 97/100
Skill Content
Details
- Author
- withkynam
- Repository
- withkynam/vibecode-pro-max-kit
- Created
- 2 weeks ago
- Last Updated
- 1 weeks ago
- Language
- JavaScript
- License
- MIT
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
fireworks-tech-graph
Use when the user needs technical/system diagrams or image generation with structured, editable SVG output and optional PNG export: architecture, flowchart, sequence, swimlane, data flow, ER/state-machine, agent/memory, or concept map. Trigger on: "架构图" "流程图" "时序图" "泳道图" "系统图" "数据流图" "sequence diagram" "flowchart" "swimlane" "ER diagram" "state machine" "SVG diagram" "生成图片" "画图" "生图".
concept-diagrams
Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark mode. Best suited for educational and non-software visuals — physics setups, chemistry mechanisms, math curves, physical objects (aircraft, turbines, smartphones, mechanical watches), anatomy, floor plans, cross-sections, narrative journeys (lifecycle of X, process of Y), hub-spoke system integrations (smart city, IoT), and exploded layer views. If a more specialized skill exists for the subject (dedicated software/cloud architecture, hand-drawn sketches, animated explainers, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback with a clean educational look. Ships with 15 example diagrams.
spinediagrams
Generate clean architecture and system-design diagrams as SVG files. Use this skill whenever the user wants to visualise how services, systems, or components connect: migration diagrams, current-state vs target-state architectures, integration maps, data-flow diagrams, platform overviews, or any diagram that shows technology boxes with arrows between them. Triggers on phrases like: "draw a diagram", "make an architecture diagram", "show me how X connects to Y", "create a system diagram", "architecture SVG", "visualise the stack", "diagram this", or whenever the conversation has produced a list of components and integrations that would benefit from a visual. Always use this skill rather than trying to write SVG by hand.