Do I need external software to view the diagrams?

No, the output is standard HTML and SVG code which can be viewed in any modern web browser without additional plugins or software.

What sections are included in the generated diagram?

Each diagram includes six key sections: Business Context, Data Flow (SVG), Processing Pipeline (SVG), System Architecture Layers, Feature Grids, and Deployment Information.

Where is the output file saved?

The skill typically writes the final documentation to a local file named '[project]-architecture.html' within your project directory for easy sharing and viewing.

How does the Architecture Diagram Creator work?

It analyzes your project's code structure and README to extract key components, then generates a single-file HTML document containing styled SVG diagrams and technical summaries.

Can I customize the look of the diagrams?

Yes, the skill uses a standardized CSS and SVG pattern that uses semantic coloring, which can be easily modified or extended to match your specific branding needs.

Architecture Diagram Creator

Name: Architecture Diagram Creator
Author: mhattingpete

bymhattingpete

•

126

Learning & Documentation

Generates comprehensive HTML and SVG architecture diagrams to document system designs and data workflows automatically.

About

The Architecture Diagram Creator skill empowers Claude to visualize complex software systems by generating interactive, well-structured HTML documentation. It automatically extracts project insights from source code and READMEs to build high-level overviews including data flow SVGs, multi-stage processing pipelines, layered system architectures, and business context sections. This skill is ideal for developers needing to maintain up-to-date documentation or stakeholders requiring visual technical specifications without the manual effort of using external drawing tools.

Key Features

Automated SVG data flow and pipeline generation
Mobile-responsive HTML documentation output
Layered system architecture visualization (Data/Services/UI)
Extraction of tech stack and deployment requirements from code
Business context and value metric mapping
126 GitHub stars

Use Cases

Mapping complex data processing pipelines from source to output
Generating technical visual aids for a system design review
Documenting a legacy codebase for new team members

About

Key Features

Automated SVG data flow and pipeline generation
Mobile-responsive HTML documentation output
Layered system architecture visualization (Data/Services/UI)
Extraction of tech stack and deployment requirements from code
Business context and value metric mapping
126 GitHub stars

Use Cases

Mapping complex data processing pipelines from source to output
Generating technical visual aids for a system design review
Documenting a legacy codebase for new team members