ArchFlow

• 

  Diagram Canvas

• 

  Export as Mermaid

• 

  WebMCP Invocation Logs

• 

  Available Architecture Nodes

• 

  Available Process Nodes

• 

  Node Inspector

Inspiration

Architecture diagrams live in slides and whiteboards, but AI agents usually scrape the DOM or dump Mermaid in chat. When I saw the WebMCP Challenge, I wanted a canvas where agents work on structured graph semantics, not pixels, on the same page as the engineer.

What it does

ArchFlow is a browser-native architecture diagram editor powered by WebMCP. Describe a system in plain language; a browser agent builds it on the canvas through structured tools. You approve every structural change, see tool calls in an activity log, and co-edit the same live graph — add nodes manually, let the agent adapt, auto-layout, annotate, validate, export Mermaid.

Live demo: https://archflow-two-xi.vercel.app

How we built it

Fully frontend — React, TypeScript, Vite, React Flow, Zustand, Ajv, Dagre. No backend, no LLM API keys.

The graph is the source of truth. 13 WebMCP tools on document.modelContext expose read, mutate, layout, validate, annotate, and diff operations. Mutations go through an operation engine and a human approval modal before applying. Deployed on Vercel.

Challenges we ran into

• WebMCP is experimental — API surface and registration timing vary by browser
• Agents need structured operations, not DOM scraping
• Balancing safety (approval modals) with speed (batch ops, auto-approve mode)
• Atomic multi-step changes with temp IDs and single-step undo

Accomplishments that we're proud of

• Agent builds a full architecture from a blank canvas via natural language
• 13 real WebMCP tools with JSON Schema validation
• Human-in-the-loop approval with zero mutation on reject
• Fully frontend, open source (MIT), live on Vercel

What we learned

ArchFlow doesn't embed an LLM — the browser agent is the AI, and the website is the tool server. That kept the app fully frontend with no API keys, while still enabling real collaboration.

WebMCP replaces fragile DOM scraping with structured tool calls — agents discover capabilities, invoke them with typed inputs, and get deterministic results back.

Tool design matters as much as the UI: schemas, descriptions, batch semantics, and approval flows all shape how well agents actually work. Human-in-the-loop isn't a limitation — engineers want to inspect and approve changes, not have agents silently rewrite their diagrams.

What's next for ArchFlow

Near term: C4 and BPMN views, Mermaid/Terraform import, richer validation (PII flows, single points of failure, latency budgets).

Medium term: Diagram diffs between versions, templates for common patterns (event-driven, serverless, multi-tenant SaaS), and linking nodes to real resources like repos or cloud services.

Long term: Multiplayer editing with WebMCP as the agent interface, team workspaces with review workflows, and exports into design docs and ADRs.

The goal stays the same: humans sketch visually, agents refactor structurally, both on one live graph.

Built With

• ai-agents
• ajv
• architecture-diagramming
• canvas
• css
• dagre
• frontend
• html5
• human-in-the-loop
• json-schema
• localstorage
• lucide-react
• mermaid
• model-context-protocol
• open-source
• react
• react-flow
• tailwind-css
• typescript
• vercel
• vite
• vitest
• webmcp
• zustand