Design
Archify
Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
npx skills add tt-a1i/archifySkill Details
See Archify in action
<!-- archify-launch-video -->https://github.com/user-attachments/assets/78570807-ba1d-4737-953f-55504a378a87
One sentence. Your repo, mapped. Watch the 35-second demo: explore the diagram, follow source links, and trace a path. Try the interactive examples ↗
<a id="start"></a>
Install, then describe your idea
Works with Cursor, Claude Code, Codex CLI, and OpenCode. See installation options below for additional integrations.
npx skills add tt-a1i/archify -g
Send this to your agent:
Use Archify to diagram a web request: Browser calls the API,
the API checks Redis, and a cache miss queries PostgreSQL and fills the cache.
Then continue: “Add authentication”, “Highlight the cache-miss path”, or “Switch to the light theme”.
No repository is required: start with a description, or ask your agent to read a repository for a source-backed architecture diagram.
Choose your agent · Installation details and update checks · Create and check diagrams with your agent
<a id="sponsors"></a>
❤️ Sponsors
<p align="center"> <a href="https://www.kimi.ai/?aff=archify"><img src="docs/assets/sponsors/archify-kimi-work.png" alt="Archify × Kimi Work collaboration banner" width="800" /></a> </p>Archify × Kimi Work. Find Archify in the Kimi Work plugin store as Interactive Architecture Diagram. Describe your system in one sentence to create an interactive diagram. Try it in Kimi Work →
<table> <tr> <td align="center" width="240"><a href="https://supercode.sh/?utm_source=archify"><img src="https://cdn.supercode.sh/sponsors/supercode-logo.png" alt="Supercode" width="200"/></a><br/><strong><a href="https://supercode.sh/?utm_source=archify">supercode.sh</a></strong></td> <td><a href="https://supercode.sh/?utm_source=archify">Supercode</a> sponsors Archify and enhances Codex and Cursor with token optimization, curated Skills, and spec-driven development. Archify is featured as a <a href="https://supercode.sh/en/skills/tt-a1i/archify/archify">Supercode Editor’s Choice</a> skill.<br/><br/><a href="https://supercode.sh/en/skills/tt-a1i/archify/archify"><img src="https://supercode.sh/badges/editors-choice.svg" alt="Supercode Editor’s Choice — Archify" width="240" height="55"/></a></td> </tr> <tr> <td align="center" width="240"><a href="https://www.openlux.ai/register?channel=c_qdvanbpc"><img src="docs/assets/sponsors/openlux-logo.png" alt="OpenLux" width="200" /></a><br/><strong><a href="https://www.openlux.ai/register?channel=c_qdvanbpc">OpenLux</a></strong></td> <td>Thank you to OpenLux for sponsoring this project! OpenLux is an all-in-one AI platform for businesses, bringing together leading AI models from major providers worldwide. With fast, reliable service and responsive technical support, OpenLux offers base pricing for Claude, OpenAI, and Gemini models as low as 8.82%, 4%, and 8% of official rates, respectively.<br/><br/>Exclusive offer for Archify users: Sign up through our referral link and enjoy up to 7.5% off credit top-ups!<br/><br/><a href="https://www.openlux.ai/register?channel=c_qdvanbpc">Get started with OpenLux →</a></td> </tr> <tr> <td align="center" width="240"><a href="https://www.packyapi.ai/register?aff=bN97"><img src="docs/assets/sponsors/packycode-logo.png" alt="PackyCode" width="200" /></a><br/><strong><a href="https://www.packyapi.ai/register?aff=bN97">PackyCode</a></strong></td> <td>Access leading AI models through PackyCode with one API endpoint and one API key. Enjoy automatic failover and dedicated high-speed routes for Codex and Claude Code.<br/><br/>Get started with $1 in free credits, a discount on your first top-up, and savings of up to 80% on eligible routes. Pay in RMB with no currency conversion markups or extra top-up fees.<br/><br/><a href="https://www.packyapi.ai/register?aff=bN97">Get started with PackyCode →</a></td> </tr> <tr> <td align="center" width="240"><a href="https://www.aicodemirror.ai/register?invitecode=WC26FL"><img src="docs/assets/sponsors/aicodemirror-logo.jpg" alt="AICodeMirror" width="200" /></a><br/><strong><a href="https://www.aicodemirror.ai/register?invitecode=WC26FL">AICodeMirror</a></strong></td> <td>Thank you to AICodeMirror for sponsoring Archify! AICodeMirror provides API relay services for Claude, Codex, and Gemini, with enterprise-grade concurrency, invoice issuance, and 24/7 technical support. Codex pricing starts at 7% of standard rates, with additional top-up discounts.<br/><br/>Exclusive offer for Archify users: Register through our referral link to receive 20% off your first top-up.<br/><br/><a href="https://www.aicodemirror.ai/register?invitecode=WC26FL">Try AICodeMirror →</a></td> </tr> <tr> <td align="center" width="240"><a href="https://www.infistar.cc/register?aff=9N89LEMV&ref_source=link"><img src="docs/assets/sponsors/infistar-logo.svg" alt="Infistar.cc" width="140" /></a><br/><strong><a href="https://www.infistar.cc/register?aff=9N89LEMV&ref_source=link">Infistar.cc</a></strong></td> <td>Thank you to Infistar.cc for sponsoring Archify! One API key covers text, image, and video creation with GPT, Claude, Gemini, DeepSeek, Qwen, Kling, and other models, without switching groups. Model API pricing starts at 1% of official rates, and AI images start at ¥0.06 each.<br/><br/>Exclusive offer for Archify users: Sign up through our referral link for $5 in trial credits and a special offer on your first top-up.<br/><br/><a href="https://www.infistar.cc/register?aff=9N89LEMV&ref_source=link">Try Infistar →</a></td> </tr> <tr><td align="center" width="240"><a href="https://github.com/EverMind-AI/Raven"><img src="docs/assets/sponsors/evermind-archify-raven.png" alt="Archify × Raven" width="200" /></a><br/><strong><a href="https://github.com/EverMind-AI">EverMind</a> · <a href="https://github.com/EverMind-AI/Raven">Raven</a></strong></td><td>EverMind sponsors Archify and builds memory infrastructure for agents. Its <a href="https://github.com/EverMind-AI/Raven"><strong>Raven</strong></a> harness supports Archify as a Skill for verified, interactive system maps.</td></tr> </table>Want to sponsor Archify? Contact us by email.
Show what matters
| Explain an agent workflow | Follow a cache miss | Explore service relationships |
|---|---|---|
 |  |  |
