architecture-diagram-creator — Claude Code skill: how to install
Creates a standalone HTML architecture document with SVG data flow diagrams and project structure. Helpful when you need to document system layers or explain processing pipelines.
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a claude-codeWhat architecture-diagram-creator does
The skill reads the project README and codebase to generate a single [project]-architecture.html report. It structures information into six distinct sections: business context, data flow, processing pipeline, system architecture layers, feature requirements, and deployment details.
Visual flow charts are rendered directly via inline SVG elements. It applies fixed semantic colors to distinguish components: #4299e1 for data sources, #ed8936 for processing stages, #9f7aea for AI modules, and #48bb78 for outputs.
The resulting file relies on basic HTML and inline styles. Because everything lives in one file, you can open and share the diagram without spinning up external services.
What it helps with
- document system architecture for an existing codebase
- generate SVG data flow diagrams from sources to outputs
- visualize multi-stage processing pipelines
- compile deployment prerequisites and business goals into one file
Example prompts for the agent
- Create architecture diagram for this project
- Generate high-level overview and document system architecture
- Show data flow and processing pipeline in HTML
How to install architecture-diagram-creator
1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a claude-code2Manually: put the files in place
~/.claude/skills/architecture-diagram-creator/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/architecture-diagram-creator/
1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a codex2Manually: put the files in place
.agents/skills/architecture-diagram-creator/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a cursor2Manually: put the files in place
.cursor/skills/architecture-diagram-creator/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install mhattingpete/claude-skills-marketplace architecture-diagram-creator2Manually: put the files in place
.github/skills/architecture-diagram-creator/SKILL.md1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a gemini-cli2Platform CLI
gemini skills install https://github.com/mhattingpete/claude-skills-marketplace --path visual-documentation-plugin/skills/architecture-diagram-creatorManually: put the files in place
.devin/skills/architecture-diagram-creator/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about architecture-diagram-creator
How to install architecture-diagram-creator in Claude Code?
Run npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a claude-code or place the specification in ~/.claude/skills/architecture-diagram-creator/SKILL.md.
What does architecture-diagram-creator do?
It inspects your repository and outputs a [project]-architecture.html file containing system layers, business goals, and inline SVG flow diagrams.
What sections are included in the generated diagram?
The report includes business context, data flow diagrams, processing pipeline stages, system architecture layers, features, and deployment prerequisites.
Source text
SKILL.md · Apache-2.0
---
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.
© mhattingpete · Apache-2.0 · mhattingpete/claude-skills-marketplace
