tt-a1i/archify

Turn code, ideas, and workflows into diagrams you can explore and share.

Describe a system in your favorite AI agent, or ask it to read a repository. Archify creates a self-contained interactive HTML diagram: explore details, follow a request, walk through a story, and share the whole artifact.

Live demos  ·  Get started  ·  Scenario guide  ·  Community  ·  简体中文

See Archify in action

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

Click the preview to open real interactive artifacts. The GIF shows the motion; the HTML lets you explore it yourself.

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

❤️ Sponsors

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.
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.

Show what matters

| Explain an agent workflow | Follow a cache miss | Explore service relationships | |---|---|---| | | | | | Walk through the steps defined in the diagram. | 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, named views, and validation receipts.

Understand a real repository

_{CODE → DIAGRAM · A source-backed system map}

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.

_{COMMUNITY STORIES · Selected examples shared by users}

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.

_{Community artifact · Shanghai CityWalk · Four days of routes and place links}

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, path exploration, and guided chapters 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 ↓

_{Try switching between D1–D4, opening a place card, or following a map link. Times and place information reflect the author's original itinerary.}

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.

Preview

Themes, exports, and share cards

Same diagram, two themes, one click to switch:

| Dark | Light | |---|---| | | |

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

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.

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 development version: v2.17.0-dev.1. See Changelog.

1. Install

npx skills add tt-a1i/archify -g

npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes

npx skills use tt-a1i/archify@archify --agent codex

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

Five diagram types, architecture comparisons, and examples

| 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

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:

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 explain a process chapter by chapter. | | Extend it your way | Share the result | | Keep an editable source and build on the open-source code or generated HTML with your own interactions and use cases. | Share a self-contained HTML file or export images, video, and share cards. |

How it works

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

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

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

• Schema reference · Skill · Examples · Agent cookbook
• Changelog
• Roadmap
• Generated Proof Lab