Star 历史趋势
数据来源: GitHub API · 生成自 Stargazers.cn
README.md

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  ·  简体中文  ·  日本語

tt-a1i/archify | Trendshift

GitHub stars MIT License Agent Skill Stable version 3.0.1

Archify website Join Archify on Discord Archify WeChat group Archify QQ group Follow the creator on X

❤️ Partners & sponsors: Kimi Work · Supercode · OpenLux

See Archify in action

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 ↗

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.

Supercode Editor’s Choice — Archify
OpenLux
OpenLux
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.

Exclusive offer for Archify users: Sign up through our referral link and enjoy up to 7.5% off credit top-ups!

Get started with OpenLux →
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 workflowFollow a cache missExplore service relationships
Agent workflow tracing everything the planner drivesCache-miss sequence showing the Web App to Postgres routeProduction architecture comparing backend and database roles
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

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

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:

DarkLight
Dark themeLight theme

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

Export menu

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 stable version: v3.0.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 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.

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
TypeBest forInclude in your prompt
ArchitectureComponents, services, storage, boundariesScope, core components, primary path
WorkflowCI/CD, approvals, tool calls, runbooksParticipants, order, branches, exceptions
SequenceAPI calls, cache fallback, auth, async tracesCallers, callees, returns, timing
Data FlowPipelines, lineage, PII, consumersSources, transforms, stores, boundaries
LifecycleStates, retries, waits, terminal outcomesStates, 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 structureWalk 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 wayShare 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.
The engineering behind the experience
  • 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

Generation, validation, preview, and delivery details
StepWhat happens
GenerateThe agent creates typed JSON IR from your description.
ValidateBundled 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.
DeliverA same-directory candidate is rendered and checked; only a passing artifact atomically replaces the target, then optional --open launches that exact file.
IterateThe 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 localizes page title, Legend, states/errors, a11y, HTML/SVG lang—never authored content. en/zh-CN are built in; other languages, including Spanish (es), need meta.translations (canonical message key → translated string; see examples/locales/es.json), or the renderer falls back to English and discloses it. Static omits animation; classic defaults.

Explore and share the output

ActionControl
Open the factual Diagram Guide?
Find and focus a semantic node/
Trace upstream/downstream authored reachFocus a node → Upstream / Downstream
Probe a directed route and inspect its journeyR or PATH
Compare one or two semantic rolesL or LENS
Open the live overview radarM or MAP
Enter Presentation StageF
Choose visual style (S cycles) / toggle theme / open ExportS / T / E
Zoom or reset+ / - / 0

Stable links can restore #focus=<id>, #focus=<id>&reach=upstream|downstream, #relation=<id>, #route=<source>~<target>, and #lens=<kind>~<kind>. 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

SurfaceInstall location or methodCapability
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.aiUpload archify.zip under Settings → Capabilities → SkillsDepends on Node.js access in the sandbox
Project KnowledgeUpload archify.zip to the projectPrompt-driven architecture fallback
Hermes AgentOpt-in: hermes skills install skills-sh/tt-a1i/archify/archify -yCommunity Skill-only integration; Node >=18; not a Nous official product. No telemetry. It is not a switcher target. Details.
DeepSeek HarnessOpt-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.

Community

👋 Welcome to the Archify Community!

Connect with other users and developers, share ideas, request features, report bugs, discuss development, and help make Archify better together.

  • Discord
  • WeChat: scan the QR code below. WeChat group codes expire periodically; if this one has expired, ask for the current code through Discord or QQ.
  • QQ group: 1121948602
WeChat
Archify Official WeChat group QR code
QQ
Archify Official QQ group QR code

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

Support Archify

If Archify has been useful to you, you can support its continued development. Thank you for helping keep the project going ❤️

Support via WeChat Pay

Scan the QR code below with WeChat, or save it and open it in WeChat to scan.

WeChat Pay QR code to support the Archify maintainer

Support via Alipay

Scan the QR code below with Alipay, or save it and open it in Alipay to scan.

Alipay QR code to support the Archify maintainer (name redacted)

Using Archify, sharing it, reporting bugs, and contributing improvements are also ways to help.

Star History

Star History

关于 About

Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.
agent-skillsarchitecture-as-codearchitecture-diagramclaude-skillcode-visualizationcodexcoding-agentsdata-flow-diagramdeepseek-harnessdeveloper-toolsdiagram-as-codediagramsdiagrams-as-codedsh-pluginmermaid-alternativeopencodesequence-diagramsoftware-architecturesystem-designtext-to-diagram

语言 Languages

JavaScript90.2%
HTML4.6%
CSS4.1%
Astro0.9%
Shell0.1%
Mermaid0.1%
PowerShell0.1%
Python0.0%
TypeScript0.0%

提交活跃度 Commit Activity

代码提交热力图
过去 52 周的开发活跃度
864
Total Commits
峰值: 303次/周
Less
More

核心贡献者 Contributors