# Architecture Diagram Creator

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-mhattingpete-claude-skills-marketplace-architecture-diagram-creator`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mhattingpete](https://agentstack.voostack.com/s/mhattingpete)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [mhattingpete](https://github.com/mhattingpete)
- **Source:** https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/architecture-diagram-creator

## Install

```sh
agentstack add skill-mhattingpete-claude-skills-marketplace-architecture-diagram-creator
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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
  
    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) */
  

  [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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mhattingpete](https://github.com/mhattingpete)
- **Source:** [mhattingpete/claude-skills-marketplace](https://github.com/mhattingpete/claude-skills-marketplace)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mhattingpete-claude-skills-marketplace-architecture-diagram-creator
- Seller: https://agentstack.voostack.com/s/mhattingpete
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.