Use when asked to draw, diagram or visualize a system, codebase, architecture, data flow, request flow, database ERD, deployment or sequence of calls, or to explain how a project fits together for onboarding or documentation.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Architecture Diagram
## Overview
Draw diagrams from the code, not from imagination. Pick the one view that answers the reader's question, keep it to what fits on a screen, and render it as Mermaid so it lives in the repo and shows on GitHub.
## Method
1. **Ask what question the diagram answers** (or infer it): "what are the parts?", "what happens when a user checks out?", "how is data stored?", "where does it run?".
2. **Pick the view:**
| Question | Diagram | Mermaid type |
|---|---|---|
| What are the main parts and how do they talk? | Container / component | `flowchart LR` |
| What happens step by step in one request? | Sequence | `sequenceDiagram` |
| What does the data look like? | ERD | `erDiagram` |
| Which states can an object be in? | State | `stateDiagram-v2` |
| Where does it run? | Deployment | `flowchart TB` with subgraphs per environment |
3. **Collect facts:** entry points, services and packages, external systems (databases, queues, third-party APIs) from config, `docker-compose`, infrastructure files, imports and HTTP clients. For a sequence, follow one real request through the code.
4. **Draw** with the rules below.
…
The line at the top of this page pins the label git:20261016.55bd98a, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_j7s5dfyewlnanvbk
GET https://markdownregistry.com/api/v1/resolve?ref=wst2002/claude-code-skills/architecture-diagram
GET https://markdownregistry.com/api/v1/blob/cec0b3958ef26887f0ac1158cfa518e8149ecaffa8d43f6584cd0d43ad6253be
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
wst2002/claude-code-skills · plugins/proof-of-done/skills/proof-of-done/SKILL.md · Use before saying work is done, fixed, or complete after changing code. Run the project's checks, show their results…
wst2002/claude-code-skills · skills/accessibility-audit/SKILL.md · Use when checking a website, web app or UI component for accessibility, WCAG or a11y compliance, screen reader or…
wst2002/claude-code-skills · skills/api-design-review/SKILL.md · Use when designing a new REST API, reviewing endpoints, routes, controllers or an OpenAPI/Swagger spec, choosing status…
wst2002/claude-code-skills · skills/api-test-writer/SKILL.md · Use when writing automated API tests or integration tests for REST or GraphQL endpoints, testing from an…
wst2002/claude-code-skills · skills/bug-debugger/SKILL.md · Use when something is broken, a test fails, an error or stack trace appears, behavior is wrong or intermittent, a…
wst2002/claude-code-skills · skills/bug-report-writer/SKILL.md · Use when writing or improving a bug report, defect ticket or Jira/GitHub issue from notes, screenshots, logs, a video…
wst2002/claude-code-skills · skills/changelog-writer/SKILL.md · Use when writing release notes, a CHANGELOG.md entry, a version summary or "what's new" text from git history, merged…
wst2002/claude-code-skills · skills/code-review/SKILL.md · Use when asked to review a pull request, a branch, a diff, staged changes or recent commits, check code before merging…
wst2002/claude-code-skills · skills/codebase-onboarding/SKILL.md · Use when joining or exploring an unfamiliar codebase, asked to explain how a project works, where something is…
wst2002/claude-code-skills · skills/database-schema-design/SKILL.md · Use when designing a database from scratch, reviewing tables, an ERD, a Prisma/TypeORM/JPA/Django/SQLAlchemy schema or…
wst2002/claude-code-skills · skills/dependency-upgrade/SKILL.md · Use when upgrading packages, libraries, a framework or a language runtime (React, Next.js, Angular, Spring Boot…
wst2002/claude-code-skills · skills/dockerize-app/SKILL.md · Use when asked to dockerize or containerize an app, write or fix a Dockerfile or docker-compose.yml, shrink a large…
mohitagw15856/pm-claude-skills · exports/openclaw/architecture-diagram/SKILL.md · Diagram a system or technical architecture — services, data stores, and how they connect. Use when asked to draw an…
taracodlabs/aiden · workspace-templates/skills/architecture-diagram/SKILL.md · Generate dark-themed system architecture and component diagrams as HTML/SVG for rendering in the browser
cowork-os/cowork-os · resources/skills/architecture-diagram/SKILL.md · Generate polished dark-themed architecture diagrams as standalone HTML files with inline SVG, semantic system grouping…
athola/claude-night-market · plugins/cartograph/skills/architecture-diagram/SKILL.md · Generates a Mermaid architecture diagram showing high-level component relationships. Use when visualizing how plugins…
konraddzbik/architecture-diagram-skill · skills/architecture-diagram/SKILL.md · Build interactive, click-through architecture diagrams for software systems — a self-contained single HTML file with…