fireworks-tech-graph
> Stop drawing diagrams by hand. Describe your system in English or Chinese — get publication-ready SVG + PNG technical diagrams in seconds.
Overview
fireworks-tech-graph turns natural language descriptions into polished SVG diagrams, then exports them as high-resolution PNG via rsvg-convert. It ships with 7 visual styles and deep knowledge of AI/Agent domain patterns (RAG, Agentic Search, Mem0, Multi-Agent, Tool Call flows), plus full support for all 14 UML diagram types.
User: "Generate a Mem0 memory architecture diagram, dark style" → Skill classifies: Memory Architecture Diagram, Style 2 → Generates SVG with swim lanes, cylinders, semantic arrows → Exports 1920px PNG → Reports: mem0-architecture.svg / mem0-architecture.png Showcase
> All samples exported at 1920px width (2× retina) via rsvg-convert. PNG is lossless and the right choice for technical diagrams — sharp edges, no JPEG compression artifacts on text/lines.
Style 1 — Flat Icon (default)
Mem0 Memory Architecture — white background, semantic arrows, layered memory system 
Style 2 — Dark Terminal
Tool Call Flow — dark background, neon accents, monospace font 
Style 3 — Blueprint
Microservices Architecture — deep blue background, grid lines, cyan strokes 
Style 4 — Notion Clean
Agent Memory Types — minimal white, single accent color 
Style 5 — Glassmorphism
Multi-Agent Collaboration — dark gradient background, frosted glass cards 
Style 6 — Claude Official
System Architecture — warm cream background (#f8f6f3), Anthropic brand colors, clean professional aesthetic 
Style 7 — OpenAI Official
API Integration Flow — pure white background, OpenAI brand palette, modern minimalist design 
Stable Prompt Recipes
Use prompts like these when you want the model to stay close to the repo’s strongest regression-tested outputs:
Style 1 — Flat Icon
Draw a Mem0 memory architecture diagram in style 1 (Flat Icon). Use four horizontal sections: Input Layer, Memory Manager, Storage Layer, Output / Retrieval. Include User, AI App / Agent, LLM, mem0 Client, Memory Manager, Vector Store, Graph DB, Key-Value Store, History Store, Context Builder, Ranked Results, Personalized Response. Use semantic arrows for read, write, control, and data flow. Keep the layout clean and product-doc friendly. Style 2 — Dark Terminal
Draw a tool call flow diagram in style 2 (Dark Terminal). Show User query, Retrieve chunks, Generate answer, Knowledge base, Agent, Terminal, Source documents, and Grounded answer. Use terminal chrome, neon accents, monospace typography, and semantic arrows for retrieval, synthesis, and embedding update. Style 3 — Blueprint
Draw a microservices architecture diagram in style 3 (Blueprint). Create numbered engineering sections like 01 // EDGE, 02 // APPLICATION SERVICES, 03 // DATA + EVENT INFRA, 04 // OBSERVABILITY. Include Client Apps, API Gateway, Auth / Policy, three services, Event Router, Postgres, Redis Cache, Warehouse, and Metrics / Traces. Use blueprint grid, cyan strokes, and a bottom-right title block. Style 4 — Notion Clean
Draw an agent memory types diagram in style 4 (Notion Clean). Compare Sensory Memory, Working Memory, Episodic Memory, Semantic Memory, and Procedural Memory around a central Agent core. Use a minimal white layout, neutral borders, one accent color for arrows, and short storage tags for each memory type. Style 5 — Glassmorphism
Draw a multi-agent collaboration diagram in style 5 (Glassmorphism). Use three sections: Mission Control, Specialist Agents, and Synthesis. Include User brief, Coordinator Agent, Research Agent, Coding Agent, Review Agent, Shared Memory, Synthesis Engine, and Final response. Use frosted cards, soft glow, and semantic arrows for delegation, shared memory writes, and synthesis output. Style 6 — Claude Official
Draw a system architecture diagram in style 6 (Claude Official). Use left-side layer labels: Interface Layer, Core Layer, Foundation Layer. Include Client Surface, Gateway, Task Planner, Model Runtime, Policy Guardrails, Memory Store, Tool Runtime, Observability, and Registry. Use warm cream background, restrained brand-like palette, generous whitespace, and a bottom-right legend. Style 7 — OpenAI Official
Draw an API integration flow diagram in style 7 (OpenAI Official). Use three sections: Entry, Model + Tools, and Delivery. Include Application, OpenAI SDK Layer, Prompt Builder, Model Runtime, Tool Calls, Response Formatter, Observability, and Release Control. Keep the look minimal, white, precise, and modern with clean green-accented arrows. Features
- 7 visual styles — from clean white docs to dark neon to frosted glass to official brand styles
- Executable style system — style guides are encoded into the generator, not only documented in markdown
- 14 diagram types — Full UML support (Class, Component, Deployment, Package, Composite Structure, Object, Use Case, Activity, State Machine, Sequence, Communication, Timing, Interaction Overview, ER Diagram) plus AI/Agent domain diagrams
- AI/Agent domain patterns — RAG, Agentic Search, Mem0, Multi-Agent, Tool Call, and more built-in
- Semantic shape vocabulary — LLM = double-border rect, Agent = hexagon, Vector Store = ringed cylinder
- Semantic arrow system — color + dash pattern encode meaning (write vs read vs async vs loop)
- Product icons — 40+ products with brand colors: OpenAI, Anthropic, Pinecone, Weaviate, Kafka, PostgreSQL…
- Swim lane grouping — automatic layer labeling for complex architectures
- SVG + PNG output — SVG for editing, 1920px PNG for embedding
- rsvg-convert compatible — no external font fetching, pure inline SVG
Installation
npx skills add yizhiyanhua-ai/fireworks-tech-graph This skill is installed from the GitHub repository. The npm package page is the public package/distribution page:
https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph Do not use the npm package name with skills add, because the CLI resolves install sources as GitHub/local paths.
Update
npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y Re-run add --force to pull the latest version of this skill.
Or clone directly:
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph Requirements
# macOS brew install librsvg # Ubuntu/Debian sudo apt install librsvg2-bin # Verify rsvg-convert --version Why Not Mermaid or draw.io?
| Mermaid | draw.io | fireworks-tech-graph | |
|---|---|---|---|
| Natural language input | ✗ | ✗ | ✅ |
| AI/Agent domain patterns | ✗ | ✗ | ✅ |
| Multiple visual styles | ✗ |
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/271551.html