From aradotso-trending-skills-37
Generates SVG+PNG technical diagrams from natural language prompts. Supports 8 types including architecture, flowcharts, sequence diagrams; 5 visual styles; specialized for AI/Agent patterns like RAG pipelines and multi-agent flows.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37This skill uses the workspace's default tool permissions.
```markdown
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
---
name: fireworks-tech-graph
description: Generate production-quality SVG+PNG technical diagrams from natural language using Claude Code. Supports 8 diagram types, 5 visual styles, and deep AI/Agent domain knowledge.
triggers:
- generate a diagram
- draw an architecture diagram
- create a technical diagram
- visualize my system
- make a flowchart
- draw a sequence diagram
- generate SVG diagram
- create architecture visualization
---
# fireworks-tech-graph
> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
Turn natural language descriptions into polished SVG + PNG technical diagrams. Supports 8 diagram types, 5 visual styles, and deep knowledge of AI/Agent system patterns (RAG, Mem0, Multi-Agent, Tool Call flows).
---
## Installation
```bash
# Via Claude Code skills
claude skills install fireworks-tech-graph
# Or clone directly
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph
# macOS
brew install librsvg
# Ubuntu/Debian
sudo apt install librsvg2-bin
# Verify
rsvg-convert --version
User prompt → Skill classifies diagram type + style
→ Generates SVG with semantic shapes + arrows
→ Runs: rsvg-convert -w 1920 input.svg -o output.png
→ Reports file paths of .svg and .png
Output files are written to the current directory (or --output path).
generate diagram / draw diagram / create chart / visualize
architecture diagram / flowchart / sequence diagram / data flow
Draw a RAG pipeline flowchart
Generate an Agentic Search architecture diagram
Create a tool call flow diagram
Visualize a microservices architecture
Draw a microservices architecture diagram, style 2 (dark terminal)
Draw a multi-agent collaboration diagram --style glassmorphism
Generate a Mem0 architecture diagram, blueprint style
Generate a Mem0 architecture diagram, output to ~/Desktop/
Create a tool call flow diagram --output /tmp/diagrams/
| # | Name | Background | Font | Best For |
|---|---|---|---|---|
| 1 | Flat Icon (default) | #ffffff | Helvetica | Blogs, slides, docs |
| 2 | Dark Terminal | #0f0f1a | SF Mono / Fira Code | GitHub README, dev articles |
| 3 | Blueprint | #0a1628 | Courier New | Architecture docs, engineering |
| 4 | Notion Clean | #ffffff | system-ui | Notion, Confluence, wikis |
| 5 | Glassmorphism | #0d1117 gradient | Inter | Product sites, keynotes |
Reference files for each style live in references/style-N-*.md with exact color tokens and SVG patterns.
| Type | Description | Key Layout Rule |
|---|---|---|
| Architecture | Services, components, cloud infra | Horizontal layers top→bottom |
| Data Flow | What data moves where | Label every arrow with data type |
| Flowchart | Decisions, process steps | Diamond = decision, top→bottom |
| Agent Architecture | LLM + tools + memory | 5-layer model: Input/Agent/Memory/Tool/Output |
| Memory Architecture | Mem0, MemGPT-style | Separate read/write paths, memory tiers |
| Sequence | API call chains, time-ordered | Vertical lifelines, horizontal messages |
| Comparison | Feature matrix, side-by-side | Column = system, row = attribute |
| Mind Map | Concept maps, radial | Central node, bezier branches |
The skill has pre-loaded knowledge of these patterns — just name them:
RAG Pipeline → Query → Embed → VectorSearch → Retrieve → LLM → Response
Agentic RAG → RAG + Agent loop + Tool use
Agentic Search → Query → Planner → [Search/Calc/Code] → Synthesizer
Mem0 Memory Layer → Input → Memory Manager → [VectorDB + GraphDB] → Context
Agent Memory Types → Sensory → Working → Episodic → Semantic → Procedural
Multi-Agent → Orchestrator → [SubAgent×N] → Aggregator → Output
Tool Call Flow → LLM → Tool Selector → Execution → Parser → LLM (loop)
Example prompts for each:
Generate a Mem0 memory architecture diagram with vector store, graph DB, KV store, and memory manager
Draw a Multi-Agent diagram: Orchestrator dispatches 3 SubAgents (search / compute / code), results aggregated
Visualize the Tool Call execution flow: LLM → Tool Selector → Execution → Parser → back to LLM
Compare Agentic RAG vs standard RAG in a feature matrix, Notion clean style
Draw the 5 agent memory types: Sensory, Working, Episodic, Semantic, Procedural
Shapes carry semantic meaning consistently across all styles:
| Concept | Shape |
|---|---|
| User / Human | Circle + body |
| LLM / Model | Rounded rect, double border, ⚡ |
| Agent / Orchestrator | Hexagon |
| Memory (short-term) | Dashed-border rounded rect |
| Memory (long-term) | Solid cylinder |
| Vector Store | Cylinder with inner rings |
| Graph DB | 3-circle cluster |
| Tool / Function | Rect with ⚙ |
| API / Gateway | Hexagon (single border) |
| Queue / Stream | Horizontal pipe/tube |
| Document / File | Folded-corner rect |
| Browser / UI | Rect with 3-dot titlebar |
| Decision | Diamond |
| External Service | Dashed-border rect |
| Flow Type | Stroke | Dash | Meaning |
|---|---|---|---|
| Primary data flow | 2px solid | — | Main request/response |
| Control / trigger | 1.5px solid | — | System A triggers B |
| Memory read | 1.5px solid | — | Retrieve from store |
| Memory write | 1.5px | 5,3 | Write/store operation |
| Async / event | 1.5px | 4,2 | Non-blocking |
| Feedback / loop | 1.5px curved | — | Iterative reasoning |
Draw a microservices architecture: Client → API Gateway → [User Service / Order Service / Payment Service] → PostgreSQL + Redis
Generate a data pipeline: Kafka → Spark → S3 → Athena, blueprint style
Draw a Kubernetes deployment: Ingress → Service → [Pod × 3] → ConfigMap + PersistentVolume
Draw an OAuth2 authorization code flow sequence diagram: User → Client → Auth Server → Resource Server
Draw the ChatGPT Plugin call sequence diagram
Draw a pre-launch QA flowchart: Code Review → Security Scan → Performance Test → Manual Approval → Deploy
Generate a feature comparison matrix: RAG vs Fine-tuning vs Prompt Engineering
Visualize the LLM application tech stack: foundation model → SDK → app framework → deployment
Draw an AI Agent capability map: Perception / Memory / Reasoning / Action / Learning
When generating SVG diagrams, follow these rules:
viewBox: "0 0 1600 900" ← 16:9 default
preserveAspectRatio: "xMidYMid meet"
Padding: 60px all sides
Layer spacing: 140px vertical between swim lanes
Node spacing: 180px horizontal minimum
<!-- Background -->
<rect width="1600" height="900" fill="#ffffff"/>
<!-- Node: LLM (double border) -->
<rect x="200" y="200" width="160" height="60" rx="8"
fill="#EEF2FF" stroke="#6366F1" stroke-width="2"/>
<rect x="204" y="204" width="152" height="52" rx="6"
fill="none" stroke="#6366F1" stroke-width="1" opacity="0.5"/>
<!-- Node: Agent (hexagon) -->
<polygon points="380,200 420,180 460,200 460,240 420,260 380,240"
fill="#F0FDF4" stroke="#22C55E" stroke-width="2"/>
<!-- Primary arrow -->
<line x1="360" y1="230" x2="380" y2="230"
stroke="#6366F1" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Async arrow (dashed) -->
<line x1="360" y1="230" x2="380" y2="230"
stroke="#94A3B8" stroke-width="1.5" stroke-dasharray="4,2"
marker-end="url(#arrowhead-gray)"/>
<rect width="1600" height="900" fill="#0f0f1a"/>
<!-- Nodes use: fill="#1a1a2e", stroke="#00ff88" or "#ff6b6b" or "#4ecdc4" -->
<!-- Text: fill="#e2e8f0", font-family="'SF Mono', 'Fira Code', monospace" -->
<!-- Primary arrows: stroke="#00ff88" -->
<rect width="1600" height="900" fill="#0a1628"/>
<!-- Grid lines: stroke="#1e3a5f" stroke-width="1" opacity="0.4" -->
<!-- Nodes: fill="#0d2137", stroke="#00bcd4" stroke-width="1.5" -->
<!-- Text: fill="#b0c4de", font-family="'Courier New', monospace" -->
<!-- Arrows: stroke="#00bcd4" -->
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0d1117"/>
<stop offset="100%" style="stop-color:#161b22"/>
</linearGradient>
<filter id="blur"><feGaussianBlur stdDeviation="4"/></filter>
</defs>
<rect width="1600" height="900" fill="url(#bg)"/>
<!-- Glass card: fill="rgba(255,255,255,0.05)", stroke="rgba(255,255,255,0.1)"
backdrop blur via filter, border-radius 12px -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7"
refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#6366F1"/>
</marker>
<marker id="arrowhead-gray" markerWidth="10" markerHeight="7"
refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#94A3B8"/>
</marker>
</defs>
After generating the SVG file, always run this to produce the PNG:
rsvg-convert -w 1920 output.svg -o output.png
For custom dimensions:
# 2× retina width
rsvg-convert -w 3840 output.svg -o output@2x.png
# Fixed height
rsvg-convert -h 1080 output.svg -o output-1080.png
# Both dimensions (may distort — use only if aspect ratio matches)
rsvg-convert -w 1920 -h 1080 output.svg -o output.png
{topic}-{type}-{style}.svg
{topic}-{type}-{style}.png
Examples:
mem0-memory-architecture-dark.svg
mem0-memory-architecture-dark.png
rag-pipeline-flowchart-flat.svg
multi-agent-architecture-glass.png
fireworks-tech-graph/
├── SKILL.md # Main skill definition
├── README.md # English docs
├── README.zh.md # Chinese docs
├── references/
│ ├── style-1-flat-icon.md # Color tokens, SVG patterns
│ ├── style-2-dark-terminal.md
│ ├── style-3-blueprint.md
│ ├── style-4-notion-clean.md
│ ├── style-5-glassmorphism.md
│ └── icons.md # 40+ product icons + semantic shapes
└── assets/
└── samples/ # Sample PNG outputs per style
When a node represents a known product, use its brand color as the node accent:
| Product | Brand Color |
|---|---|
| OpenAI | #00A67E |
| Anthropic/Claude | #D97757 |
| Google Gemini | #4285F4 |
| Meta LLaMA | #0668E1 |
| Pinecone | #1A1A2E + #00FF88 |
| Weaviate | #FA0050 |
| LangChain | #1C3C3C |
| Kafka | #231F20 + #FF6B35 |
| PostgreSQL | #336791 |
| Redis | #DC382D |
| Kubernetes | #326CE5 |
| AWS | #FF9900 |
| GCP | #4285F4 |
| Azure | #0078D4 |
Full icon reference: references/icons.md
rsvg-convert: command not found# macOS — install librsvg
brew install librsvg
# Ubuntu
sudo apt-get update && sudo apt-get install -y librsvg2-bin
# Check PATH
which rsvg-convert
width/height or a valid viewBoxfill colors are not transparent on the root <rect>Helvetica, Arial, Courier New, system-ui, monospacersvg-convert does not fetch external resourcesrsvg-convert — fall back to geometric SVG shapes if unsupported# Increase width — 1920 is minimum, 3840 for retina
rsvg-convert -w 3840 input.svg -o output@2x.png
viewBox="0 0 1600 900" to "0 0 2400 1200"flat, dark, blueprint, notion, glassSTYLES: 1=flat 2=dark 3=blueprint 4=notion 5=glass
TYPES: architecture | dataflow | flowchart | agent
memory | sequence | comparison | mindmap
SHAPES: circle=user hexagon=agent double-rect=LLM
cylinder=storage diamond=decision pipe=queue
ARROWS: solid=primary dashed(5,3)=write dashed(4,2)=async
EXPORT: rsvg-convert -w 1920 input.svg -o output.png
CANVAS: viewBox="0 0 1600 900" padding=60px