Vibe Coding Discover

Skills

fireworks-tech-graph

View on GitHub

Generate production-quality SVG+PNG technical diagrams from natural language. 7 styles, UML support, and AI/Agent workflow patterns.

★ 12K914 forksPythonMITyizhiyanhua-ai

Agent Skill for Claude Code and Codex that turns natural-language system descriptions into geometry-checked SVG/PNG technical diagrams. Ships 12 visual styles, 14 diagram types with full UML, built-in AI/Agent patterns (RAG, Mem0, multi-agent, tool-call), plus GIF motion and offline interactive HTML export.

Use Cases

Generate architecture diagrams from a natural-language promptProduce full UML diagrams (class, sequence, state, ER, component, deployment)Diagram RAG, Mem0 memory, and multi-agent workflow topologiesExport high-resolution PNG from generated SVGAnimate SVG into compact semantic-motion GIFsBuild offline interactive HTML technical diagramsDraw C4 container review boardsMap multi-region cloud deployments and VPC ownershipVisualize event-driven topologies with topics, DLQ, and projectionsRender SRE reliability/golden-signal dashboardsEnforce geometry-safe routing and label-clearance quality gatesUse inside an AI coding agent as a reusable skill pack

Built With

Language
Python
Frameworks
Claude Code Skills · OpenAI Codex Skills · Node.js

Tags

agent-skill · claude-code · codex · diagrams · svg · png-export · uml · flowchart · sequence-diagram · architecture-diagrams · cli · developer-tools · gif-animation · interactive-html · agent-workflows · python