Openflowkit MCP

OpenFlowKit

Architecture diagrams you draw, write as code, or hand to your agent.

Free, open source and local-first. Paste a GitHub repo and get its map, every arrow cited to a line of code.

Open the app · Docs · MCP setup · Discussions · Issues

Why OpenFlowKit

1. Your agent draws on your canvas, live

Connect Claude Code, Cursor or any MCP client and ask for a diagram. The agent reads the page, draws, restyles and takes a screenshot to check its own work while you watch. Every change it makes is one undo step, like your own. Connect your agent ↓

2. Text and canvas are the same diagram

flowchart right

Client [blue] -> "API Gateway" [emerald] : HTTPS "API Gateway" -> Queue [queue, amber] Queue -> Worker Worker -> Store [cylinder, red, bold]

Open the code panel ( ⌥C ), paste this into it and press ⌘↵ . Drag things around on the canvas or edit the text; ⌘↵ regenerates the frame from the text as one undo step. Paste Mermaid, Structurizr or D2 and it converts.

3. Paste a GitHub repo, get its map

Type owner/repo into the box on an empty canvas and press Map repo, or open app.openflowkit.com/#/map/github/ / (try a sample). Your browser reads the repo from GitHub and draws its parts. Boxes open in place, and every arrow lists the file:line behind it, linked to the code. No key and no install. For a private repo, add a read-only GitHub token on the page, or map a checkout: npx openflowkit map . --html map.html (private repos).

4. Export it, including the animation

PNG, SVG, PDF, JSON, or Copy as Mermaid for a README. Add an animate block to the text above to name the steps, and the export renders animated SVG, GIF, MP4 or WebM in your browser.

animate build 6s loop {

step Client step Client -> "API Gateway" : HTTPS step Queue, Worker step Store hold 2s }

That animation is the two snippets above, exported by the app as an animated SVG. GitHub plays it like an image.

Ten diagram types, one language

Every type is the same short, forgiving text, with per-line errors that say how to fix them. Each picture below is the first example on its docs page, rendered by the openflowkit CLI.

Architecture · cloud icons, groups, a C4 model with views

Sequence · alt / opt / loop, notes, activations

Flowchart · shapes, decisions, groups

ERD · columns, keys, crow's-foot cardinality

State · start and end, composite states

Class · members, stereotypes, relations

Mind map · indentation is the tree

Git graph · branches, merges, tags

Chart · data written as text, editable in a table

Wireframe · 35 controls on phone, tablet or desktop screens

The language is versioned and written down in one file: [src/dsl/grammar.md](src/dsl/grammar.md) (docs). The same text powers the code panel, the assistant, the MCP tools and the CLI.

Quick start

In the browser: app.openflowkit.com. Nothing to install, no account.

In a terminal: npx openflowkit (Node 20.11+).

Run it locally (Node 22.22+):

git clone https://github.com/openflowkit/openflowkit.git

cd openflowkit npm install && npm run dev # http://localhost:3000

Connect your agent

OpenFlowKit has one set of agent tools. Pick the row for where your agent runs:

For Claude Code, one line:

claude mcp add -s user openflowkit -- npx -y openflowkit mcp

For Codex: codex mcp add openflowkit -- npx -y openflowkit mcp.

For Claude Desktop, Windsurf and any other MCP client:

{

"mcpServers": { "openflowkit": { "command": "npx", "args": ["-y", "openflowkit", "mcp"] } } }

Restart the agent, then click Connect agent in the app, or open app.openflowkit.com/#/connect. That panel has the steps for each client and copies the same config with a pairing token. With no app open, the same tools edit .openflow.json files in your repo. Every client, step by step, with fixes: Connect your agent.

Plugi