Archify Online: Interactive Diagrams in Your Browser, No Agent Needed

You see the screenshots everywhere: architecture maps that light up a request path on click, fade everything else back, and let you walk a system layer by layer. They come from Archify — the open-source diagram project on GitHub (tt-a1i/archify), MIT-licensed — which has collected more than 65,000 stars since April 2026 (as of September 2026). Then you open the repository and hit the catch: Archify is not a website. It is an agent skill and a CLI, meant to live inside Claude Code, Codex, or a similar tool.

Most people searching for "Archify online" want the maps, not the tooling around them. This post covers what Archify actually is, whether an official online version exists (short answer: no — by explicit design), and the browser port of the same engine that we run at mermaidonline.org — including what carries over, what had to change, and an honest comparison so you can pick the right form for your workflow.

TL;DR

• Archify is a 65,000+-star open-source engine that turns a system description into a verifiable, interactive map — but it ships as an agent skill/CLI, not a website.
• There is no official hosted version; the README names hosted sharing as intentionally out of scope.
• We ported the same MIT-licensed rendering engine to the browser: paste a description, a Mermaid flowchart, docker-compose, Terraform, Kubernetes, or SQL, and explore the result at the interactive map generator.
• Export is a self-contained HTML file — search, route tracing, and lenses keep working offline, in one file you can attach to a PR.

Archify is best understood as a compile step for system diagrams. Instead of asking a model to "draw" boxes and hoping the output is legible, an agent produces a typed JSON intermediate representation of your system, and Archify deterministically compiles that specification into self-contained HTML/SVG. The project's own README puts it simply: agents produce the typed specification; Archify deterministically renders it (project README on GitHub, accessed September 2026). That split is why the output looks designed rather than generated — layout, routing, and label spacing are rules, not guesses.

It landed at the right moment. AI coding agents became the default place where engineers already describe systems, so "turn a codebase or system description into a polished, interactive system map — directly in chat" (project README) matched how people actually work. Growth has been steep: the repository was created in April 2026, crossed roughly 22,800 stars by late August, and sits above 65,000 as of September 2026 (GitHub repository and public star trackers).

The mental model to keep: Archify is a skill you install into your agent, not a site you visit. Which raises the obvious question.

No — and this is a deliberate scope decision, not an oversight. The README states it verbatim:

"Automatic Mermaid parsing, general-purpose auto-layout, hosted sharing, and WYSIWYG editing are intentionally outside the current scope." (project README on GitHub, accessed September 2026)

The official site is a documentation landing page plus a gallery of pre-built example artifacts you can download and open locally. Nothing on it accepts your input and returns a map. So today there are exactly two ways to run this engine:

Everything below is about the second row — what a browser port of the engine gives you, and where it deliberately differs.

We run the ported engine at the interactive map generator. One disclosure first: Mermaid Online is not affiliated with or endorsed by the Archify authors — we ported its MIT-licensed engine and credit it by name in the product.

The part of Archify that makes the output good is the deterministic layer, and that is exactly what the port preserves. Same typed JSON specification contract, same rule-driven layout and label-fitting, same interaction model: click a node to focus it, press R to trace an exact route between two nodes, L to compare semantic roles through lenses, P to play a guided story, search with /. Deep links carry state — a URL fragment like #route=a~b reopens the map with that path already traced. Because the compilation is deterministic, the same specification renders identically in the CLI and in the browser; route traces over the same nodes return the same hops. The exported artifact is the same self-contained HTML file: one file, no CDN, no server, and the interactions keep working offline.

The upstream flow assumes an agent sits in front of the engine: you describe the system in chat, the agent authors the JSON specification. In a browser there is no agent, so our service takes over that step — an AI layer converts your input into the typed specification, and the renderer takes it from there. That substitution drives most of the practical differences below, including the inputs we accept (the original explicitly excludes automatic Mermaid parsing, while accepting a pasted Mermaid diagram is one of our primary paths). It also changes the economics: running the conversion costs us model calls, so the port is free for your first 10 maps and uses credits after that, while the CLI remains fully free under its MIT license.

The input story is where the port diverges most from upstream. The original expects your agent to read a repository or a chat description; Mermaid parsing is explicitly out of its scope. Our conversion layer was built for exactly the artifacts engineers already have lying around:

This is the path most mermaidonline readers will care about. Take a flowchart you already maintain:

