A New Open-Source AI Diagram Skill That Could Replace draw.io

Overview

fireworks-tech-graph is an open‑source Skill for Claude Code that generates technical architecture diagrams from natural‑language prompts. It outputs SVG and 1920 px PNG files.

Visual Styles

Flat Icon

– white background with color accents, suited for blogs and documentation. Dark Terminal – dark neon background with monospaced font, suited for GitHub READMEs. Blueprint – deep‑blue grid with an engineering feel. Notion Clean – minimal white background, suited for wikis. Glassmorphism – frosted‑glass effect, suited for product sites and presentations. Claude Official – warm cream color matching Anthropic branding. OpenAI Official – pure white minimalism with OpenAI colors. Dark Luxury – AI‑hand‑drawn style with a black background, champagne‑gold accents, and serif titles.

UML Diagram Coverage

All 14 UML diagram types are supported: class, component, deployment, package, composite structure, object, use‑case, activity, state‑machine, sequence, communication, timing, interaction overview, and ER diagrams.

Recommended style‑layout pairings:

Class and component diagrams – Flat Icon or Notion Clean.

Sequence and timing diagrams – Dark Terminal for monospaced alignment.

State‑machine and activity diagrams – Blueprint.

Built‑in AI/Agent Patterns

The skill embeds semantic shapes and arrow conventions for common AI/Agent workflows, including RAG pipelines, Agentic Search, Mem0 memory architecture, multi‑agent collaboration, and tool‑call execution flows.

Example: a Mem0 architecture diagram automatically uses a cylindrical shape for vector stores, a hexagon for agents, and a dashed line to indicate memory writes.

Semantic Shapes and Arrow System

Shapes carry domain meaning:

LLM – double‑bordered rounded rectangle.

Agent – hexagon.

Vector store – cylinder with inner ring.

Graph database – three‑circle cluster.

Tool – rectangle with gear icon.

Short‑term memory – dashed rounded rectangle.

Long‑term memory – solid cylinder.

Arrows also encode semantics:

Solid blue – primary data flow.

Orange – control flow.

Solid green – memory read.

Dashed green – memory write.

Purple curve – feedback loop.

Gray dashed – asynchronous communication.

Product Icons

More than 40 icons for mainstream technology products are bundled, preserving brand colors:

AI models: OpenAI, Anthropic, Google, Meta.

Vector databases: Pinecone, Weaviate, Milvus, Chroma.

Databases: PostgreSQL, MySQL, MongoDB, Redis.

Message queues: Kafka, RabbitMQ.

Cloud services: AWS, GCP, Azure.

Installation & Usage

npx skills add yizhiyanhua-ai/fireworks-tech-graph

or clone the repository:

git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph

PNG rendering requires rsvg-convert. Install with brew install librsvg on macOS or apt install librsvg2-bin on Ubuntu.

After installation, prompts such as “Draw a RAG pipeline flowchart” or “Generate a Mem0 architecture diagram, dark style” trigger the skill to recognize trigger words, generate SVG, and export a 1920 px PNG.

Repository

https://github.com/yizhiyanhua-ai/fireworks-tech-graph