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.
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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), #
- When to Use
- Components to Include
- HTML Structure
- SVG Pattern for Data Flow
- Workflow
What does the architecture-diagram-creator skill do?
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.
How do I install it?
Run `npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mhattingpete/claude-skills-marketplace, a repository with 656 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.