Two AI Diagram Skills That Supercharge DeepSeek for Architecture Visuals

Pain Point: Manual Diagram Drawing Is Slow and Error-Prone

The author describes the frustration of creating architecture diagrams in Draw.io — aligning shapes manually and exporting blurry images. This led to a search for AI-powered skills that could automate the process.

Two Skills Discovered

Two GitHub projects were found:

fireworks-tech-graph — generates SVG/PNG from Chinese descriptions with 8 built-in styles.

architecture-diagram-generator — outputs a standalone HTML file with dark theme, semantic coloring, and copy/PNG/PDF buttons.

Skill 1: fireworks-tech-graph

Capabilities

This skill accepts a natural language description of a system and produces a clean SVG in seconds. It includes 8 preset styles: Flat Icon, Dark Terminal, Engineering Blueprint, Notion Minimal, Glass Card, plus official Claude and OpenAI styles. It also understands AI-specific patterns such as RAG, Multi-Agent, and Mem0 without extra explanation.

Example 1: Mem0 Memory Architecture (Style 1 – Flat Icon)

Prompt fed to DeepSeek-V4-Pro:

画一张 style 1（Flat Icon）的 Mem0 记忆架构图。
分成四个横向区域，Input Layer、Memory Manager、Storage Layer、Output / Retrieval。
包含 User、AI App / Agent、LLM、mem0 Client、Memory Manager、Vector Store、Graph DB、Key-Value Store、History Store、Context Builder、Ranked Results、Personalized Response。
使用 read、write、control、data 四类语义箭头，整体保持产品文档风格的清晰布局。

The generated SVG was exported to PNG and embedded in the article. The result looks like a professional product documentation diagram.

After generation, the tool provides analysis and validation steps.

Example 2: Tool Call Execution Flow (Style 2 – Dark Terminal)

Prompt:

画一张 style 2（Dark Terminal）的 tool call flow 图。
包含 User query、Retrieve chunks、Generate answer、Knowledge base、Agent、Terminal、Source documents、Grounded answer。
使用终端窗口 chrome、Neon 强调色、等宽字体，以及 retrieval、answer synthesis、embedding update 三类语义箭头。

The output resembles a hacker terminal with neon accents and monospace font, ideal for GitHub README files.

Skill 2: architecture-diagram-generator

Capabilities

This skill outputs a single HTML file that renders a dark-themed architecture diagram in the browser. It features semantic coloring: frontend (cyan), backend (emerald), database (purple), cloud services (amber), security (rose). The diagram includes Copy, PNG, and PDF buttons for easy sharing. Arrows are drawn before component boxes so lines never overlap text.

Example 1: Standard Web Application

Prompt:

Create an architecture diagram for a web application with
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication

Result shows clean layers with consistent coloring.

Example 2: AWS Serverless Architecture

Prompt:

Create an architecture diagram showing
- CloudFront CDN
- API Gateway
- Lambda functions (Node.js)
- DynamoDB
- S3 for static assets
- Cognito for auth

Result displays a well-structured serverless diagram with proper AWS service icons and semantic colors.

The author iterated conversationally (e.g., "move this service left", "add Kafka") and the diagram updated in real time.

Key Insight: Skills Outlast Models

The author emphasizes that models change (today DeepSeek, tomorrow another), but reusable prompt-based skills remain valuable. Building a personal library of such skills creates a durable advantage.

Models are replaceable; skills are portable. The methodology you accumulate cannot be taken away.

References

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

https://github.com/Cocoon-AI/architecture-diagram-generator