Generate production-quality SVG+PNG technical diagrams from natural language descriptions.
Stop drawing diagrams by hand. Describe your system in English or Chinese — get publication-ready SVG+PNG technical diagrams in seconds.
diagram-drawing turns natural language into polished SVG diagrams, then exports them as high-resolution PNG. It supports 7 visual styles, deep knowledge of AI/Agent domain patterns (RAG, Agentic Search, Mem0, Multi-Agent, Tool Call flows), and full UML diagram support.
- 7 visual styles — from clean white docs to dark neon to frosted glass
- 14+ diagram types — Architecture, Data Flow, Flowchart, Sequence, Agent/Memory, UML, Mind Map, and more
- AI/Agent domain patterns — RAG, Agentic Search, Mem0, Multi-Agent, Tool Call 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)
- 40+ product icons — 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
- No external dependencies — pure inline SVG, rsvg-convert compatible
# Via clawhub (if available)
clawhub install diagram-drawing
# Or clone directly
git clone https://github.com/0xcjl/diagram-drawing.git ~/.openclaw/skills/diagram-drawing# Clone the repo
git clone https://github.com/0xcjl/diagram-drawing.git
# Install to OpenClaw
ln -sf $(pwd)/diagram-drawing ~/.openclaw/skills/diagram-drawing
# Install to Claude Code
ln -sf $(pwd)/diagram-drawing ~/.claude/skills/diagram-drawingThe skill works without these, but for PNG export:
# macOS
brew install librsvg
# Ubuntu/Debian
sudo apt install librsvg2-bin
# Or use Python fallback (auto-detected)
pip install cairosvg
# or
pip install svglib reportlab PillowEnglish:
generate diagram,draw diagram,create chart,visualizearchitecture diagram,flowchart,sequence diagram,data flowtech graph
中文:
画图,帮我画,生成图,做个图,架构图,流程图可视化,出图,技术图
Draw a RAG pipeline flowchart
Generate an Agentic Search architecture diagram
Draw a microservices architecture diagram, dark style
Draw a multi-agent collaboration diagram --style glassmorphism
Generate a Mem0 architecture diagram
帮我画个微服务架构图
画一个 RAG 流程图
- SVG:
./[name].svg— editable vector format - PNG:
./[name].png— 1920px high-resolution raster
| # | Name | Background | Best For |
|---|---|---|---|
| 1 | Flat Icon (default) | White | Blogs, docs, presentations |
| 2 | Dark Terminal | #0f0f1a |
GitHub, dev articles |
| 3 | Blueprint | #0a1628 |
Architecture docs |
| 4 | Notion Clean | White | Notion, Confluence, wikis |
| 5 | Glassmorphism | #0d1117 gradient |
Product sites, keynotes |
| 6 | Claude Official | #f8f6f3 warm cream |
Anthropic-style diagrams |
| 7 | OpenAI Official | Pure white | OpenAI-style diagrams |
RAG Pipeline: Query → Embed → VectorSearch → Retrieve → LLM → Response
Agentic RAG: Query → Embed → VectorSearch → Agent loop → LLM → Response
Agentic Search: Query → Planner → [Search/Calc/Code] → Synthesizer → Response
Mem0 Memory: Input → Memory Manager → [Write: VectorDB+GraphDB] → [Read: Retrieve] → Context
Multi-Agent: Orchestrator → [SubAgent A / B / C] → Aggregator → Output
Tool Call Flow: LLM → Tool Selector → Execution → Parser → LLM (loop)
diagram-drawing/
├── SKILL.md # Main skill
├── references/
│ ├── styles.md # 7 style color tokens + patterns
│ └── icons.md # Semantic shapes + 40+ product icons
└── scripts/
└── svg2png.py # PNG export (auto-fallback)
- Original inspiration: fireworks-tech-graph by yizhiyanhua-ai
- Optimization: autoresearch-pro methodology (Karpathy-style mutation testing)
- Author: 0xcjl
MIT