Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
mhattingpete avatar

Architecture Diagram Creator

mhattingpete/claude-skills-marketplace

  • 357 installs
  • 656 repo stars
  • Updated July 25, 2026
  • mhattingpete/claude-skills-marketplace

architecture-diagram-creator is a generator skill that produces software architecture diagrams from codebase context so developers can document system components, data flows, and service boundaries.

About

architecture-diagram-creator is a Claude skills marketplace skill for developers documenting software systems who need architecture diagrams without manually drawing every box and arrow. The skill analyzes project structure, services, databases, and integration points to generate diagrams that communicate component relationships, data flows, and deployment boundaries for README files, design reviews, or onboarding docs. Developers reach for architecture-diagram-creator when a repo lacks visual system documentation, a design review needs a current-state diagram, or agent-assisted refactors require an up-to-date map of modules and APIs. Output targets standard diagram notations readable by engineering stakeholders.

  • architecture-diagram-creator
  • AI & Agent Building
  • AI-coding skill

Architecture Diagram Creator by the numbers

  • 357 all-time installs (skills.sh)
  • +9 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #2,122 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs357
repo stars★ 656
Last updatedJuly 25, 2026
Repositorymhattingpete/claude-skills-marketplace ↗

How do you generate architecture diagrams from a codebase?

Helps with ai & agent building tasks.

Who is it for?

Developers documenting existing or planned systems who need architecture diagrams for README files, design reviews, or onboarding without manual diagram tooling.

Skip if: Teams needing pixel-perfect UI mockups, network topology maps with live infra discovery, or formal regulated compliance diagram standards.

When should I use this skill?

A project lacks architecture visuals, a design review needs a system map, or refactoring requires documenting current module and API relationships.

What you get

Architecture diagrams documenting components, data flows, APIs, and deployment boundaries for the target system.

  • architecture diagram files
  • component and data-flow documentation

Files

SKILL.mdMarkdownGitHub ↗

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

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

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

Related skills

mattpocockSetup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196kopen.feishu.cnLark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402kjuliusbrusseeCavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7klarksuiteLark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16kxixu-meRunning Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72runcomfy-comCodex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10

How it compares

Pick this skill for quick codebase-derived architecture visuals rather than deep C4 modeling suites or live cloud infrastructure discovery tools.

FAQ

What does architecture-diagram-creator produce?

architecture-diagram-creator produces software architecture diagrams from codebase analysis. Output shows components, data flows, service boundaries, and integration points suitable for README files, design reviews, or onboarding documentation.

When should developers use architecture-diagram-creator?

Developers should use architecture-diagram-creator when a repo lacks visual system documentation, a design review needs a current-state map, or refactoring requires an updated diagram of modules, APIs, and data paths.

AI & Agent Buildingagents
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.