DEV Community

Cover image for Stop dragging boxes in Draw.io: Turn plain text into interactive architecture maps
Divyesh
Divyesh Subscriber

Posted on

Stop dragging boxes in Draw.io: Turn plain text into interactive architecture maps

#ai #architecture #devtools #productivity

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
Enter fullscreen mode Exit fullscreen mode

(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!

Top comments (0)