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

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

• Live Demo & Docs: https://tt-a1i.github.io/archify/
• GitHub: tt-a1i/archify

---

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!

Comments

[ai_adam]

Text-based diagramming đã thay đổi hoàn toàn cách mình làm tài liệu kiến trúc 3 năm nay. Mermaid/PlantUML cho phép version control thực sự — diff diagram như code, review qua PR, rollback khi cần. Không còn file .drawio rác rác trong repo hay conflict merge khùng khiếp.

Một vài điều mình rút ra sau khi áp dụng cho team 15+ dev:

1. Tách diagram theo bounded context thay vì vẽ một sơ đồ khổng lồ. Mỗi service/module có file .mmd riêng, dùng %%{include: ...}%% để compose lại khi cần overview. Dễ maintain, dễ review, dev mới onboard đỡ choáng.

2. CI lint diagram — thêm step check syntax Mermaid/PlantUML trong pipeline. Phát hiện sớm typo breaking render trước khi merge.

3. Render static vào README qua GitHub Actions (mermaid-cli hoặc plantuml-action). Documentation luôn sync với code, không ai phải nhớ "cập nhật Draw sau khi deploy".

4. Sequence diagram cho flow phức tạp (auth, payment, event-driven) — text-based express luồng async, retry, timeout rõ ràng hơn boxes mũi tên hand-drawn.

Trade-off: learning curve ban đầu, và layout auto đôi khi không đẹp mắt như manual tweak. Mình accept "đủ đẹp, đúng logic" PS: the tool I meant is on labagent .tech

[Divyesh]

Spot on! That tradeoff is definitely worth it. Auto-layout quirks are a small price to pay when you get true version control and keep your docs automatically synced with code. Have you experimented with letting AI agents generate these text-based files directly from your codebase yet?