Back to skills

Archify

Architecture and workflow diagrams as explorable HTML with themes, views and step-through playback.

tt-a1i

Engineers / Architects / Technical writers

DiagramsLicence: MITGitHub stars73k
Example output of the Archify agent skill

Preview: example output from tt-a1i/archify by tt-a1i, reproduced under the MIT licence.

Suggested prompts

Written by PicGens as starting points. Click one to copy it, then paste it to your agent once the skill is installed.

About this skill

Archify turns a description — or a codebase the agent reads for you — into architecture, workflow, sequence, data-flow and lifecycle diagrams. The result is a standalone HTML page with inline SVG that you can explore: switch between dark and light themes, jump between named views, and play the diagram back step by step as a story, with optional motion tracing a path through the system.

Behind the page sits a JSON source and a bundled renderer that validates the diagram and records what it checked, so edits stay consistent. You iterate in conversation, for example by asking it to highlight the cache-miss path. Finished diagrams can be exported as PNG, JPEG, WebP, SVG or a WebM video, which makes it useful for documentation, talks and onboarding material alike.

What it makes

An interactive HTML/SVG diagram with image and video exports.

From the project README

Reproduced from tt-a1i/archify by tt-a1i under the MIT licence; shortened here — read the rest on GitHub.

Archify

Turn anything you want to understand, plan, or share into an interactive visual.

Archify — interactive diagrams

Start with an idea, a question, or a plan. Describe it to your AI agent, and Archify turns it into an interactive HTML you can explore, customize, and share. From travel itineraries and learning maps to complex systems—make it your own.

See what the community is creating—and imagine what you could make next.

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

❤️ Partners & sponsors: Kimi Work · Supercode · EverMind/Raven

See Archify in action

Three verified Archify artifacts moving through Signal Flow, Blueprint, and Classic presets
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

Archify × Kimi Work collaboration banner

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 →

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.

Archify × Raven
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
Agent workflow playing one authored chapter Cache-miss sequence showing the Web App to Postgres route Production architecture comparing backend and database roles
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

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

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

A community-created four-day Shanghai CityWalk itinerary

▶ 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

A selection of public coverage, community shares, and historical milestones. Follow the links for dates and sources.

Preview

Themes, exports, and share cards

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

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

1. Install
npx skills add tt-a1i/archify -g
More installation options and update-check details

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.

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

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

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

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 to install Archify

  1. 1.Skills CLI (global)

    npx skills add tt-a1i/archify -g

Licence and attribution

Archify is created and maintained by tt-a1i and published at github.com/tt-a1i/archify under the MIT licence. The summary, suggested prompts and “About this skill” text are written by PicGens; the README section is reproduced under the project’s licence. The preview is an example image from the repository, reproduced under its licence. PicGens is not affiliated with the author.

Related skills

All skills →
  • Example output of the Diagram Design agent skill

    Diagram Design

    Get a designer-quality diagram as a standalone HTML/SVG file, in light, dark or editorial form.

    cathrynlaveryGitHub stars: 43k
  • GitHub card for liangdabiao/stem-illustration-skill

    STEM Illustration

    Get a clean scientific schematic or teaching figure from a template, in the style your audience expects.

    liangdabiaoGitHub stars: 122
  • Example output of the Hand-Drawn Diagrams agent skill

    Hand-Drawn Diagrams

    Get a sketchy Excalidraw diagram from one sentence, with a live edit link and a self-drawing SVG.

    muthuishereGitHub stars: 78
  • GitHub card for anthropics/skills

    Canvas Design

    Get an original poster or art print drawn in code, plus the design philosophy behind it.

    anthropicsGitHub stars: 179k

Looking for prompts instead of a skill?

Browse real chart & infographic prompts with the images they made, or give your agent the free PicGens template skill.