/common-architecture-diagramming

Standards for creating clear, audience-appropriate C4 and UML architecture diagrams with Mermaid. Use when producing system context diagrams, container views, sequence diagrams, or updating ARCHITECTURE.md files.

hoangnguyen0403@hoangnguyen0403

GitHub

From plugin

agent-skills-standard

538200 skills1 MCP

Install

$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill common-architecture-diagramming --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/common-architecture-diagramming

Context preview

The summary Claude sees to decide when to auto-load this skill.

Standards for creating clear, audience-appropriate C4 and UML architecture diagrams with Mermaid. Use when producing system context diagrams, container views, sequence diagrams, or updating ARCHITECTURE.md files.

SKILL.md

common-architecture-diagramming.SKILL.md

name: common-architecture-diagramming
description: Standards for creating clear, audience-appropriate C4 and UML architecture diagrams with Mermaid. Use when producing system context diagrams, container views, sequence diagrams, or updating ARCHITECTURE.md files.
metadata:
  triggers:
    files:
      - "ARCHITECTURE.md"
      - "**/*.mermaid"
      - "**/*.drawio"
    keywords:
      - diagram
      - architecture
      - c4
      - system design
      - mermaid

Architecture Diagramming Standard

Priority: P1 (HIGH)

Guidelines

**Use C4 Model**: Context -> Container -> Component -> Code.
**Audience-Centric**: Tailor abstraction (Execs vs. Devs).
**Select Type**: Sequence (Protocol), ERD (Data), State (Lifecycle), Cloud (Infra). See [Selection](references/diagram-selection.md).
**Explicit Labels**: Label every arrow (e.g., "Uses", "HTTPS").
**Consistent Notation**: Cylinders=DB, Rectangles=Systems, Dashed=Async.
**Metadata**: Title, Date, Version, Author.
**Legend Mandatory**: Define all shapes/colors/styles.
**Direction**: `graph LR` (Flow) or `graph TD` (Hierarchy).
**Deployment**: Map containers to infrastructure.
**Governance**: CRITICAL: Review [best-practices.md](references/best-practices.md) before starting.

Workflow

1. Name audience and the decision the diagram must support. 2. Pick one level: context for external actors, container for deployable systems, component for one container; never mix levels. 3. Pick notation: sequence for a request protocol, ERD for data ownership, state for lifecycle, deployment for infrastructure. 4. Draw only decision-relevant nodes; label every relationship with protocol or event. 5. Add title, scope/date/version, legend, and one review question for the intended audience.

See [implementation examples](references/implementation.md) for C4 container diagram in Mermaid.