Agent skill

Architecture Diagram

by mohitagw15856 in mohitagw15856/pm-claude-skills

Diagram a system or technical architecture — services, data stores, and how they connect.

MITAuto-check passedDevelopment

Install Architecture Diagram

skills CLI

$ npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install mohitagw15856/pm-claude-skills architecture-diagram --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/architecture-diagram .claude/skills/architecture-diagram && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "architecture-diagram" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/architecture-diagram into .claude/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/architecture-diagram

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install mohitagw15856/pm-claude-skills architecture-diagram --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/architecture-diagram .agents/skills/architecture-diagram && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "architecture-diagram" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/architecture-diagram into .agents/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install mohitagw15856/pm-claude-skills architecture-diagram --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/architecture-diagram .cursor/skills/architecture-diagram && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "architecture-diagram" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/architecture-diagram into .cursor/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/mohitagw15856/pm-claude-skills.git --path skills/architecture-diagram

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install mohitagw15856/pm-claude-skills architecture-diagram --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/architecture-diagram .gemini/skills/architecture-diagram && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "architecture-diagram" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/architecture-diagram into .gemini/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install mohitagw15856/pm-claude-skills architecture-diagram

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/architecture-diagram .github/skills/architecture-diagram && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "architecture-diagram" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/architecture-diagram into .github/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install mohitagw15856/pm-claude-skills architecture-diagram --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/architecture-diagram .opencode/skills/architecture-diagram && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "architecture-diagram" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/architecture-diagram into .opencode/skills/architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-diagram", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: architecture-diagram
GitHub stars: 1.4k
Token cost: ~839 tokens
SKILL.md length: 343 words
Files: 1
Skills in repo: 1,348
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Diagram a system or technical architecture — services, data stores, and how they connect.

Asked to draw an architecture
SKILL.md covers Required Inputs, Output Format, Mermaid Rules (so it renders) and Quality Checks, plus 3 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Show how components fit together

What it does

Architecture Diagram is an agent skill from mohitagw15856/pm-claude-skills. 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.

Its SKILL.md is about 840 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: 1255 professional Agent Skills for Claude, ChatGPT, Gemini, Cursor & Codex — PRDs, postmortems, leases, medical bills, layoffs, go-bags, new countries. Plain markdown, MIT, in… The licence is MIT.

When your agent uses it

Asked to draw an architecture
Show how components fit together
Map a system/data flow
Visualize services and dependencies

Example prompts

“/architecture-diagram”

What it can do on your machine

Read from SKILL.md and the folder at commit 1cbf1f0. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are mermaid).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Architecture Diagram loads about 839 tokens when it runs. Until then it costs about 97 tokens; SKILL.md has 343 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~97
When it runs · the whole SKILL.md, loaded when a task matches: ~839

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from mohitagw15856/pm-claude-skills at commit 1cbf1f0, republished under its MIT licence (© mohitagw15856). 343 words, ~839 tokens.

