Architecture Diagramming

Create clear, GitHub-compatible Mermaid architecture diagrams that visualize system components, layers, boundaries, and data flows. Whether you need a system overview, layered architecture, or request flow diagram, this skill produces well-structured Mermaid syntax that renders correctly on GitHub.

Installation

Add the marketplace and install this skill:

/plugin marketplace add britt/claude-code-skills
/plugin install architecture-diagramming@britt

Or install all skills at once:

/plugin install claude-code-skills@britt

Compatibility

How to use it

Use this skill when:

• You need an architecture diagram for your system
• You want to visualize how components interact
• During project planning to communicate system design
• Explaining layered architecture or request flows

Features

Multiple diagram patterns Supports system overviews, layered architectures, and request flows, with subgraphs for clear boundaries.

GitHub-safe Mermaid syntax Follows strict syntax rules to avoid rendering errors, including never using parentheses inside labels and always ensuring matching brackets.

Structured analysis process Walks through identifying components, determining layers, mapping relationships, applying boundaries, and generating a clean diagram.

Consistent naming and arrow conventions Uses clear abbreviations for node names and meaningful arrow types to distinguish standard, async, and critical-path relationships.