Individual skill
diagram
Designed diagrams of real systems — architecture, flowchart, entity-relationship, state machine or sequence — drawn from the code you read, laid out by the browser and styled by the active design system.
packages/content/assets/open-design/skills/diagram/SKILL.md
Source commit 400641fd6781fa0febad445984ee76440374736d
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Instructions only
- Last checked
- Nov 4, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 1,046
- Repository last updated
- Nov 7, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- claude-code Repository topic
- codex Repository topic
- cursor Repository topic
- dashboard Repository topic
- design Repository topic
- design-systems Repository topic
- design-tokens Repository topic
- figma Repository topic
- github-copilot Repository topic
- mcp Repository topic
- diagram Declared skill tag
- architecture Declared skill tag
- flowchart Declared skill tag
- erd Declared skill tag
- sequence Declared skill tag
- state-machine Declared skill tag
- 图表 Declared skill tag
- 架构图 Declared skill tag
- engineering Derived category
- design Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
Read excerpt
# Diagram
**Intent.** One clear, designed diagram of a real system, true to the code, that someone can read in ten seconds. It is an HTML page: you write the content (nodes, links, groups) and the browser lays it out. Never hand-place coordinates.
## 1. Read before you draw
Every node and link must come from something you read, never from what such systems usually look like.
- **Architecture / dependencies:** package manifests (`package.json`, `go.mod`, `Cargo.toml`, `pyproject.toml`), workspace config, import statements, service and deployment config (`docker-compose.yml`, Kubernetes manifests).
- **Flowchart / request flow:** the entry point and the functions it calls, route definitions, middleware, queue consumers.
- **Entity-relationship:** schema files (`schema.prisma`, migrations, ORM models, `.sql`).
- **State machine:** the reducer, state enum or transition table.
- **Sequence:** one concrete call path, followed through the code in order.
