Use architecture-diagrams

Generate architecture diagrams (Mermaid, PlantUML, C4) from a written description of a system

Generate architecture diagrams (Mermaid, PlantUML, C4) from a written description of a system. Supports AWS/Azure/GCP cloud topologies, microservice landscapes, sequence flows, container diagrams, and ER models.

Reach for it when Use whenever the user asks for an architecture diagram, system sketch, flow diagram, or visualization of a design.

Install it

npx skilldrop-cli install architecture-diagrams                 # Claude Code, your user folder
npx skilldrop-cli install architecture-diagrams --project       # Claude Code, this repo
npx skilldrop-cli install architecture-diagrams --ide cursor    # or kiro, codex, antigravity, copilot

It is part of the Solution architect pack: --pack solution-architect installs it with its neighbours.

Ask for it

Say it the way you would to a colleague. Requests like these route to it:

• "Draw an architecture diagram for this system"
• "Generate a Mermaid diagram of these services"
• "Create a C4 container diagram from this description"
• "Diagram the sequence flow I just described"

Requests like these belong to a different skill, so it shouldn't answer them:

• "Reverse-engineer the architecture from our Terraform and repo"
• "Read the frames in our Figma file"
• "Threat model this design"

If another skill answers instead, ask for this one by name: "use architecture-diagrams".

Check what you get

A good result:

• Fit on one screen. If you have more than ~15 nodes, split into two diagrams (e.g., "Context" and "Container") rather than cramming everything in.
• Show direction of data flow, not just connections. Arrows should mean something.
• Label every arrow that crosses a trust boundary or a network hop.
• Use subgraphs / groups to make zones explicit (VPC, public/private subnets, account boundaries, on-prem vs cloud).
• Be valid syntax. Mentally trace through the Mermaid/PlantUML once before responding. Common breakers: unescaped ( ) < > inside labels, missing end for subgraphs, mixing graph types.

See a worked example

• aws three tier
• c4 container saas
• microservices sequence

Where a loop runs it

• Stage shape of the design loop

Next

• SKILL.md, the instructions the agent reads
• Its page on the site
• Related: figma-diagrams

Edit this page on GitHub · View source