{"slug": "archify-online-interactive-diagrams-in-your-browser-no-agent-needed", "title": "Archify Online: Interactive Diagrams in Your Browser, No Agent Needed", "summary": "A developer has ported the MIT-licensed Archify diagram engine, an open-source project (tt-a1i/archify) that has collected over 65,000 GitHub stars since April 2026, to run directly in the browser at mermaidonline.org. Archify originally ships only as an agent skill and CLI for tools like Claude Code and Codex, with its README stating hosted sharing is intentionally out of scope; the browser port accepts pasted descriptions, Mermaid flowcharts, docker-compose, Terraform, Kubernetes, or SQL and exports self-contained interactive HTML maps that work offline.", "body_md": "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.\n\nMost 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.\n\nTL;DR\n\n- 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.\n- There is no official hosted version; the README names hosted sharing as intentionally out of scope.\n- 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.\n- Export is a self-contained HTML file — search, route tracing, and lenses keep working offline, in one file you can attach to a PR.\n\nArchify 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.\n\nIt 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).\n\n| Item | Details | \n|---|---|\n| Project | tt-a1i/archify on GitHub | \n| License | MIT | \n| Form | Agent skill + CLI (runs inside coding agents) | \n| Diagram types | Architecture, workflow, sequence, data flow, lifecycle | \n| Created | April 2026 — 65,000+ stars as of September 2026 | \n\nThe mental model to keep: **Archify is a skill you install into your agent, not a site you visit.** Which raises the obvious question.\n\nNo — and this is a deliberate scope decision, not an oversight. The README states it verbatim:\n\n\"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)\n\nThe 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:\n\n|  | How it works | \n|---|---|\n| Original (official) | Install the skill into an agent (Claude Code, Codex, Cursor, …), describe your system in chat, receive the rendered map locally | \n| Browser port (ours) | Open a web page, paste code or describe the system, explore the map immediately | \n\nEverything below is about the second row — what a browser port of the engine gives you, and where it deliberately differs.\n\nWe run the ported engine at [the interactive map generator](https://mermaidonline.org/ai-architecture-diagram-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.\n\nThe 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.\n\nThe 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.\n\nThe 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:\n\n| Input | Original Archify | Browser port | \n|---|---|---|\n| Plain-English description | ✅ (in agent chat) | ✅ | \n| Mermaid flowchart | ❌ (out of scope by design) | ✅ paste it | \n| docker-compose / Terraform / K8s manifests | ❌ | ✅ paste it | \n| SQL schema | ❌ | ✅ paste it | \n\nThis is the path most mermaidonline readers will care about. Take a flowchart you already maintain:\n\n``` php\nflowchart TD\n    A[Client] --> B[API Gateway]\n    B --> C[Webhook Service]\n    C --> D{Delivery ok?}\n    D -- yes --> E[(Event Store)]\n    D -- no --> F[Retry Queue]\n    F --> C\n```\n\nPaste it into [the interactive map generator](https://mermaidonline.org/ai-architecture-diagram-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:\n\nThe 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](https://mermaidonline.org/blog/ai-mermaid-diagrams), or generate fresh code with [the AI Mermaid generator](https://mermaidonline.org/ai-mermaid-generator). Photos of whiteboards work too — [turn a whiteboard photo into Mermaid](https://mermaidonline.org/image-to-mermaid) first, then paste the result. And if a static Mermaid architecture diagram is all you need, the [Mermaid architecture diagram guide](https://mermaidonline.org/mermaid-architecture-diagram) covers that path.\n\nThe 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.\n\nForeign 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.\n\nThe interactions are the reason to bother with an engine like this at all. Four of them carry most of the value:\n\n`/`) 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.\nTwo 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](https://mermaidonline.org/mermaid-to-png) instead; and if you are weighing interactive HTML against plain Mermaid blocks, [how Mermaid renders in GitHub README files](https://mermaidonline.org/mermaid-in-github) covers the trade-offs.\n\nThat 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.\n\nIf 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:\n\n|  | Original Archify (agent skill/CLI) | Browser port (mermaidonline.org) | \n|---|---|---|\n| Price | Free (MIT) | 10 free maps, then paid credits | \n| Install | Agent + skill/CLI | None — a browser tab | \n| Diagram types | 5 (incl. workflow, lifecycle) | 3 (architecture, dataflow, sequence) | \n| Inputs | Whatever your agent can read (repos, chats) | Description or pasted Mermaid / compose / Terraform / K8s / SQL | \n| Output | Self-contained interactive HTML | Same engine, same self-contained HTML | \n| Reproducibility | Spec + deterministic compile | Spec + deterministic compile | \n\nIf 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).\n\nThe 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](https://mermaidonline.org/large-mermaid-diagrams) applies regardless of the render.\n\nThe 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.\n\nNo. 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.\n\nThe 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.\n\nThe 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.\n\nEverything above runs at [mermaidonline.org](https://mermaidonline.org/) — the [interactive map generator](https://mermaidonline.org/ai-architecture-diagram-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.", "url": "https://wpnews.pro/news/archify-online-interactive-diagrams-in-your-browser-no-agent-needed", "canonical_source": "https://dev.to/river_jiang_670cccce7d97d/archify-online-interactive-diagrams-in-your-browser-no-agent-needed-44nd", "published_at": "2026-09-21 10:10:00+00:00", "updated_at": "2026-09-21 10:31:21.759981+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "ai-agents", "structured-data"], "entities": ["Archify", "tt-a1i/archify", "GitHub", "Claude Code", "Codex", "Cursor", "mermaidonline.org", "Mermaid"], "alternates": {"html": "https://wpnews.pro/news/archify-online-interactive-diagrams-in-your-browser-no-agent-needed", "markdown": "https://wpnews.pro/news/archify-online-interactive-diagrams-in-your-browser-no-agent-needed.md", "text": "https://wpnews.pro/news/archify-online-interactive-diagrams-in-your-browser-no-agent-needed.txt", "jsonld": "https://wpnews.pro/news/archify-online-interactive-diagrams-in-your-browser-no-agent-needed.jsonld"}}