What do I need to use Architecture Diagram?

The components; How they connect; Logical groupings; Focus.

Is Architecture Diagram free to use?

Yes — run it free in the browser playground (no API key needed for the sponsored trial, or bring any provider key), or install it into Claude Code, Cursor, ChatGPT and more via npx pm-claude-skills. MIT-licensed and open source.

Architecture Diagram

Q: How do I know the Architecture Diagram output is good?

The skill verifies itself against its own quality checks: Components are grouped into meaningful layers (subgraphs), not one flat pile; Connection direction reflects who calls whom; async vs sync is distinguished; Data stores and external/third-party systems are visually distinct from services; The legend explains anything non-obvious; trust boundaries / SPOFs are noted.

🔵 Stable🕐 updated 2026-06-29 🔷 SkillSpec L3 pm-visuals

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.

▶ Run it free — no key needed 📝 Grade your existing draft View SKILL.md ↗

What to give it

▸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).

✅ The bar it holds itself to

Every skill in this library self-verifies — these are this skill's own quality checks, straight from its definition.

✓Components are grouped into meaningful layers (subgraphs), not one flat pile

✓Connection direction reflects who calls whom; async vs sync is distinguished

✓Data stores and external/third-party systems are visually distinct from services

✓The legend explains anything non-obvious; trust boundaries / SPOFs are noted

✓The Mermaid block renders without edits

⚠️ What it refuses to do

Do not draw every box the same with undifferentiated arrows — show layers and connection types

Do not omit data stores or external dependencies — they're usually where the risk lives

Do not blur sync and async — they have very different failure modes

Do not cram the entire system when the ask is one slice — match the requested focus

Do not break Mermaid with special characters in labels

Install

npx pm-claude-skills add --agent claude   # or codex · cursor · gemini · hermes
# or one-line MCP (every skill, any client):
claude mcp add pm-skills -- npx -y pm-claude-skills-mcp

Example output

Input: Diagram the architecture of a SaaS app: web and mobile clients hit an API gateway, which talks to an auth service and an orders service. Orders uses Postgres and Redis, and publishes events to a queue that a notifications worker consumes to send email via a third-party provider. · hand-written example

Related skills

🔌 Embed this skill

Drop this on your blog, docs, or site — it renders a "Run this skill" card:

<div data-pm-skill="architecture-diagram"></div>
<script src="https://mohitagw15856.github.io/pm-claude-skills/embed.js" async></script>

💬 Discussion

Architecture Diagram is one of 750 open-source professional AI agent skills — all SkillSpec L3. Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog