OSS · MCP-nativeCoding agents can now read & write your diagram

Diagrams your team and AI agents co-edit

Every diagram is a plain-text .diagram file in your Git repo — so developers and their coding agents change the same live canvas at once, and every edit round-trips through a pull request.

Free & open source·No credit card·Signs in with your GitHub account

Like Mermaid, but humans and AI agents co-edit the same canvas — live.

The diagramming.dev editor: a .diagram text file on the left showing an "Order Service Architecture" with frontend, API gateway, order and inventory services, a Postgres cylinder and a Redis cache; on the right, the same nodes rendered on the live canvas. A cyan human cursor and a violet AI-agent cursor are both present; the agent has just added a "redis" cache node and its edge, highlighted in violet in both panes.

acme/platform/docs/architecture.diagram·main

RraeAIclaude-agent

architecture.diagramsynced

1diagram {2  type: architecture3  title: "Order Service Architecture"4  direction: LR5}6 7frontend -> api-gateway8api-gateway -> order-service9api-gateway -> inventory-service10order-service -> postgres { label: "reads/writes" }11 12# added by claude-agent13redis { shape: cylinder }14order-service --> redis { label: "cache" }

Frontend

rounded

API Gateway

rounded · HTTPS

Order Service

rectangle

Inventory

rectangle

PostgreSQL

cylinder

Redis

cylinder · cache

rae

claude-agent

Text file is the source of truthAgents edit through MCP toolsEvery change is a real PR

How it works

One canvas. A text file underneath. Git around it.

An unfamiliar workflow made concrete in three steps — from opening a repo to shipping the change back as code.

Open it from GitHub

Point diagramming.dev at any repo. It reads the .diagram files already committed there and renders them on a live canvas — no import, no export, no copy-paste.

src: docs/architecture.diagram

Co-edit with your agent

You drag nodes; your coding agent edits the same file through MCP tools. Both cursors move on one canvas in real time — you see exactly what it changed, as it changes.

via: MCP · read + write diagram

Commit back as .diagram

Save writes a minimal, human-readable text diff — a moved node is one changed line. It commits to a branch and opens a pull request, so diagrams review like any other code.

out: git commit → pull request

Repo → diagram

Point us at a repo. We draw the architecture.

Paste a GitHub URL and diagramming.dev reads your codebase, infers the module graph, and drops an editable .diagram file right into your repo — ready for you and your AI agents to co-edit from the first commit.

Or explore a well-known repo

facebook/react

Renderer, reconciler, hooks internals — see it as a graph.

vercel/next.js

App Router, edge runtime, middleware — the full pipeline.

nestjs/nest

DI container, module graph, HTTP adapters laid bare.

prisma/prisma

Query engine, schema, client — data layer end to end.

Why it's different

Built for a repo, and for the agents working in it.

Not another drag-and-drop tool bolted onto an image export. Everything is text, everything is versioned, everything is scriptable.

MCP tools for agents

Your coding agent gets first-class read/write access to the diagram — it can add a node, wire an edge, or rename a service without ever leaving its session.

# the agent calls a tool, not a screenshot
diagram.add_node("redis", shape="cylinder")
diagram.connect("order-service", "redis")

Mermaid & Graphviz DOT — both ways

Import the diagrams you already have and export back out. Round-trip Mermaid and Graphviz DOT in and out, so nothing is trapped in a proprietary format.

# bring what you already wrote
import  design.mmd   → design.diagram
export  design.diagram → design.dot

Living diagrams that reconcile with code

Link a diagram to the modules it describes. When the code drifts from the picture, diagramming.dev flags it and opens a pull request with the fix — so the architecture diagram stops lying the day after it's drawn. (Reconciliation runs for signed-in project members, not anonymous visitors.)

# drift detected in packages/api
reconcile: "payment-service" added in code
        ↳ not in architecture.diagram
→ opened PR #418 · +1 node

Start from a template

Don't start from a blank canvas. Open a starter — microservice architecture, request flow, ER sketch — and edit from something real.

# new diagram, not a blank page
templates/ microservices
           request-flow
           er-model

GitHub-native, text-first

No lock-in and nothing binary. The file is text, it lives in your repo, and it reviews in a normal pull request — diffs a human can read.

# a moved node = one changed line
- order-service
+ order-service { at (400, 300) }

The artifact

An agent's edit is a real pull request.

Because the diagram is text, an agent's change lands as a normal, reviewable diff — here, the reconcile job that noticed the code grew a cache and updated the picture to match.

Open PRReconcile architecture.diagram with codeacme/platform · #418 opened by claude-agent[bot]Shown as it reviews for project members

@@ docs/architecture.diagram · +3 −0 @@

order-service -> postgres { label: "reads/writes" }

+# added by reconcile · matches packages/cache

+redis { shape: cylinder at (900, 380) }

+order-service --> redis { label: "cache" }

commit a1f9c2d · claude-agent[bot] · reconcile: add redis cache nodecanvas ⇄ file ⇄ code, always in sync

Open source · Free forever

Give your agents a canvas your team can read.

Sign in with GitHub and open your first diagram. It's free, it's open source, and the file is yours — in your repo, in plain text.

MIT-licensed & self-hostableNo credit card, everYour files stay in your repo