archify is a free, open source frameworks & platforms project written in JavaScript and released under Apache-2.0. It has 92,701 GitHub stars, 6,329 forks and 134 open issues, and was last pushed 11 hours ago. On this registry it ranks #7 of 139 tracked projects in Frameworks & Platforms, with 5 head-to-head comparisons available. It gained 17,573 stars over the last 30 tracked days.

What is archify?

Archify is an MIT-licensed agent skill and Node.js rendering and validation system that turns a codebase or a written system description into a polished, interactive, self-contained HTML system map, and it is built for developers and platform teams working inside coding agents such as Cursor, Claude Code, Codex CLI, and OpenCode.

What it is

Archify is a JavaScript rendering and validation system distributed as an agent skill. Inside a supported coding agent, the agent produces a typed JSON intermediate representation of a system, and Archify deterministically compiles that IR into HTML and SVG rather than leaving the drawing to the model. The output covers five diagram types — architecture, workflow, sequence, data-flow, and lifecycle — with four presets, dark and light themes, built-in brand marks, and finite motion. A generated artifact is a single self-contained HTML file, and the same pipeline produces PNG, SVG, WebM, and 1200×630 share cards for sharing or embedding.

The concrete problem it solves is that architecture diagrams drift from the code they describe. Hand-maintained drawings go stale, and plain text-to-diagram tools render whatever the model asserts without checking it, so a diagram can show topology that does not exist. Archify holds the line at the intermediate representation: the IR is typed, the compilation is deterministic, and the checks run against validated snapshots. That makes it possible to review an architecture change before merge by comparing two validated snapshots as Before, Delta, and After, with exact added, removed, changed, moved, and rerouted facts. It is positioned as an alternative to Mermaid-style diagram-as-code rendering, replacing static generated pictures with verifiable, interactive artifacts.

Key capabilities

  • Five diagram types: architecture, workflow, sequence, data-flow, and lifecycle.
  • Typed JSON IR that Archify deterministically compiles into HTML and SVG, so rendering is not left to model guesswork.
  • Snapshot comparison across two validated IR states, reported as Before / Delta / After with added, removed, changed, moved, and rerouted facts.
  • Export paths to PNG, SVG, WebM, and 1200×630 share cards alongside the self-contained HTML.
  • Interactive inspection: search nodes, trace upstream and downstream authored reach along exact routes, compare roles, and play guided stories.
  • Revision-verified source opening, so a node can be tied back to a specific source revision.
  • Four presets, dark and light themes, built-in brand marks, and finite motion for presentation.

Who uses it and how

  • Engineering teams working inside Cursor, Claude Code, Codex CLI, or OpenCode who want diagrams produced during normal agent chat rather than in a separate tool.
  • Reviewers running architecture change checks before merge, comparing a proposed snapshot against the current validated one to see exactly what moved.
  • Users with no repository at hand, who describe a system in prose in any agent chat and still get a generated map, since no repository is required.
  • Teams evaluating output against the Proof Lab, which holds 11 checked-in scenarios with their JSON sources, named views, and validation receipts.
  • Teams mapping real codebases at a pinned revision, as with the public mco-org/mco repository traced at 9f1a1cf.

Getting started

Install the skill with npx skills add tt-a1i/archify -g. Cursor users can follow the agent-aware quick start on the project page for exact global and project commands, and no repository is needed to begin.

How it compares

The topic list places Archify as a Mermaid alternative, and the distinction is in what gets trusted. Mermaid renders text into a static diagram, whereas Archify compiles a typed JSON IR through deterministic checks and emits artifacts that can be diffed, traced, and revision-verified. No list of paid products replaced by this project is provided in the facts, so no licence, hosting, or cost comparison is made here.

When to use it — and when not to

Archify runs as a Node.js skill inside an agent, so there is no separate server, database, or object store to operate, but the workflow assumes the team already works inside a supported coding agent; teams without one get little from it. The README lists the current development version as v2.17.0-dev.1, so the project is on a pre-release line and interfaces may churn. The repository also carries 134 open issues, which is worth weighing before making it a fixed part of a release pipeline.

project readme (upstream, from github) — read inline

English · 简体中文

Archify on Trendshift

Archify product preview

Archify

Turn a codebase or system description into a polished, interactive system map — directly in chat.

