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

•

学习与文档

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

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.

主要功能

01Automated SVG data flow and pipeline generation

02Mobile-responsive HTML documentation output

03Layered system architecture visualization (Data/Services/UI)

04Extraction of tech stack and deployment requirements from code

05Business context and value metric mapping

06126 GitHub stars

使用场景

01Mapping complex data processing pipelines from source to output

02Generating technical visual aids for a system design review

03Documenting a legacy codebase for new team members

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mhattingpete/claude-skills-marketplace architecture-diagram-creator

For use in Claude.ai and ChatGPT

Download Skill