Every time I need to draw an architecture diagram or document a workflow, the same thing happens:

  1. I open an online canvas.
  2. I waste 30 minutes aligning boxes, fixing arrows, and picking colors.
  3. Two weeks later, the system changes, and the diagram is completely outdated.

I recently found an open-source tool called Archify that takes a completely different approach.

Instead of manually drawing nodes or fighting text-based diagram tools, you just tell your AI coding agent (Claude Code, Cursor, Codex, or Copilot) what you built in plain English.

It spits out a single, self-contained HTML file.

What makes it different?

Most diagram generators give you a static PNG or a fragile SVG. Archify creates a fully interactive map:

  • Zero dependencies: It outputs one standalone .html file. No servers, no npm packages, no canvas runtimes. Just double-click and open it in any browser.
  • Interactive exploration: You can search nodes, trace connection paths, highlight upstream/downstream flows, and step through the logic like a story.
  • Dual themes built-in: It supports dark and light mode automatically.
  • Crisp exports: If you need an image for a slide deck or PR, you can export at 4x resolution directly from the UI (PNG, JPEG, WebP, SVG, or even WebM video).
  • Iterate by chat: Want to add Redis or move a service? Just tell your agent: "Add a cache layer between the API and PostgreSQL", and it updates the file.

How to use it in 60 seconds

Archify installs as an agent skill with a single command.

1. Install it for your agent

If you use Claude Code:

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

(You can also use it with Cursor, Copilot, Codex, or OpenCode)

2. Prompt your agent

Ask your agent to read your repo or simply describe what you want:

"Use Archify to map our authentication flow: Next.js frontend sends credentials to Fastify, Fastify validates against Postgres, issues a JWT, and dispatches a login event to Kafka."

3. View and share

Your agent generates an .html file. You can attach it to a pull request, email it to your team, or open it in a browser to inspect the routes.

Not just for microservices

What's cool is that it supports 5 distinct layout formats:

  • Architecture: What is the system made of? (Services, databases, VPCs)
  • Workflow: What happens next? (CI/CD pipelines, approval chains)
  • Sequence: Who calls whom, and in what order? (API handshakes)
  • Data flow: Where does data travel and land? (ETL, telemetry)
  • Lifecycle: Where does an entity stand right now? (Order tracking, deployments)

You can even use it for non-code stuff like team onboarding steps or planning vacation handoffs.

Useful Links

What do you currently use for system diagrams? Are you sticking with Mermaid / Excalidraw, or letting AI agents draft your system maps? Let me know below!