| Trace everything downstream of one step. | Highlight the path from web app to database. | Focus on authored backend and database connections. |
The Proof Lab contains all 11 checked-in scenarios, their JSON sources, and validation receipts.
Understand a real repository
<sub>CODE → DIAGRAM · A source-backed system map</sub>
Archify traced mco-org/mco at 9f1a1cf and produced this checked map. Open it ↗ · trace reach ↗ · typed source
Easy to extend. More ways to make it yours.
<sub>COMMUNITY STORIES · Selected examples shared by users</sub>
Keep building after the diagram is generated. Archify is open source and its output is standalone HTML. Ask your agent to adapt it, connect useful links, or add interactions for your own workflow. Community creations already span team collaboration, travel planning, legal citation checks, contract review, and incident retrospectives. These are just a few examples.
One user started with a hand-drawn multi-agent architecture, turned it into an interactive diagram, then added a Kimi execution pool through conversation. Others asked their agent to read a project and brought the resulting architecture into Feishu or DingTalk for team discussion.
Another user turned a Shanghai CityWalk guide into a four-day itinerary: switch between days, inspect a stop, and jump to Amap, Xiaohongshu, or Dianping. The author also added arrival check-ins and stop notes, turning the itinerary into a small tool to use during the trip. These extensions were added by the community author for this particular artifact.
▶ Explore the interactive Shanghai CityWalk
▶ Try the interactive version · Switch between D1–D4 and click a place to explore.
<sub>Community artifact · Shanghai CityWalk · Four days of routes and place links</sub>
Download it. Open it. Explore it.
The output is a self-contained HTML file. Download it and open it in your browser to use the node details and path exploration included in that artifact. No Archify installation is needed to view it. Send the HTML to someone else and the interactions go with it; external websites and map links need a network connection.
Explore the Shanghai CityWalk ↗ · Download HTML ↓
<sub>Try switching between D1–D4, opening a place card, or following a map link. Times and place information reflect the author's original itinerary.</sub>
Community and recognition
- #1 on GitHub Trending's weekly, all-language repository list. Ranking screenshot published by the creator on September 1, 2026, with all languages and “This week” selected.
- Featured and interviewed by QbitAI. Project feature · The developer's story.
- Shared with developer communities. midudev's post.
<sub>A selection of public coverage, community shares, and historical milestones. Follow the links for dates and sources.</sub>
Preview
<details> <summary>Themes, exports, and share cards</summary>Same diagram, two themes, one click to switch:
| Dark | Light |
|---|---|
 |  |
