Overview

Start with what you know.

ArchDraw is an AI-assisted architecture canvas. Start from a description, a GitHub repository, or Mermaid; then edit the generated system as a diagram rather than a static image.

Describe

Turn a system idea into an editable starting point.

Inspect

Map the services and relationships in a repository.

Shape

Edit, rearrange, export, or share the live canvas.

Generate a diagram

From prompt to editable architecture.

Give the system context. Describe the clients, services, integrations, and data stores that matter.
Review the first draft. ArchDraw produces nodes, edges, and layout you can inspect on the canvas.
Refine the diagram. Change labels, nodes, connections, groups, and direction as the discussion evolves.

Web client → API gateway → order service → Postgres
Send completed orders to a notification worker.

Repository diagrams

Map the codebase you inherited.

Paste a GitHub repository URL. ArchDraw examines architecture-signalling files such as README files, manifests, routes, infrastructure definitions, and service boundaries to form an editable system map.

Tip: Treat the result as a reviewable first draft. Keep the parts that reflect your system and edit the rest on the canvas.

Canvas

Use a visual vocabulary that stays readable.

System nodes, shape nodes, groups, annotations, and labeled connections give architecture discussions a common language. Nodes are sized on a compact optical grid so labels wrap before diagrams become oversized.

System nodeA service or deployable component with an optional subtitle.

Shape nodeA semantic silhouette for clients, gateways, databases, auth, and external systems.

GroupA boundary that collects related components into a subsystem.

Layout

Keep the flow legible.

Use the layout control to arrange a diagram left-to-right or top-to-bottom. ArchDraw keeps the graph and its groups on the same Mermaid-to-Dagre layout path, so generated diagrams and manual reflows use consistent spacing.

Mermaid

Keep diagrams portable.

Import Mermaid when you already have a text representation, or export the canvas when the diagram needs to travel with code, documentation, or a pull request.

graph LR
  Client[Web client] --> Gateway{{API gateway}}
  Gateway --> Service[Order service]
  Service --> Database[(Postgres)]

MCP server

Bring ArchDraw into your AI workflow.

The ArchDraw MCP server gives diagram tools to AI agents. The agent can make, change, validate, lay out, and export diagrams. Connect to the hosted server at https://archdraw.hiabhee.online/api/mcp, or run the server locally with npx.

For the steps for Claude Code, the Claude apps, Codex, Cursor, VS Code, Gemini CLI, OpenCode, and other clients, read Connect a coding agent.

Share & export

Take the architecture with you.

Export a canvas as JSON, Mermaid, PNG, or SVG where available. Share links and embeds give teammates a view without turning the diagram into a stale screenshot.

FAQ

Common questions.

Can I edit what ArchDraw generates?

Yes. Generated diagrams open as editable canvases, so you can move, rename, connect, group, and remove components.

Can I start from an existing diagram?

Yes. Mermaid is supported as an import and export format, alongside the canvas's JSON representation.

What should I do if a generated layout needs work?

Adjust the canvas directly or use the layout controls to reflow the graph in your preferred direction.