---
id: mhattingpete/claude-skills-marketplace/architecture-diagram-creator
version: "bb100777"
license: Apache-2.0
install: manual
updated: 2026-07-25
---
# architecture-diagram-creator — This skill produces comprehensive HTML architecture diagrams that map business objectives, data flows, processing pipelines, and system components in a single visual document. It structures technical architecture across layers—data, processing, services, and outputs—with SVG visualizations and semantic color coding for clarity.
Publisher: mhattingpete · Stars: 657 · Updated: 2026-07-25
Install (manual): `git clone https://github.com/mhattingpete/claude-skills-marketplace`
## SKILL.md
# 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
1. **Business Context**: objectives, users, value, metrics
2. **Data Flow**: sources → processing → outputs with SVG diagram
3. **Processing Pipeline**: multi-stage visualization
4. **System Architecture**: layered components (data/processing/services/output)
5. **Features**: functional and non-functional requirements
6. **Deployment**: model, prerequisites, workflows
## HTML Structure
```html
[Project] Architecture
[Project Name] - Architecture Overview
```
## SVG Pattern for Data Flow
```html
```
## Workflow
1. Analyze project (README, code structure)
2. Extract: purpose, data sources, processing, tech stack, outputs
3. Create HTML with all 6 sections
4. Use semantic colors for visual hierarchy
5. Write to `[project]-architecture.html`
Keep diagrams clear, use consistent styling, include real project details.
[View on SkillFed](https://skillfed.io/mhattingpete/claude-skills-marketplace/architecture-diagram-creator) · [View on GitHub](https://github.com/mhattingpete/claude-skills-marketplace)