Claude Code Skill

Draw diagrams by
describing them

Production-grade architecture diagrams, flowcharts, and sequence diagrams — beautiful HTML output with professional themes and interactive controls.

Install Now View on GitHub

Diagram Types

Professional Themes

Runtime Dependencies

Rendering Engines

Azure Icons

Features

Everything in one HTML file

Every generated diagram is a single, self-contained HTML file — open it, share it, no server needed.

🎨

5 Professional Themes

Corporate navy, Dark Mode slate, Minimal grayscale, Tech purple-cyan, Warm amber — switchable at runtime without re-generating.

🔍

Interactive Controls

Zoom 25%–300% with mouse wheel or buttons, drag to pan, keyboard shortcuts. Works on desktop and mobile touch.

📤

Export SVG & PNG

Export as vector SVG for infinite scaling or 2× retina PNG for presentations. One click, no plugins.

⚡

Zero Dependencies

Mermaid.js is loaded via CDN — no npm install, no CLI tools, no build step. The HTML file works offline after first load.

🏗️

8+ Diagram Types

Flowchart, Sequence, ER, State, Class, Mind Map, Gantt, C4 Architecture — all from plain text descriptions.

🖨️

Print Ready

Print-optimized CSS hides controls, removes backgrounds, and ensures clean output for documentation and slides.

☁️

43 Azure Cloud Icons

Built-in Azure service icons (VM, AKS, Firewall, SQL, Key Vault…). Use @azure:alias in D2 diagrams — automatically embedded as base64, no internet needed.

Azure Icons

Real service icons in deployment diagrams

Use @azure:alias in D2 source. Icons are embedded as base64 — the output HTML is fully self-contained.

Azure Hub-Spoke Deployment Architecture — D2 engine with @azure: icons

Azure Hub-Spoke deployment diagram with cloud icons

@azure:vm

@azure:kubernetes

@azure:firewall

@azure:load-balancer

@azure:sql

@azure:cosmos-db

@azure:key-vault

@azure:storage

@azure:openai

+34 more…

Live Demo

4 AI Architecture Dimensions

Click to switch architecture type, click theme pills to change themes — live render, zero delay.

Corporate

Dark Mode

Minimal

Tech

Warm

AI Application Architecture — Corporate theme

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#1e3a5a','primaryTextColor': '#ffffff','primaryBorderColor': '#1e40af','lineColor': '#64748b','secondaryColor': '#3b82f6','tertiaryColor': '#e0e7ff','background': '#f8fafc','edgeLabelBackground': '#ffffff'}}}%% flowchart LR subgraph CLIENT["客户端层"] WEB["Web 应用"]:::c SDK["API 客户端"]:::c end subgraph APP["应用层"] GW["API 网关"]:::a PM["Prompt 管理"]:::a SM["会话管理"]:::a end subgraph AI["AI 服务"] LLM["LLM 服务"]:::ai EMB["Embedding"]:::ai RAG["RAG 引擎"]:::ai end subgraph DATA["数据层"] VDB[("向量数据库")]:::d DOCS[("文档存储")]:::d CACHE[("Redis 缓存")]:::d end CLIENT --> GW GW --> PM GW --> SM PM --> LLM SM --> LLM RAG --> LLM EMB --> VDB RAG --> VDB RAG --> DOCS LLM --> CACHE classDef c fill:#3b82f6,stroke:#1e40af,color:#fff classDef a fill:#7c3aed,stroke:#6d28d9,color:#fff classDef ai fill:#10b981,stroke:#059669,color:#fff classDef d fill:#f59e0b,stroke:#d97706,color:#fff

RAG Q&A Platform — complete layered architecture from client to LLM service

Installation

Get started in 30 seconds

Two ways to install — pick whichever fits your workflow.

Download and place the packaged .skill file in your skills directory:

# 1. Download the latest release
curl -L https://github.com/lohasle/diagram-architect.skill/releases/latest/download/diagram-architect.skill \
  -o ~/.claude/skills/diagram-architect.skill

# 2. Claude Code auto-discovers it on next launch
# No further configuration needed

Clone the source directly into your skills directory:

# Clone into skills directory as 'diagram-architect'
git clone https://github.com/lohasle/diagram-architect.skill.git \
  ~/.claude/skills/diagram-architect

# Update later with:
cd ~/.claude/skills/diagram-architect && git pull

Confirm the skill is installed:

# Check the skills directory
ls ~/.claude/skills/
# → diagram-architect/  (or diagram-architect.skill)

# In Claude Code, type /skills to see active skills
# diagram-architect should appear in the list

For D2/PlantUML rendering via render.py:

pip install requests

Usage

Just describe what you need

No syntax to learn. Claude generates the diagram code, picks the best theme, and writes the HTML file.

Example Prompts

Application "Draw an application architecture for a RAG Q&A platform, using Tech theme"

Data "Generate a data processing pipeline architecture for an AI knowledge base"

Deployment "Draw production AI inference deployment architecture with GPU cluster and monitoring"

Module "Draw an AI Agent framework module architecture using Dark Mode theme"

Sequence "Draw a sequence diagram for user interactions with LLM service including RAG retrieval"

Azure Icons "Draw an Azure Hub-Spoke deployment architecture with firewall, AKS, SQL and Key Vault using @azure icons"

Keyboard Shortcuts

In the generated HTML file:

Zoom inCtrl +

Zoom outCtrl −

Reset viewCtrl 0

PrintCtrl P

Output File

Claude writes a .html file in the current directory. Open it in any browser — no server required.

Engines

Right engine for every diagram

Claude automatically selects the best rendering engine based on your diagram type.

Engine	Best For	Method	Dependency
Mermaid.js	Flowcharts, Sequence, ER, State, Class, Gantt, Mind Map	CDN	None
D2	Infrastructure, cloud deployment, network topology	kroki.io API	pip install requests
PlantUML	C4 Architecture (Context, Container, Component)	kroki.io API	pip install requests

Draw diagrams bydescribing them