/architecture

Generate system architecture .drawio diagrams — client, service, database, external systems with standard icons and clear connections.

Boost this skill

khaitrang1995@khaitrang1995

GitHub

From plugin

agentic-awesome-kits

932 skills

Install

$ npx -y skills add KhaiTrang1995/agentic-awesome-kits --skill architecture --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/architecture

Context preview

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

Generate system architecture .drawio diagrams — client, service, database, external systems with standard icons and clear connections.

SKILL.md

architecture.SKILL.md

name: architecture
description: Generate system architecture .drawio diagrams — client, service, database, external systems with standard icons and clear connections.
user-invocable: true
argument-hint: "<system description> [--cloud aws|azure|gcp|generic]"

/architecture — Generate Architecture Diagram (draw.io)

When to use

Visualize system architecture (microservice, layered architecture, network topology) for design docs, ADRs, or stakeholder presentations.

Input examples

/architecture TOPO system: Angular SPA → API Gateway → 3 microservices (Container, Booking, Auth) → SQL Server
/architecture --cloud azure deploy architecture: App Service, Azure SQL, Blob Storage, Front Door
/architecture integration flow with Customs system via REST API

Workflow

Phase 1 — Identify components & trust boundaries

List components by group:

**Client**: web app, mobile app, external user (actor)
**Edge**: load balancer, API gateway, CDN
**Service**: backend service/microservice (process box)
**Data**: database, cache, message queue (cylinder/tape)
**External**: third-party system (cloud shape)

Identify trust boundaries (internet ↔ DMZ ↔ internal) — draw with container boxes `dashed=1;fillColor=none;`.

Phase 2 — Layout (L3 preview)

Print a block diagram as table/ASCII before generating XML — confirm which groups sit inside which boundaries and the data-flow direction.

Phase 3 — Generate XML

Use `_templates/architecture.drawio` as the frame:

Default to **core shapes** (`ellipse+shape=cloud`, `shape=cylinder3`, `shape=umlActor`, `rounded=1`) — opens on any machine.
If `--cloud aws|azure|gcp`: add matching stencils (`shape=mxgraph.aws4.*`, `shape=mxgraph.azure.*`) and **note clearly in the output** that the user must enable that shape library in draw.io.
Group by trust boundary with surrounding container boxes.
Primary data flow left→right or top→bottom, orthogonal arrows.

Phase 4 — Approval L1 → Write

Mandatory rules

Every external system/3rd-party MUST be visually distinct with gray (`fillColor=#f5f5f5;strokeColor=#666666;`).
Databases always use `shape=cylinder3` — NEVER use a rounded rectangle for storage.
If there are > 10 components, group by layer/boundary with container boxes for readability instead of leaving all at the same level.
Small legend in the lower corner if using > 3 color types, explaining each color.