skills.rest
sukeun1997
sukeun1997COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/sukeun1997/claude-config --skill arch-diagram
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Sh3rd3nSh3rd3n
3

map

Analyze codebases with parallel agents to generate Markdown documents on architecture and tech stack.

Community
Advanced
regispswregispsw

visual-explainer

Generate self-contained HTML files from text-based diagram specifications using Mermaid.

Community
Advanced
RamanEbrahimiRamanEbrahimi
3

pptx-posters

Generate research posters with HTML/CSS and export to PDF or PPTX.

Community
Intermediate
shekerkammashekerkamma

uml

Render UML diagrams from PlantUML text into diagram images.

Community
Advanced