The Export menu copies PNG to the clipboard and downloads static or motion formats:
After tracing a route, Export → Route Share Card downloads that authored path as a 1200×630 PNG with the full diagram retained for context.
After tracing authored Upstream or Downstream reach, Export → Reach Share Card captures that exact reading without claiming runtime impact.
Open examples/web-app.html locally to try the complete viewer.
Quick start
Current stable version: v3.1.0. See Changelog.
1. Install
npx skills add tt-a1i/archify -g
For an explicit, non-interactive Cursor install:
npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes
To try without installing:
npx skills use tt-a1i/archify@archify --agent codex
DSH community opt-in: dsh plugin --profile web add @tt-a1i/archify-dsh@1.0.0
The agent switcher covers cursor, codex, claude-code, and opencode.
Archify may GET the fixed stable manifest solely to show an optional reminder; it never downloads or installs updates. Successful checks wait about 24 hours (±20%); active use retries failures after 6, then 24 hours. The server sees normal HTTP metadata (IP and time), but receives no version, Agent, project data, prompts, account/device ID, or ETag. You decide whether and when to update. Set ARCHIFY_UPDATE_CHECK_DISABLED=1 to disable networking and reminder-state writes.
Stay updated
- Get release notifications: select Watch → Custom → Releases at the top of this GitHub repository. Starring the project does not subscribe you to release notifications.
- See what changed: Release notes.
- Use a feed reader: Subscribe to the release feed.
Installations with the update checker also check for newer stable releases during diagram delivery and can show a reminder. Older installations without the checker need a manual update to gain this feature. You choose whether and when to upgrade; Archify never installs updates automatically.
2. Start from a description — no repository required
Use Archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback.
For source evidence, open a repository and ask:
Analyze this repository, then use archify to create a high-level runtime architecture diagram.
Show 8–12 core components, one primary path, external dependencies, and trust boundaries.
Put supporting detail in cards instead of adding more edges.
3. Refine in chat
Continue with focused requests such as add Redis, move auth to the left, or highlight the rollback path. Archify keeps the typed source available for targeted iteration.
Choose the right diagram
<details> <summary>Ten diagram types, architecture comparisons, and examples</summary>| Type | Best for | Include in your prompt |
|---|---|---|
| Architecture | Components, services, storage, boundaries | Scope, core components, primary path |
| Workflow | CI/CD, approvals, tool calls, runbooks | Participants, order, branches, exceptions |
| Sequence | API calls, cache fallback, auth, async traces | Callers, callees, returns, timing |
| Data Flow | Pipelines, lineage, PII, consumers | Sources, transforms, stores, boundaries |
| Lifecycle | States, retries, waits, terminal outcomes | States, events, retry and cancellation paths |
| ERD | Database schemas: tables, columns, keys, cardinality | Tables, every column with its type, primary/foreign/unique keys, relationship cardinality |
| Class | Classes, interfaces, selected members, type relationships | Types, key members, inheritance and implementations, composition, dependencies |
| Tree | Single-parent hierarchies: repositories, modules, capability breakdowns | Root, levels, what each branch contains |
| Timeline | When things happened: incident reviews, release histories | Timestamps with time zone, events, source lanes, whether times are observed or illustrative |
| Waterfall | Where the time went in one request or agent run | Spans, start times and durations, nesting, whether timings are measured or illustrative |
Architecture's optional deployment-ownership profile fails closed when authored owners, region placement, private database scope, or named crossings are missing; it is never implicit and does not inspect live infrastructure. See the checked deployment proof.
For design or PR review, Architecture Delta compares validated Before / Delta / After snapshots with a machine receipt. Select an authored change or play one finite, viewer-only Review; it infers no impact, risk, or merge safety.
node archify/bin/archify.mjs compare architecture base.json head.json architecture-delta.html --json
Not sure which one fits? Use the interactive scenario guide, or ask the zero-dependency CLI:
node archify/bin/archify.mjs guide "Show an API request with Redis cache miss"
node archify/bin/archify.mjs guide "Map Kafka topics, consumer groups, replay, and DLQ" --json
Workflow keeps the happy path clear across lanes:
Sequence explains one interaction over time:
Data Flow makes movement and sensitivity boundaries explicit:
Lifecycle separates progress, waits, retries, and terminal outcomes:
New in 3.1: ERD, Class, Tree, Timeline and Waterfall.
ERD keeps tables, every column and key, and relationship cardinality together:
Class shows contracts, selected members, and which types depend on or implement them:
Tree shows single-parent containment, such as a capability breakdown:
Timeline places events on one proportional clock, with a lane per source:
Waterfall shows where the time went across nested and overlapping spans:
Explore these examples: ERD · Class · Tree · Timeline · Waterfall. The Timeline and Waterfall examples use illustrative data; treat timestamps or durations as real only when they come from logs or traces.
Architecture examples: web-app · Archify pipeline · grid placement · desktop agent
Why Archify
| Understand the structure | Walk through the story |
|---|---|
| Map components, workflows, and relationships from code or a description. | Explore nodes, follow paths, and share any view as a link. |
| Extend it your way | Share the result |
| Keep an editable source and build on the open-s |
…
archify
name: archify description: "Create validated architecture, workflow, sequence, data-flow, lifecycle/state, entity-relationship, class/interface, tree, timeline, and execution waterfall diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional motion, and image/SVG/WebM export. Accept plain-language requirements or Mermaid; inspect repository evidence for code-backed diagrams. Use when visualizing infrastructure, cloud/security networks, API calls, data pipelines, ETL/ELT, state machines, database schemas, class contracts, module hierarchies, incident/release histories, or request and agent-run timings. Also use for everyday subjects with steps, parts, relationships, or states: leave and travel plans, applications and approvals, renting conversations, money or document flows, and order progress. Not for numeric charts or dashboards." license: MIT metadata: version: "3.1" author: tt-a1i
Archify
Create an interactive HTML diagram from typed JSON.
Run commands from your working directory. Unless the user names another location, give each new diagram request its own folder .archify/<type>-<slug>-<YYYYMMDD-HHMMSS>/ there (local time, chosen once when the request starts): keep candidate.json and <slug>.html in it, set meta.output to that HTML path relative to the working directory, and reuse the folder for every repair rerun. A later request gets a new folder, so earlier versions stay intact. Replace bin/archify.mjs in the commands below with the installed package's absolute path, or its path relative to your working directory; input and output paths resolve from that working directory.
For a real codebase, read Repository authoring while tracing the requested behavior. A system description uses the steps below; an existing JSON uses the handoff path.
Existing candidate handoff
When the user supplies a frozen candidate, run finalize first as one CLI invocation. Its passing receipt completes the automated gates; follow any visual review recommendation under Delivery before claiming visual quality. For repair, follow step 5.
finalize includes a bounded update check in its delivery receipt; see Update awareness.
Fast authoring path
Use this path for ordinary generation. Read branch references only when their stated trigger applies.
-
Choose
architecture,workflow,sequence,dataflow,lifecycle,erd,class,tree,timeline, orwaterfallfrom the question. -
Use the exact schema and example paths in the Type router without listing their directories. Read Authoring defaults and the mode's example in a bounded batch separate from project documents and complete schemas so neither is truncated; recover any missing section before writing. For Architecture, use the matching showcase example. For every mode except Architecture, also read the mode and common schemas. Read the relevant schema definition before choosing any new field, enum, or constrained text, especially boundary kinds. Examples teach shape, not facts. Use fresh IDs, wording, and layout. Go directly to the candidate without preliminary help, doctor, starter validation, temporary diagrams, or output-path listing. Query brands only for an explicitly requested mark; read Brand marks for an unknown mark with a user-provided URL.
-
Once the requested scope and, for a real codebase, source evidence are covered, write the complete candidate directly without planning coordinates in prose. Choose Architecture abstraction and connected placement using Authoring defaults before coordinates: show the main user journey and necessary branches, preserve control roles and behavior-changing conditions, and leave enough room for actual relationship labels. No node, relationship, source, view, card, or boundary count is a target or ceiling. Use automatic routes first; add explicit routing only for necessary branch, return, supplied geometry, or measured repair. Set
meta.quality_profileto"showcase"unless the user requests densestandard. For ERD, use a table-first layout: show every physical column inentities[].attributes, keep its SQL type and source comment, state every key role a column carries (keytakes a role or a list, so a junction column is["pk", "fk"], and everyfkcolumn also needsreferenceslike"orders.id"), and never move columns into cards as a substitute for the table. Classify tables into functional domains before placement, give each domain a concisetag, and place its members in one solid rectangle of grid cells — a single row, a single column, or a filled rectangular block, not an L or diagonal. A tagged table always needsrow/col, because absolute coordinates have no grid cells and a domain whose tables do not fill one rectangle cannot be drawn as a band: the renderer reportserd/domain-not-drawninstead of publishing a diagram that cannot name the domain. A multi-domain schema reads best as one domain per column — eachtaga vertical run — because the reader scales a wide canvas up to the reader width and shrinks a tall one until the page fits, so the wide arrangement is the one that stays complete and legible inside a laptop viewport. A schema-first ERD over roughly 8 tables or 50 fields is itself a dense map: author its first complete-field pass atstandardand upgrade only once the layout still reads. -
Once the complete first candidate is written, run
finalizedirectly. Its first gate is showcase validation; successful first drafts need no separate pre-validation. Keep the candidate unchanged while the command runs:node bin/archify.mjs finalize <type> <candidate.json> <output.html> --quality showcase --jsonFor a repository-backed candidate, include evidence on the first draft and use the complete first command:
node bin/archify.mjs finalize <type> <candidate.json> <output.html> --repo-root <repo-root> --quality showcase --json. Pass the--qualitythat matchesmeta.quality_profile, such asstandardfor a dense first ERD pass.A passing receipt proves the included
validate,deliver, strictcheck, and real-browserbrowser-checkgates passed. Use its compact summary; run standalone commands only for a separate request or focused failure diagnosis. -
A non-zero exit is never success. Read compact stdout or
evidence.summaryReceipt, then repair the failed gate, including its repair limit. Preserve requested meaning and source evidence. For several tangled Architecture routes, read Architecture layout repair; for measured field or geometry failures, read Authoring contract. Edit the connected neighborhood and rerun the completefinalizecommand from step 4. Once a run has reachedbrowser-check, the output path owns that evidence: give every later run its own--out-dir <folder>/review-<n>.
Update awareness
finalize and standalone deliver include update in their receipts. Do not run a separate check for the same delivery. If update.noticeRequired is true, read references/update-awareness.md and keep one update line in your final response to the user, even after a quality gate fails. For a task with several diagrams, mention the update once in the final response. Snooze or ignore a reminder only when the user explicitly asks; never install or update on your own initiative.
Before the first candidate, use the authoring references and relevant repository source, not Archify implementation or tests. Inspect Archify implementation if diagnostics remain unactionable after focused repairs.
Type router
| Type | Use for | Schema | Example |
|---|---|---|---|
architecture | Components, services, cloud/security boundaries, infrastructure; what something everyday is made of | schemas/architecture.schema.json | System descriptions, services, libraries, and CLI repos: examples/web-app.architecture.json; deployment repos: examples/production-deployment.architecture.json |
workflow | Processes, approval gates, tool calls, runbooks, CI/CD; plans and step-by-step life processes | schemas/workflow.schema.json | examples/agent-tool-call.workflow.json |
sequence | API call chains, request lifecycles, async traces, returns; back-and-forth between people | schemas/sequence.schema.json | examples/cache-miss-request.sequence.json |
dataflow | Pipelines, ETL/ELT, lineage, governance, consumers; where money or documents go | schemas/dataflow.schema.json | examples/product-analytics.dataflow.json |
lifecycle | State/status transitions, retries, waiting and terminal states; where an application or order stands | schemas/lifecycle.schema.json | examples/deployment-release.lifecycle.json |
erd | Tables/entities, attributes, primary/foreign/unique keys, cardinality between them | schemas/erd.schema.json | examples/orders.erd.json |
tree | Single-parent containment: repository/module trees, capability or feature breakdowns, org-style decomposition | schemas/tree.schema.json | examples/payment-platform.tree.json |
class | Classes, interfaces, selected members, and dependency/association/inheritance/realization/composition between types | schemas/class.schema.json | examples/payments.class.json |
timeline | When things happened: incident reviews, release histories, timestamped events on a proportional clock with source lanes | schemas/timeline.schema.json | examples/payment-incident.timeline.json |
waterfall | Where the time went: span durations, overlap, and nesting of one request or agent run on a common time axis | schemas/waterfall.schema.json | examples/checkout-request.waterfall.json |
When ambiguous, run node bin/archify.mjs guide "<scenario>" --json. Scenario proof examples are structural references, not facts to copy.
For an everyday subject, keep the same diagram modes and semantic types, then name them for the reader: use everyday icon values and meta.legend labels as in Node icons. Ask for missing personal facts instead of inventing dates, amounts, or rules.
Mermaid input
Read Mermaid for topology and meaning, then author fresh Archify JSON; do not mechanically render Mermaid styling.
flowchart/graph→workflow, orarchitecturefor a component map.sequenceDiagram→sequence; participants become semantic participants and arrows become messages.stateDiagram→lifecycle; states and transitions retain meaning, not Mermaid style.erDiagram→erd; entity and relationship names, keys, and cardinality retain meaning, not Mermaid style.classDiagram→class; type kinds, selected members, and relationship kinds retain meaning, not Mermaid style.
Delivery
Use the finalize command above for the first candidate and after a repair.
finalize stops at the first non-passing gate. Its compact stdout and <output-stem>.finalize-summary.json are ordinary evidence. A passing run creates no screenshots and reports visualReview: "not-requested".
When a passing Architecture receipt reports visualReviewRecommendation.signals.resolvedCrossovers, copy the candidate aside and apply the hints in one edit that changes only node positions and sizes: every node, relationship (including its from and to), label, and source stays as it was. Rerun the complete finalize once with --out-dir <folder>/review-2, because the previous HTML already owns its browser evidence. If that run fails, reports more crossings, or reports the same crossings with more signals.routesOverSuggestedBends, restore the copy and finalize it with --out-dir <folder>/review-3. Do not start a second placement round. Hints about extra bends alone are optional.
When layoutReviewRecommendation.action is inspect-sequence-width, follow Sequence width review before handing off a newly authored Sequence.
Perceptual review is optional for ordinary generation, including a newly positioned Architecture. Use Optional capture evidence, with --out-dir <folder>/visual-check, when the user requests visual review, during development audits, or for a concrete route/browser concern. visualReviewRecommendation is advisory. Inspect captures before claiming visual quality; qualify any check claim as automated when perceptual review has not occurred.
Read Delivery contract for failed gates, standalone commands, provenance/recovery, repeated delivery, exports, or opening. Recovery follows deliver → strict provenance check → browser-check; captures require strict provenance.
For workflow viewport overflow, read Workflow viewport repair before the next layout edit.
When reporting verification details, distinguish artifact checks, browser evidence, captures, and actual perceptual review. For an explicitly requested immediate preview or active desktop loop, see Optional opening.
Optional viewer capabilities
Live motion is enabled by default for every rendered diagram; omit meta.animation. The Viewer’s Live/Still button controls playback.
Read references/viewer-runtime.md only when the user explicitly asks for Share Cards, Route/Reach cards, motion, deep links, presentation, search/focus, or another Viewer Runtime feature.
Setup and fallback
No install is required inside the skill package. For setup diagnosis, verify with:
node bin/archify.mjs doctor
node bin/archify.mjs demo <output-directory>
When shell access is unavailable, hand-place architecture SVG into assets/template.html, use CSS semantic classes rather than inline colors, and follow the visual review contract in references/delivery-contract.md.
Output
Reply in the user's language, as briefly as the result allows; the diagram carries the content, so a single diagram usually needs one line.
- Lead with a clickable Markdown link to the HTML: a descriptive title, not the file name, and its absolute path, wrapped in
<...>when it contains spaces. - When the user wants to understand a system or codebase rather than draw a described subject, add one or two sentences with the key takeaway. Skip sentences that only restate what the diagram obviously shows.
- State anything that changes how the diagram should be read: the abstraction level or deliberately omitted parts when a reader might expect them, illustrative rather than measured values, missing source evidence, or requested content dropped or merged during repair.
- For several diagrams, report completion once with a link to an existing overview or compact per-diagram links, not a directory path.
Do not recap commands, repair rounds, hashes, quality profiles, or check lists; they stay in the receipts. If asked whether the diagram was verified, answer in one line, such as “Automated checks passed; not visually reviewed.” Give receipt links and details only for reproducibility or troubleshooting. Disclose requested visual review that could not run, and claim visual inspection only when performed. Keep the required update line under Update awareness.
Example: Created [Checkout request timing](/abs/path/checkout-timing.html). Durations are illustrative, not measured.
Related Skills
- Diagram DesignEditorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.DesignView Details
- Agent Rules BooksAGENTS.md rules / skills for AI coding agents: Codex, Cursor & Claude Code. Inspired by Clean Code, Refactoring, DDD, Clean Architecture and DDIA programming books.DesignView Details
- Awesome Design SkillsList of 67 awesome DESIGN.md and SKILL.md design skill files for agentic tools like Claude Design, Google Stitch, Codex, Cursor, and other AI toolsDesignView Details
- ReaReverse engineer anything with agents, from app behavior down to native binaries.AI/MLView Details