Architecture Diagram Creator

Architecture Diagram Creator is a Writing skill for Claude Code, published by mhattingpete in claude-skills-marketplace.

664 stars95 forkson mhattingpete/claude-skills-marketplaceAdded 2026/08/24+1% in starsRepository updated 2026/07/25

View source on GitHub Download repo ZIP

ai-agentsai-toolsanthropicautomationclaude-codeclaude-skillsdeveloper-toolspluginsproductivity

Install in seconds

Install Architecture Diagram Creator

Copy Architecture Diagram Creator into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/architecture-diagram-creator ~/.claude/skills/architecture-diagram-creator

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/mhattingpete/claude-skills-marketplace.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: visual-documentation-plugin/skills/architecture-diagram-creator/SKILL.md in mhattingpete/claude-skills-marketplace
Installs to: ~/.claude/skills/architecture-diagram-creator
Collection: One of 18 skills cataloged from this repository
Category: Writing — 1012 skills

What Architecture Diagram Creator does

Architecture Diagram Creator builds HTML architecture diagrams that show business context, data flow, system layers, and deployment details. Use it for system documentation, technical specifications, or high-level project overviews.

Architecture Diagram Creator is cataloged under Writing on DirSkills. Architecture Diagram Creator comes from a repository tagged ai-agents, ai-tools, anthropic, automation and claude-code.

Documentation

README

Excerpt

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

Business Context: objectives, users, value, metrics
Data Flow: sources → processing → outputs with SVG diagram
Processing Pipeline: multi-stage visualization
System Architecture: layered components (data/processing/services/output)
Features: functional and non-functional requirements
Deployment: model, prerequisites, workflows

HTML Structure

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Architecture Diagram Creator

What else does mhattingpete publish alongside Architecture Diagram Creator?
Architecture Diagram Creator is one of 18 skills that DirSkills catalogs from mhattingpete/claude-skills-marketplace, the repository it ships in. Its siblings there include Code Auditor, Code Execution and Code Refactor. Each one is a separate skill with its own page in this directory, installs the same way Architecture Diagram Creator does, and is maintained by mhattingpete in that same repository. The rest of the collection is listed on the mhattingpete/claude-skills-marketplace page.
How does Architecture Diagram Creator compare to other Writing skills?
Architecture Diagram Creator ranks #628 by stars among the 1012 Writing skills in this catalog. The most-starred ones next to it are Article Writing, Social Media Content Calendar and Knowledge Comic Creator. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Architecture Diagram Creator against them. Open each page to compare what they document and how they install.