How Developers Use SKILL to Generate AI Diagrams Quickly

1. fireworks‑tech‑graph

fireworks‑tech‑graph is an open‑source AI diagram generator that creates publication‑grade SVG and high‑resolution PNG charts from natural‑language prompts. It supports seven visual styles, fourteen UML diagram types, and AI/Agent‑specific modes such as RAG and multi‑agent workflows. Project URL: https://GH.com/yizhiyanhua-ai/fireworks-tech-graph

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

Typical workflow: first write an architecture description file, then run the skill to produce an SVG:

/fireworks-tech-graph 阅读 @architecture-design.md , 根据架构设计说明，绘制所有设计图。

The generated SVG can be opened directly in VS Code and is sufficient for most communication needs. An example deployment diagram is shown below, which the author uses to discuss architecture with clients and team members.

To obtain a PNG, the author downloads rsvg-convert and converts the SVG, though conversion is usually unnecessary.

2. markdown‑viewer

markdown‑viewer (https://docu.md/) provides a collection of drawing skills. Project URL: https://GH.com/markdown-viewer/skills npx skills add markdown-viewer/skills The skill set includes an architechture skill that reads an architecture description and generates an HTML page indexing all diagrams, enabling easy browsing.

Example usage produces an HTML diagram directly from natural language, and the generated index page lists all created diagrams.

3. architecture‑diagram

architecture‑diagram is another generator that reads an architecture design markdown file and produces a deployment diagram. Project URL: https://GH.com/Cocoon-AI/architecture-diagram-generator

/architecture-diagram @architecture-design.md 阅读架构设计说明，绘制部署架构图

The tool outputs an HTML page with a visually appealing diagram; the top‑right corner allows exporting to PNG or PDF.