playbooks

home / skills / mhattingpete / claude-skills-marketplace / architecture-diagram-creator

architecture-diagram-creator skill

/visual-documentation-plugin/skills/architecture-diagram-creator

This skill generates HTML architecture diagrams including data flows, business context, and deployment for high-level system documentation.

npx playbooks add skill mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
2.6 KB
---
name: architecture-diagram-creator
description: 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.
---

# 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
<!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

```html
<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

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.

Overview

This skill generates comprehensive HTML architecture diagrams that combine business context, data flows, processing pipelines, system layers, features, and deployment details. It produces a single self-contained HTML page with SVG diagrams and semantic color styling to communicate architecture clearly. Use it to create documentation-ready visuals and high-level technical overviews.

How this skill works

The skill analyzes project inputs (purpose, data sources, processing stages, tech stack, and outputs) and maps them into six structured sections: Business Context, Data Flow, Processing Pipeline, System Architecture, Features, and Deployment. It constructs responsive HTML with embedded SVG diagrams (data sources → processing → outputs), consistent semantic colors, and concise explanatory text. The output is a standalone HTML file you can review, share, or embed in docs.

When to use it

  • You need a high-level system overview for stakeholders or architects
  • Document data flows and processing pipelines for a project
  • Prepare architecture visuals for proposals, design reviews, or onboarding
  • Create deployment and prerequisites documentation alongside diagrams
  • Translate README or design notes into a clear, shareable HTML diagram

Best practices

  • Start with business objectives and user personas to keep the diagram focused
  • Keep SVG diagrams simple: group related components and use arrows for flow
  • Use the semantic color palette consistently: data (blue), processing (orange), AI (purple), success/output (green)
  • Annotate each section with short bullets: purpose, inputs, outputs, and metrics
  • Export the HTML as a single file for easy sharing and versioning

Example use cases

  • Generate an architecture overview for a new ML-powered feature showing data ingress, model inference, and dashboards
  • Document system architecture for an API-first microservices project with deployment notes
  • Create a visual summary of a data pipeline from ingestion through ETL to analytics outputs
  • Produce a stakeholder-friendly overview that links business objectives to technical components
  • Prepare architecture slides by exporting the HTML and taking high-resolution screenshots

FAQ

Can I customize colors and layout?

Yes. The HTML uses CSS variables and a semantic palette; you can edit styles and SVG coordinates to match brand or layout needs.

What inputs does the skill need to create an accurate diagram?

Provide project purpose, primary data sources, major processing stages, key services or components, expected outputs, and deployment constraints or prerequisites.