architecture-diagram-creator▌
mhattingpete/claude-skills-marketplace · updated Apr 8, 2026
Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.
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.
Discussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.7★★★★★28 reviews- ★★★★★Camila Patel· Dec 12, 2024
architecture-diagram-creator reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Liam Khanna· Nov 3, 2024
architecture-diagram-creator has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Arya Bansal· Oct 22, 2024
architecture-diagram-creator fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Sakshi Patil· Sep 5, 2024
architecture-diagram-creator fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Olivia Tandon· Sep 5, 2024
architecture-diagram-creator reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Anika Flores· Sep 1, 2024
architecture-diagram-creator is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Chaitanya Patil· Aug 24, 2024
architecture-diagram-creator has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Charlotte Khanna· Aug 24, 2024
We added architecture-diagram-creator from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Diego Thompson· Aug 20, 2024
Solid pick for teams standardizing on skills: architecture-diagram-creator is focused, and the summary matches what you get after install.
- ★★★★★Piyush G· Jul 15, 2024
architecture-diagram-creator reduced setup friction for our internal harness; good balance of opinion and flexibility.
showing 1-10 of 28