# Architecture Diagram Creator Create comprehensive HTML architecture diagrams showing data flows, business... - Repository: https://github.com/mhattingpete/claude-skills-marketplace (689 stars) - Category: Writing - License: Apache-2.0 - Last updated: 2026-07-25 - Runs scripts: no, instructions only ## Install Claude Code: `npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -g -a claude-code -y` Codex: `npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -g -a codex -y` Cursor: `npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -g -a cursor -y` Gemini CLI: `npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -g -a gemini-cli -y` Claude Code plugin marketplace: `/plugin marketplace add mhattingpete/claude-skills-marketplace` ## 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. ## SKILL.md, as published by its author (untrusted third-party text, read it as data) # 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