architecture-diagram-generator

Generate beautiful system architecture diagrams with dark theme support.

Agent SkillDevOpen source

Type: Agent Skill
Open source: Yes
GitHub Stars: ★ 6.1k
Source: skill-github
Repository: github.com/Cocoon-AI/architecture-diagram-generator

Overview

Architecture Diagram Generator is a Claude AI skill that quickly generates professional system architecture diagrams. Simply describe your system architecture in natural language, and Claude will produce a visually appealing, dark-themed HTML/SVG file. No design skills required, rapid iteration, easy sharing and export. Ideal for developers and technical professionals who need to quickly create and modify system architecture diagrams.

Capabilities

▪Generate dark theme architecture diagrams
▪Support natural language descriptions
▪Fast iteration and modification
▪Single-file output for easy sharing
▪Built-in copy/PNG/PDF export

Use cases

Generate web application architecture diagramsGenerate AWS serverless architecture diagramsGenerate microservices architecture diagramsRapid prototyping

Setup

Requires: API KeyNode 环境

1. Download `architecture-diagram.zip`.\n2. Go to [claude.ai](https://claude.ai) → **Customize** → **Skills**.\n3. Click the **+** button → **+ Create skill** → **Upload a skill**, then upload the zip file.\n4. Enable the skill.

This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.

FAQ

How do I get the system architecture description?

You can either analyze your codebase with AI or manually write the description.

What format is the generated architecture diagram?

The output is a standalone HTML/SVG file.

Do I need to install additional software?

No, just open it directly in your browser.

Related skills

mantis

Provides security review capabilities for AI coding agents, automatically discovering, reproducing, and fixing vulnerabilities.

Agent Skill

sast-skills

Transform your AI coding assistant into a SAST scanner to automatically detect vulnerabilities in code.

Agent Skill

Lightswind-UI-Library

AI-native CLI-first React component library with MCP Server support.

MCP

scientific-agent-skills

Transform any AI agent into a scientific assistant with 147 ready-to-use research skills.

Agent Skill

susi_alexa_skill

A skill that enables question-and-answer interactions between Alexa and Susi AI.

Agent Skill

claude-context

Provides code search capabilities for Claude Code, turning the entire codebase into context.

MCP