Archify is a Node.js rendering and validation system for Cursor, Claude Code, Codex CLI, and OpenCode. Agents produce typed JSON IR; Archify deterministically compiles it into HTML/SVG.

  • Open it and present — five diagram types, four presets, dark/light themes, built-in brand marks, and finite motion
  • Review architecture changes before merge — compare two validated snapshots as Before / Delta / After, with exact added, removed, changed, moved, and rerouted facts
  • Every interaction stays grounded — search nodes, optionally open revision-verified source, trace upstream/downstream authored reach and exact routes, compare roles, and play guided stories without inventing topology
  • One file, ready to trust and share — typed JSON IR and deterministic checks produce self-contained HTML plus PNG, SVG, WebM, and 1200×630 share cards

License Agent Skill Development Version

Current development version: v2.17.0-dev.1. See Changelog.

Project page · Scenario guide · Proof Lab

npx skills add tt-a1i/archify -g

Using Cursor? Open the agent-aware quick start for exact global and project commands.

No repository is required: describe the system in any agent chat.

❤️ Sponsors

Supercode
supercode.sh
Supercode sponsors Archify and enhances Codex and Cursor with token optimization, curated Skills, and spec-driven development. Archify is featured as a Supercode Editor’s Choice skill.

Supercode Editor’s Choice — Archify

EverMind · Raven
EverMind sponsors Archify and builds memory infrastructure for agents. Its Raven harness supports Archify as a Skill for verified, interactive system maps.

Want to sponsor Archify? Contact us by email.

See Archify in action

These are generated Archify artifacts, not product mockups. Click a frame to open its live, shareable state.


Three real generated artifacts. Signal Flow · Blueprint · Classic · open the interactive Proof Lab ↗

Guided story Route probe Semantic lens
Agent workflow playing one authored chapter Cache-miss sequence showing the Web App to Postgres route Production architecture comparing backend and database roles
Play one finite named chapter. Inspect the shortest authored directed path. Compare real traffic between semantic roles.

The Proof Lab contains all 11 checked-in scenarios, their JSON sources, named views, and validation receipts.

A real repository, mapped from source

MCO runtime architecture generated from the public mco-org/mco repository

Archify traced mco-org/mco at 9f1a1cf and produced this checked map. Open it ↗ · trace reach ↗ · typed source

Preview

Same diagram, two themes, one click to switch:

Dark Light
Dark theme Light theme

The Export menu copies PNG to the clipboard and downloads static or motion formats:

Export menu

Use Copy Share Card when you want a canonical 1200×630 image for a README, release, or social post.

After tracing a route, Export → Route Share Card downloads that authored path as a 1200×630 PNG with the full diagram retained for context.

Route Share Card showing the exact Users to API Server path with the full architecture retained as context

After tracing authored Upstream or Downstream reach, Export → Reach Share Card captures that exact reading without claiming runtime impact.

MCO downstream Reach Share Card showing authored relationships from Command Router

Open examples/web-app.html locally to try the complete viewer.

Quick start

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@0.1.0

The agent switcher covers cursor, codex, claude-code, and opencode. For Raven's manual ZIP install, extract archify.zip into ~/.raven/workspace/skills; it yields ~/.raven/workspace/skills/archify. Raven is not a switcher target.

Archify may GET the fixed stable manifest solely to show an optional reminder; it never downloads or installs updates. Successful checks wait about 72 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.

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

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

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

Architecture Delta showing added, removed, changed, and moved authored facts

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:

Workflow example

Sequence explains one interaction over time:

Sequence example

Data Flow makes movement and sensitivity boundaries explicit:

Data Flow example

Lifecycle separates progress, waits, retries, and terminal outcomes:

Lifecycle example

Architecture examples: web-app · Archify pipeline · grid placement · desktop agent

Why Archify

  • Layout judgment over generic auto-layout — the agent chooses hierarchy, spacing, routes, and emphasis; shared automatic endpoints spread deterministically instead of piling arrows on one midpoint.
  • Typed JSON IR — every renderer-backed mode has a schema and reproducible source.
  • Atomic validation before delivery — schema, layout, HTML/SVG, route, and label-to-route clearance checks must all pass before a showcase artifact replaces the last known good output.
  • Failures come with a repair receipt — validate --json and deliver --json return stable rule codes, the exact subject, measured evidence, and only supported repair controls instead of a Node stack or an unstructured retry guess.
  • Last-good live preview — an optional desktop loop watches one JSON file, refreshes only after the latest candidate passes every gate, and keeps the previous verified diagram visible when a save is incomplete or invalid.
  • Truthful interaction — focus, upstream/downstream reach, exact routes, role comparison, and stories reuse authored nodes and relationships instead of inventing topology or claiming runtime impact.
  • Source evidence, only when requested — Evidence-backed Architecture nodes mark themselves SRC n and open Git-verified files and line ranges pinned to one public commit; ordinary artifacts stay source-free.
  • Portable by default — the result is one HTML file; exports remain full-diagram and free of temporary viewer state.