Download SKILL.mdSave it as .claude/skills/architecture-diagram/SKILL.md (or your agent's skills folder).

name: architecture-diagram
description: 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.

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 component (what it is, why it's there).

Notes — trust boundaries, single points of failure, sync vs async (-.-> = async), anything to revisit.

Mermaid Rules (so it renders)

Use flowchart LR (or TD) with subgraph Name ... end for logical layers.
Databases/stores read well as [(name)]; queues/buses as [[name]].
Solid arrows --> for synchronous calls, dotted -.label.-> for async/events.
Short node labels; keep IDs unique and simple. No parentheses/quotes inside labels.

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
The Mermaid block renders without edits

Anti-Patterns

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

Based On

Architecture diagramming (C4-style grouping, logical layers, sync/async edges), expressed as renderable Mermaid.

Example Trigger Phrases

"Draw an architecture."
"Show how components fit together."
"Map a system/data flow."
"Visualize services and dependencies."

Files

Just SKILL.md in skills/architecture-diagram of mohitagw15856/pm-claude-skills.

Open the folder on GitHubat commit 1cbf1f0

Compare with similar skills

Architecture Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Architecture Diagram compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Architecture Diagram this skillmohitagw15856/pm-claude-skills	1.4k	—	~839	Automated safety check: Pass	MIT	2 days ago
Archify Diagramstt-a1i/archify	82k	—	~2.9k	Automated safety check: Pass	MIT	today
Diagram Designcathrynlavery/diagram-design	49k	1 repos	~7.6k	Automated safety check: Pass	MIT	today
Draw.io Diagram StudioAgents365-ai/drawio-skill	10k	—	~2.4k	Automated safety check: Notes	MIT	today
Pretty Mermaid Rendererimxv/Pretty-mermaid-skills	1.5k	—	~2k	Automated safety check: Pass	MIT	1 mo ago
Archify Diagram BuilderUnclecheng-li/AI_Animation	1.5k	2 repos	~4.1k	Automated safety check: Pass	MIT	6 days ago

Similar skills

Archify Diagrams
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
82k GitHub stars~2.9k tokensUpdated today
DevelopmentAuto-check passed
Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
49k GitHub starsUsed in 1 repo~7.6k tokens
DevelopmentAuto-check passed
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
10k GitHub stars~2.4k tokensUpdated today
DevelopmentAuto-check: notes
Pretty Mermaid Renderer
imxv/Pretty-mermaid-skills
Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.
1.5k GitHub stars~2k tokensUpdated 1 mo ago
DevelopmentAuto-check passed
Archify Diagram Builder
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
1.5k GitHub starsUsed in 2 repos~4.1k tokens
DevelopmentAuto-check passed
Mermaid
WH-2099/mermaid-skill
Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.
288 GitHub starsUsed in 4 repos~958 tokens
DevelopmentAuto-check passed

More from mohitagw15856/pm-claude-skills

All 1,348 skills in this repo

Car Tco
mohitagw15856/pm-claude-skills
Compare the total cost of car ownership across buy-new, buy-used, lease, and keep-your-current-car — depreciation, insurance, maintenance ramp, and fuel over a real horizon, not just the monthly…
1.4k GitHub stars~1.1k tokensUpdated 2 days ago
Auto-check passed
Cs Health Scorecard
mohitagw15856/pm-claude-skills
Build a customer health scorecard for a specific account. An agent skill from mohitagw15856/pm-claude-skills.
1.4k GitHub stars~2.4k tokensUpdated 2 days ago
Auto-check passed
Exit Waterfall
mohitagw15856/pm-claude-skills
Compute who gets what at each exit price from a cap table — liquidation preferences, conversion points, and where the founders' share collapses.
1.4k GitHub stars~1.1k tokensUpdated 2 days ago
Auto-check passed
Feature Prioritisation
mohitagw15856/pm-claude-skills
Apply prioritisation frameworks (RICE, MoSCoW, Kano, ICE, Opportunity Scoring) to rank features and backlog items.
1.4k GitHub stars~2k tokensUpdated 2 days ago
Auto-check passed
Fire Number
mohitagw15856/pm-claude-skills
Compute a financial-independence (FIRE) target and years-to-reach with every assumption labeled as an assumption — plus a sensitivity table instead of a single false-precision answer.
1.4k GitHub stars~1.1k tokensUpdated 2 days ago
Auto-check passed
Freelance Rate
mohitagw15856/pm-claude-skills
Derive a freelance day/hourly rate backwards from target income, honest billable utilization, overhead, and the self-employment tax premium — the arithmetic that proves a rate is not salary÷2000.
1.4k GitHub stars~1.2k tokensUpdated 2 days ago
Auto-check passed

Works with

Mermaid

Questions about Architecture Diagram

What does Architecture Diagram do?

Diagram a system or technical architecture — services, data stores, and how they connect. Architecture Diagram is an agent skill from mohitagw15856/pm-claude-skills. Diagram a system or technical architecture — services, data stores, and how they connect.

When should I use Architecture Diagram?

Architecture Diagram fits situations like: asked to draw an architecture; show how components fit together; map a system/data flow; visualize services and dependencies.

How do I install Architecture Diagram in Claude Code?

Run `npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram -a claude-code`. Or copy the skill folder (skills/architecture-diagram in mohitagw15856/pm-claude-skills) into .claude/skills/architecture-diagram in your project. Claude Code loads it when a task matches its description.

How do I install Architecture Diagram in Codex?

Run `npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram -a codex`. Or copy the skill folder (skills/architecture-diagram in mohitagw15856/pm-claude-skills) into .agents/skills/architecture-diagram in your project. Codex loads it when a task matches its description.

Can I use Architecture Diagram in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mohitagw15856/pm-claude-skills --skill architecture-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/architecture-diagram, .gemini/skills/architecture-diagram, .github/skills/architecture-diagram and .opencode/skills/architecture-diagram in your project.

What does Architecture Diagram need to run?

SKILL.md names no scripts, command-line tools or credentials: Architecture Diagram is instructions for the agent only.

Does Architecture Diagram access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Architecture Diagram safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Architecture Diagram use?

Architecture Diagram is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Architecture Diagram use?

About 839 tokens (SKILL.md is roughly 3.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Architecture Diagram?

Skills that share tags, products or a category with Architecture Diagram: Archify Diagrams (tt-a1i/archify, 82k stars), Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Architecture Diagram?

mohitagw15856 (a GitHub user) maintains it in mohitagw15856/pm-claude-skills, which has 1,434 GitHub stars. The repository holds 1,348 skills in this directory. The repository was last updated on October 9, 2026.

Source: mohitagw15856/pm-claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Architecture Diagram

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Architecture Diagram Skill

Required Inputs

Output Format

[System name] — architecture

Mermaid Rules (so it renders)

Quality Checks

Anti-Patterns

Based On

Example Trigger Phrases

Files

Compare with similar skills

Similar skills

More from mohitagw15856/pm-claude-skills

Related

Questions about Architecture Diagram