How do I install the Architecture skill?

Run npx skillmds@latest add khaitrang1995/architecture in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Architecture safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Architecture?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Architecture free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Architecture?

KhaiTrang1995 (@khaitrang1995) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Architecture by khaitrang1995 — Agent Skill

Name: Architecture
Author: KhaiTrang1995

File contents

/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.

Output

docs/diagrams/{feature}/architecture-{slug}.drawio

References

@.claude/rules/drawio-conventions.md
@.claude/rules/naming-conventions.md
@.claude/rules/approval-gate.md
@_templates/architecture.drawio
Brain: DRAWIO-BRAIN.md

---name: architecturedescription: Generate system architecture .drawio diagrams — client, service, database, external systems with standard icons and clear connections.---# /architecture — Generate Architecture Diagram (draw.io)## When to useVisualize 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 boundariesList 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 XMLUse `_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.## Output`docs/diagrams/{feature}/architecture-{slug}.drawio`## See alsoNeed real vendor icons (AWS/Azure/GCP, not core shapes), auto-layout for >15 components, draw from real Terraform/K8s/docker-compose, or export PNG/SVG/PDF → use `/diagram` (more powerful, requires draw.io desktop CLI).## References- @.claude/rules/drawio-conventions.md- @.claude/rules/naming-conventions.md- @.claude/rules/approval-gate.md- @_templates/architecture.drawio- Brain: `DRAWIO-BRAIN.md`

Frequently asked questions

Architecture