Does the Mermaid output work on GitHub?

Absolutely. The skill generates standard Mermaid.js syntax within fenced code blocks, which are natively rendered by GitHub, GitLab, and most modern Markdown editors.

How does the skill handle complex systems?

The skill follows specific rules to prevent clutter, such as splitting massive systems into sub-diagrams and using standardized semantic colors to keep the visualization readable.

Can it automatically analyze my existing code?

Yes. The skill follows a non-negotiable analysis phase where it scans your repository, documentation, or descriptions to identify components and data flows before drawing.

What is included in the HTML version of the diagram?

The HTML format provides a comprehensive report featuring six sections: Business Context, Data Flow, Processing Pipeline, System Architecture, Features Grid, and Deployment details.

What diagram formats can this skill generate?

The skill supports three primary formats: interactive HTML files for standalone viewing, Mermaid code blocks for GitHub and Markdown documentation, and DOT files for Graphviz toolchains.

Architecture Diagram Creator

Name: Architecture Diagram Creator
Author: prakhar625

byprakhar625

0•

学习与文档

Generates professional system architecture, data flow, and component diagrams in HTML, Mermaid, or DOT formats directly from your codebase.

The Architecture Diagram Creator is a specialized skill for Claude Code designed to transform complex technical requirements and codebases into clear, visual documentation. It automates the creation of high-fidelity diagrams by first analyzing system components, dependencies, and data pipelines to ensure accuracy. Whether you need an interactive HTML report for stakeholders, a Mermaid block for a GitHub README, or a DOT file for Graphviz rendering, this skill applies strict semantic color coding and architectural best practices to provide consistent, production-ready visualizations of your software's structure.

主要功能

01Specialized Mermaid support for C4 models, sequence diagrams, and service maps.

02Supports multiple output formats: interactive HTML, Mermaid.js, and Graphviz (DOT).

030 GitHub stars

04Comprehensive six-section HTML reports covering business context through deployment details.

05Strict semantic color coding system to distinguish data, processing, AI, and infrastructure.

06Automated codebase analysis to identify services, layers, and external integrations.

使用场景

01Generating high-level system overviews for project READMEs and technical documentation.

02Mapping out microservices architectures and service-to-service communication flows.

03Visualizing complex data processing pipelines and AI/ML workflows for stakeholder reviews.

主要功能

01Specialized Mermaid support for C4 models, sequence diagrams, and service maps.

02Supports multiple output formats: interactive HTML, Mermaid.js, and Graphviz (DOT).

030 GitHub stars

04Comprehensive six-section HTML reports covering business context through deployment details.

05Strict semantic color coding system to distinguish data, processing, AI, and infrastructure.

06Automated codebase analysis to identify services, layers, and external integrations.

使用场景

01Generating high-level system overviews for project READMEs and technical documentation.

02Mapping out microservices architectures and service-to-service communication flows.

03Visualizing complex data processing pipelines and AI/ML workflows for stakeholder reviews.