Claude MarketplacesSubmit
mhattingpete avatar

Architecture Diagram Creator

mhattingpete/claude-skills-marketplace

Generates a standalone HTML file with six sections covering everything from business objectives to deployment details. It pulls from your project files to create SVG diagrams showing data flows and processing pipelines, using a consistent color scheme (blue for data sources, orange for processing, green for outputs). Good for when you need documentation that explains both the what and the why of a system, especially if you're onboarding someone or preparing for a review. The output is immediately viewable in a browser without any dependencies, which beats wrestling with diagramming tools when you just need something clear and shareable.

skills.sh installs
500
GitHub stars
693
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/mhattingpete/claude-skills-marketplace
Categories
Frontend Development, Documentation, Code Review & Quality
License
Apache-2.0
First seen
Jun 3, 2026

More from mhattingpete/claude-skills-marketplace

All 18

Recommended

More Frontend Development
1openzeppelin avatarupgrade-solidity-contractsopenzeppelin/openzeppelin-skillsUpgrade Solidity smart contracts using OpenZeppelin proxy patterns. Use when users need to: (1) make contracts upgradeable with UUPS, Transparent, or Beacon pro500skills.sh installs
2freestylefly avatarcanghe-post-to-wechatfreestylefly/canghe-skillsPosts content to WeChat Official Account (微信公众号) via API or Chrome CDP. Supports article posting (文章) with HTML, markdown, or plain text input, and image-text p498skills.sh installs
3next-safe-action avatarsafe-action-better-authnext-safe-action/skillsUse when adding authentication or authorization to safe actions with Better Auth -- covers betterAuth() middleware setup, typed session context (BetterAuthConte496skills.sh installs
4davila7 avatarcoding-standardsdavila7/claude-code-templatesUniversal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.494skills.sh installs
5parcadei avatarhelpparcadei/continuous-claude-v3Interactive workspace discovery - learn what tools, workflows, agents, and hooks are available493skills.sh installs
6davila7 avatarautonomous-agentsdavila7/claude-code-templatesAutonomous agents are AI systems that can independently decompose goals, plan actions, execute tools, and self-correct without constant human guidance. The chal492skills.sh installs