architecture-diagram
Diagram a system or technical architecture — services, data stores, and how they connect. Use when asked to draw an architecture, show how components fit together, map a system/data flow, or visualize services and dependencies. Produces a ready-to-render Mermaid diagram with grouped subgraphs (renders live, exportable as PNG/SVG) plus a component legend and notes.
npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Architecture Diagram Skill "How does the system fit together?" is best answered with a picture. This skill turns a described system into a clean **Mermaid architecture diagram** — clients, services, data stores, and third parties, grouped into logical layers with labelled connections (sync vs async, protocols) — not an undifferentiated blob of boxes. ## Required Inputs Ask for these only if they aren't already provided: - **The components** — services, apps, databases, queues, external APIs. - **How they connect** — who calls whom; sync (HTTP/gRPC) vs async (queue/event); data flow direction. - **Logical groupings** — frontend / backend / data / third-party, or by team/domain. - **Focus** — the whole system or one slice (e.g. just the checkout path). ## Output Format ### [System name] — architecture One line on what the diagram covers and its boundary. ```mermaid flowchart LR subgraph Client Web[Web app] Mobile[Mobile app] end subgraph Backend API[API gateway] Svc[Order service] end subgraph Data DB[(Postgres)] Cache[(Redis)] end Web --> API Mobile --> API API --> Svc Svc --> DB Svc -.async.-> Queue[[Event bus]] Svc --> Cache ``` **Component legend** — one line per non-obvious co
- Required Inputs
- Output Format
- [System name] — architecture
- Mermaid Rules (so it renders)
- Quality Checks
- Anti-Patterns
- Based On
What does the architecture-diagram skill do?
Diagram a system or technical architecture — services, data stores, and how they connect. Use when asked to draw an architecture, show how components fit together, map a system/data flow, or visualize services and dependencies. Produces a ready-to-render Mermaid diagram with grouped subgraphs (renders live, exportable as PNG/SVG) plus a component legend and notes.
How do I install it?
Run `npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mohitagw15856/pm-claude-skills, a repository with 1,255 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.