architecture-diagram-creator
Generate technical system architecture diagrams in HTML format.
Install
mkdir -p .claude/skills/architecture-diagram-creator && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3985" && unzip -o skill.zip -d .claude/skills/architecture-diagram-creator && rm skill.zipInstalls to .claude/skills/architecture-diagram-creator
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.Key capabilities
- →Visualize system data flows
- →Document business objectives and metrics
- →Map processing pipelines
- →Generate HTML/SVG architecture diagrams
- →Define deployment prerequisites
How it works
It extracts project metadata and components to generate a structured HTML file containing SVG diagrams and descriptive sections for business and technical context.
Inputs & outputs
When to use architecture-diagram-creator
- →Create architecture diagram for project
- →Generate high-level system overview
- →Document data flow pipelines
- →Visualize service architecture
About this skill
Architecture Diagram Creator
Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.
When to Use
- "Create architecture diagram for [project]"
- "Generate high-level overview"
- "Document system architecture"
- "Show data flow and processing pipeline"
Components to Include
- Business Context: objectives, users, value, metrics
- Data Flow: sources → processing → outputs with SVG diagram
- Processing Pipeline: multi-stage visualization
- System Architecture: layered components (data/processing/services/output)
- Features: functional and non-functional requirements
- Deployment: model, prerequisites, workflows
HTML Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Project] Architecture</title>
<style>
body { font-family: system-ui; max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; }
.section { margin: 30px 0; }
svg { max-width: 100%; }
/* Use semantic colors: #4299e1 (data), #ed8936 (processing), #9f7aea (AI), #48bb78 (success) */
</style>
</head>
<body>
<h1>[Project Name] - Architecture Overview</h1>
<!-- Business Context Section -->
<!-- Data Flow Diagram (SVG) -->
<!-- Processing Pipeline (SVG) -->
<!-- System Architecture Layers -->
<!-- Features Grid -->
<!-- Deployment Info -->
</body>
</html>
SVG Pattern for Data Flow
<svg viewBox="0 0 800 400">
<!-- Data sources (left, blue) -->
<rect x="50" y="150" width="120" height="80" fill="#4299e1"/>
<!-- Processing (center, orange) -->
<rect x="340" y="150" width="120" height="80" fill="#ed8936"/>
<!-- Outputs (right, green) -->
<rect x="630" y="150" width="120" height="80" fill="#48bb78"/>
<!-- Arrows connecting -->
<path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
</svg>
Workflow
- Analyze project (README, code structure)
- Extract: purpose, data sources, processing, tech stack, outputs
- Create HTML with all 6 sections
- Use semantic colors for visual hierarchy
- Write to
[project]-architecture.html
Keep diagrams clear, use consistent styling, include real project details.
When not to use it
- →For simple tasks that do not require architectural documentation
Limitations
- →Requires manual analysis of project structure
- →Limited to the defined six-section HTML structure
How it compares
It provides a standardized, visual documentation format instead of relying on unstructured text descriptions.
Compared to similar skills
architecture-diagram-creator side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| architecture-diagram-creator (this skill) | 8 | 9mo | No flags | Beginner |
| mermaid-diagram-specialist | 12 | 6mo | No flags | Intermediate |
| plantuml-ascii | 8 | 6mo | Review | Beginner |
| mermaidjs-v11 | 4 | 7mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by mhattingpete
View all by mhattingpete →You might also like
mermaid-diagram-specialist
davila7
Mermaid diagram specialist for creating flowcharts, sequence diagrams, ERDs, and architecture visualizations
plantuml-ascii
github
Generate ASCII art diagrams using PlantUML text mode. Use when user asks to create ASCII diagrams, text-based diagrams, terminal-friendly diagrams, or mentions plantuml ascii, text diagram, ascii art diagram. Supports: Converting PlantUML diagrams to ASCII art, Creating sequence diagrams, class diagrams, flowcharts in ASCII format, Generating Unicode-enhanced ASCII art with -utxt flag
mermaidjs-v11
mrgoonie
Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.
flowchart-creator
mhattingpete
Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.
mermaid-visualizer
axtonliu
Transform text content into professional Mermaid diagrams for presentations and documentation. Use when users ask to visualize concepts, create flowcharts, or make diagrams from text. Supports process flows, system architectures, comparisons, mindmaps, and more with built-in syntax error prevention.
mermaid-tools
daymade
Extracts Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts. Activates when working with Mermaid diagrams, converting diagrams to PNG, extracting diagrams from markdown, or processing markdown files with embedded Mermaid code.