Archify is not a general-purpose drawing editor or a Mermaid theme. It turns technical intent into a communication artifact.

How it works

Step What happens
Generate The agent creates typed JSON IR from your description.
Validate Bundled validators and layout rules check the source; failures identify the exact local repair in machine-readable JSON.
Preview (optional) A loopback-only desktop session watches one source and reloads only verified revisions; failures keep the last-good artifact.
Deliver A same-directory candidate is rendered and checked; only a passing artifact atomically replaces the target, then optional --open launches that exact file.
Iterate The agent updates the source while unrelated structure stays stable.

Useful repository commands:

cd archify
node bin/archify.mjs doctor
node bin/archify.mjs demo /tmp/archify-demo
node bin/archify.mjs guide "Show CI/CD checks, approval, deploy, and rollback"
node bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --quality showcase --json
node bin/archify.mjs preview workflow examples/agent-tool-call.workflow.json /tmp/workflow.html --quality showcase
node bin/archify.mjs deliver workflow examples/agent-tool-call.workflow.json /tmp/workflow.html --quality showcase --open --json

preview is an explicit loopback-only desktop mode: it watches one JSON file on a random 127.0.0.1 port, keeps the last verified output through failures, stops with Ctrl-C, and adds no generated-HTML runtime. Use --no-open for tests or manual URL opening.

deliver --open is an opt-in one-shot handoff after commit. Opener failure preserves success; JSON remains on stdout and the absolute fallback path goes to stderr.

On failure, validate --json and deliver --json emit one JSON object. Apply only each diagnostics[] subject's supportedFixes, within the Skill's two correction rounds; visual review remains separate.

Settings:

{
  "meta": {
    "locale": "en",
    "animation": "trace",
    "visual_preset": "signal-flow"
  }
}

meta.locale=en|zh-CN localizes page title, Legend, states/errors, a11y, HTML/SVG lang—never authored content. Otherwise omit; preserve requested-language copy; disclose English fallback. Static omits animation; classic defaults.

Explore and share the output

Action Control
Open the factual Diagram Guide ?
Find and focus a semantic node /
Trace upstream/downstream authored reach Focus a node → Upstream / Downstream
Probe a directed route and inspect its journey R or PATH
Compare one or two semantic roles L or LENS
Open the live overview radar M or MAP
Play a guided story / change chapter P / [ ]
Enter Presentation Stage F
Choose visual style (S cycles) / toggle theme / open Export S / T / E
Zoom or reset + / - / 0

Stable links can restore #focus=, #focus=&reach=upstream|downstream, #relation=, #route=~, #lens=~, and #view=. Reader-driven motion is finite, respects prefers-reduced-motion, and never enters canonical exports.

The complete generation and viewer contract lives in archify/SKILL.md.

Installation options

Surface Install location or method Capability
Raven Manual ZIP into ~/.raven/workspace/skills → ~/.raven/workspace/skills/archify Full renderer + validation workflow
Claude Code ~/.claude/skills/ or .claude/skills/ Full renderer + validation workflow
Codex CLI ~/.agents/skills/ or .agents/skills/ Full renderer + validation workflow
opencode ~/.config/opencode/skills/, .opencode/skills/, or .agents/skills/ Full renderer + validation workflow
Claude.ai Upload archify.zip under Settings → Capabilities → Skills Depends on Node.js access in the sandbox
Project Knowledge Upload archify.zip to the project Prompt-driven architecture fallback
DeepSeek Harness Opt-in: dsh plugin --profile web add @tt-a1i/archify-dsh@0.1.0. Invoke: Use the archify skill to map this repository's runtime architecture. Remove: dsh plugin --profile web remove @tt-a1i/archify-dsh. Community integration for developer-preview @deepseek-ai/dsh@0.1.0-rc.6; Node ^22.19.0 || >=24.0.0; not an official DeepSeek product. No telemetry. Shell files need exact workspace paths, not Web Produced Files. Details.

Reference and scope

Automatic Mermaid parsing, general-purpose auto-layout, hosted sharing, and WYSIWYG editing are intentionally outside the current scope.

License

MIT — free to use, modify, and distribute.

Contributing

Issues, pull requests, and real-world diagrams are welcome. Start with the contribution guide, use the reproducible bug form for failures, or submit a validated diagram through the community showcase form. · LINUX DO

Star History

Star History

Frequently asked questions

Is archify free to use?

archify is open source under the Apache-2.0 licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does archify do?

Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.

What is archify written in?

archify is primarily written in JavaScript. Its source is publicly available at https://github.com/tt-a1i/archify, and it has 92,701 GitHub stars.