fireworks-tech-graph

What this skill does

```markdown
---
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
```

### System dependency (required for PNG export)

```bash
# macOS
brew install librsvg

# Ubuntu/Debian
sudo apt install librsvg2-bin

# Verify
rsvg-convert --version
```

---

## How It Works

```
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).

---

## Basic Usage

### Trigger phrases (auto-detected)

```
generate diagram / draw diagram / create chart / visualize
architecture diagram / flowchart / sequence diagram / data flow
```

### Simple requests

```
Draw a RAG pipeline flowchart
Generate an Agentic Search architecture diagram
Create a tool call flow diagram
Visualize a microservices architecture
```

### Specify style

```
Draw a microservices architecture diagram, style 2 (dark terminal)
Draw a multi-agent collaboration diagram --style glassmorphism
Generate a Mem0 architecture diagram, blueprint style
```

### Specify output path

```
Generate a Mem0 architecture diagram, output to ~/Desktop/
Create a tool call flow diagram --output /tmp/diagrams/
```

---

## Visual Styles

| # | 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.

---

## Diagram Types

| 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 |

---

## AI/Agent Domain Patterns (Built-in)

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
```

---

## Shape Vocabulary

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 |

---

## Arrow Semantics

| 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 |

---

## Example Prompts by Scenario

### AI/Agent Systems

```
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
```

### API & Sequence Flows

```
Draw an OAuth2 authorization code flow sequence diagram: User → Client → Auth Server → Resource Server
Draw the ChatGPT Plugin call sequence diagram
```

### Decision & Process Flows

```
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
```

### Concept Maps

```
Visualize the LLM application tech stack: foundation model → SDK → app framework → deployment
Draw an AI Agent capability map: Perception / Memory / Reasoning / Action / Learning
```

---

## SVG Generation Guidelines

When generating SVG diagrams, follow these rules:

### Canvas & Layout

```
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
```

### Style 1 — Flat Icon (default) key tokens

```svg
<!-- 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"