---
name: Architecture Diagram Creator
description: Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture
---

# Architecture Diagram Creator

Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture

What is it?
Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture Built for use cases involving architecture-diagram, visualization, svg, system-design, documentation.

## How to use it?
Install this skill in your Claude environment to enhance architecture diagram creator capabilities. Once installed, Claude will automatically apply the skill's guidelines when relevant tasks are detected. You can also explicitly invoke it by referencing its name in your prompts.

The full source and documentation is available on GitHub.

## Key Features

* Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture
* Automated documentation generation
* Seamless integration with Claude's development workflowView on GitHub

### GitHub Stats
StarsForksLast UpdateAuthormhattingpeteLicenseApache-2.0Version1.0.0

### Categories
Developer ToolsDesign

### Tags
architecture-diagramvisualizationsvgsystem-designdocumentation

### Features

## Related Skills
More from Developer Tools

### Flowchart Creator
Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types

350mhattingpeteDeveloper ToolsDesign00

### Web Asset Generator
Generate favicons, app icons (PWA), and social media Open Graph images from logos or text

120alonw0DesignDeveloper Tools00

### Frontend Design
The official Claude frontend design skill by Anthropic. Guides Claude Code to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, spatial composition, and UI design patterns

5.7kanthropicsDesignDeveloper Tools00

---

**Source**: https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/architecture-diagram-creator
**Author**: mhattingpete
**License**: https://opensource.org/licenses/Apache-2.0
**GitHub Stars**: 350
**Tags**: architecture-diagram, visualization, svg, system-design, documentation