flowchart TD
    A[Client] --> B[API Gateway]
    B --> C[Webhook Service]
    C --> D{Delivery ok?}
    D -- yes --> E[(Event Store)]
    D -- no --> F[Retry Queue]
    F --> C

Paste it into the interactive map generator, and the conversion layer maps nodes to typed components, classifies them (external, backend, message bus, data store), and hands the specification to the same deterministic renderer:

The static diagram did not change — the same six nodes and edges are all there. What changed is that every box became an addressable object you can search, trace, and filter. If your Mermaid does not render cleanly to begin with, fix that first with our guide to getting AI-generated Mermaid to render correctly, or generate fresh code with the AI Mermaid generator. Photos of whiteboards work too — turn a whiteboard photo into Mermaid first, then paste the result. And if a static Mermaid architecture diagram is all you need, the Mermaid architecture diagram guide covers that path.

The same conversion layer reads infrastructure definitions. A docker-compose.yml becomes services and their dependencies; a Terraform file becomes managed resources and their references; Kubernetes manifests become workloads, config, and the clusters they expose. The value over reading the YAML is the same as with Mermaid: the map exposes structure — what calls what, what happens if this node dies — which is tedious to reconstruct by eye from a few hundred lines of manifests.

Foreign keys are edges; tables are nodes. A schema paste produces a map where you can trace exactly which tables a given feature touches — useful during migrations and reviews, when the question "what reads this table?" needs a precise answer. As with every input mode, the result is an explorable map, not a picture.

The interactions are the reason to bother with an engine like this at all. Four of them carry most of the value:

/) jumps the viewport to any named node — the fast path in a map with dozens of components.R) asks the only question that matters in an incident review: L) re-color the map by component role — backends, data stores, external services — so you can read one layer at a time.P) play an authored walkthrough of the system, one step at a time — the closest thing to a presenter mode a generated map has. Two of these survive export in a shareable form. Deep links like #route= and #lens= reopen the exported HTML with the view already applied, which makes them surprisingly useful in PR descriptions and design docs — paste a link and reviewers see the path you are talking about, not a red rectangle drawn on a screenshot. For destinations that cannot run HTML at all, export a static PNG when the destination can't run HTML instead; and if you are weighing interactive HTML against plain Mermaid blocks, how Mermaid renders in GitHub README files covers the trade-offs.

That is the whole loop. There is nothing to configure before step 2; the type chips (Architecture, Dataflow, Sequence) exist if you want to force a diagram style instead of relying on detection.

If you are evaluating this family of tools, the comparison that matters is not "port versus original" as a quality ranking — the port uses the original's engine. It is which form fits your workflow:

If you already live in Claude Code or Codex, the skill is the more natural home: it can read your repository directly, it is free without limits, and it tracks upstream immediately. You also get the two diagram types the port does not serve yet — workflow and lifecycle — plus whatever the fast-moving upstream adds next (the project has shipped continuously since April).

The port covers three of the five diagram types; upstream updates reach it only when we re-port them; the input conversion runs through our AI layer rather than your local agent; and after the first 10 free maps it is paid credits. None of that is hidden in the fine print — it is the trade you make for zero install. If those constraints bite, use the original; that is what it is for. And if the interactive layer is more than you need, a well-structured static diagram still goes a long way — keeping large diagrams readable applies regardless of the render.

The upstream project is MIT-licensed open source, so the CLI and agent skill cost nothing. Our browser port is free to try with no account — you get 10 interactive renders, and paid credits cover heavier use.

No. As of September 2026, the project README states that hosted sharing is "intentionally outside the current scope", and the official site hosts documentation plus a gallery of prebuilt examples. The only way to run the engine in a browser today is a third-party port like ours.

The original Archify is an agent skill and CLI designed to run inside tools like Claude Code. Our port moves the rendering engine into the browser, so you can paste Mermaid, docker-compose, Terraform, Kubernetes manifests, or a SQL schema and get an interactive map with nothing to install.

The core output is a self-contained interactive HTML file that works offline — node search, route tracing, and lenses keep functioning in the exported file. If you need a static image for slides or docs, you can export one with our Mermaid-to-PNG tool instead.

Everything above runs at mermaidonline.org — the interactive map generator needs no account for your first 10 maps, and the same site covers the static side of the workflow: generating Mermaid from a description or an image, checking syntax, and exporting PNG/SVG. If you end up preferring the original CLI, the repository README has the install instructions — the engine is the same either way; pick the form that matches where you work.