arch-diagram

Generate interactive five-perspective architecture diagrams with Mermaid runtime flows and custom HTML/CSS.

Updated Mar 3, 2026

Search Tags:#architecture #documentation #mermaid #visualization #html-css #arch-diagram #devicon

Ready to run

npx skills add https://github.com/sukeun1997/claude-config --skill arch-diagram

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: arch-diagram
Source: https://github.com/sukeun1997/claude-config/tree/main/skills/arch-diagram
Command: npx skills add https://github.com/sukeun1997/claude-config --skill arch-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Architecture diagram generation for codebases, enabling visual documentation and onboarding.

Core Features & Use Cases

Five-perspective, tabbed architecture diagrams with custom HTML/CSS layouts.
Mermaid-based runtime flow for API call sequences.
Notion/Notion-like documentation-ready diagrams for project docs and blogs.

Quick Start

Generate a dark-themed architecture diagram from the current project and open the resulting HTML file in a browser.

Frequently Asked Questions about arch-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate multi-perspective architecture diagrams for project documentation?▼

Generate multi-perspective architecture diagrams by rendering project structures into tabbed HTML/CSS layouts with Mermaid runtime flows and devicon iconography, producing documentation-ready visualizations for onboarding and reviews.

Can I use Mermaid to visualize API call sequences in architecture diagrams?▼

Yes, Mermaid visualizes API call sequences by rendering runtime flow diagrams within the architecture visualization, allowing you to document dynamic process interactions alongside static structural layouts.

Does this architecture visualization tool support dark-themed HTML output?▼

Yes, architecture visualization supports dark-themed HTML output, generating standalone HTML files that can be opened directly in a browser for interactive project documentation.

How do I create Notion-ready architecture diagrams for onboarding new team members?▼

Create Notion-ready architecture diagrams by generating custom HTML/CSS layouts with tabbed five-perspective views and devicon tech stack icons, providing embed-ready visual documentation for onboarding.

What is the best way to document complex codebase architecture across five perspectives?▼

Document complex codebase architecture by generating five-perspective tabbed layouts that separate structural, runtime, and tech stack views using custom HTML, Mermaid, and devicon iconography.

Are there limitations to using custom HTML and CSS for architecture diagram generation?▼

Custom HTML and CSS architecture diagrams require browser rendering to view and lack native editability compared to standard diagramming tools, though they provide highly interactive and embeddable documentation output.