Skip to content
Development
Skill

/nw-diagram

Generates C4 architecture diagrams (context, container, component) in Mermaid or PlantUML. Use when creating or updating architecture visualizations.

From plugin
nwave
591200 skills34 agents27 commands
Install
$ npx -y skills add nWave-ai/nWave --skill nw-diagram --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.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/nw-diagram

Context preview

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

Generates C4 architecture diagrams (context, container, component) in Mermaid or PlantUML. Use when creating or updating architecture visualizations.

SKILL.md

nw-diagram.SKILL.md
name: nw-diagram
description: "Generates C4 architecture diagrams (context, container, component) in Mermaid or PlantUML. Use when creating or updating architecture visualizations."
user-invocable: true
argument-hint: '[diagram-type] - Optional: --format=[mermaid|plantuml|c4] --level=[context|container|component]'

NW-DIAGRAM: Architecture Diagram Generation

**Wave**: CROSS_WAVE | **Agent**: Morgan (nw-solution-architect) | **Command**: `*create-diagrams`

Overview

Generate architecture diagrams from design documents. Supports C4 model levels (context|container|component) in Mermaid|PlantUML|C4 format. Audience-appropriate: high-level context for stakeholders|component details for developers|deployment topology for operations.

Context Files Required

  • docs/product/architecture/brief.md (SSOT — component boundaries, technology stack, design decisions)

Workflow

1. **Read Context** — Load `docs/product/architecture/brief.md`. Extract component boundaries, technology stack, and design decisions. Gate: architecture brief loaded. 2. **Resolve Configuration** — Determine `diagram_type` (component|deployment|sequence|data|context), `format` (mermaid|plantuml|c4), `level` (context|container|component), and `output_directory`. Gate: all configuration parameters resolved. 3. **Invoke Agent** — Delegate to `@nw-solution-architect` with `*create-diagrams` for `{architecture-component}`, passing context files and resolved configuration. Gate: agent invoked with all parameters. 4. **Validate Output** — Verify diagrams render without syntax errors and files exist in `output_directory`. Gate: all success criteria pass. 5. **Handoff** — Return deliverables to invoking agent. Gate: architecture diagrams available in configured format.

Success Criteria

  • [ ] Diagrams accurately represent current architecture
  • [ ] Audience-appropriate detail level applied
  • [ ] Diagrams render without syntax errors
  • [ ] Output files created in configured directory

Next Wave

**Handoff To**: {invoking-agent-returns-to-workflow} **Deliverables**: Architecture diagrams in configured format

Examples

Example 1: Generate C4 container diagram

/nw-diagram payment-service --diagram_type=component --format=mermaid --level=container

Morgan reads architecture docs and produces a Mermaid container diagram showing service boundaries, data stores, and external integrations.

Expected Outputs

docs/product/architecture/
  system-context.{ext}
  component-architecture.{ext}
  deployment-architecture.{ext}
Read more
Ships withnwave

AI agents that guide you from idea to working code, with human judgment at every gate. nWave runs inside Claude Code. It breaks feature delivery into seven waves (discover, diverge, discuss, design, devops, distill, deliver).

Get the whole plugin