Openflowkit Mcp

[OpenFlowKit logo]

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

[CI status] [MIT license] [MCP server version on npm] [CLI version on npm]

[OpenFlowKit: #4 Product of the Week in Design Tools on Product Hunt]

[An agent draws an architecture diagram on the OpenFlowKit canvas, live; the user drags a box, edits one line of text and regenerates]

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.

[The code panel beside the canvas: the same diagram as text and as shapes]

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/<owner>/<repo> (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).

[The map of GoogleCloudPlatform/microservices-demo: a click on checkoutservice opens it in place, showing the files inside, while the side panel lists what it talks to]

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}

[The diagram above building step by step, exported as an animated SVG]

_{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.

The language is versioned and written down in one file: 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.gitcd openflowkitnpm 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:

[Add OpenFlowKit to Cursor] [Install OpenFlowKit in VS Code]

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.

# Claude Codeclaude plugin marketplace add openflowkit/openflowkitclaude plugin install openflowkit@openflowkit
# Codex: add the marketplace, then install OpenFlowKit from the Plugins Directorycodex plugin marketplace add openflowkit/openflowkit

Working with agents

The MCP server gives your agent the operations you have, on the live canvas or on files.

Things to ask for:

• "Draw the architecture of this repository."
• "Make the boxes I selected red and add a cache in front of the API."
• "Turn the Mermaid in our README into a diagram I can edit."
• "Compare architecture.ofk with the code and tell me what drifted."

Your canvas edits are safe: if you moved, restyled or renamed something and the agent regenerates from text, get_diagram hands it the text that keeps each edit, and update_diagram reports anything it had to drop. Every agent change is one undo step, and the Connect panel shows the last one with an Undo button.

Bring your own key instead: ⌘J opens the assistant. Pick Claude, OpenAI, Gemini, Groq, Mistral, Cerebras, NVIDIA, OpenRouter, Ollama or any OpenAI-compatible endpoint (LM Studio…) and paste a key. The key stays in this browser, and the reply arrives as a proposal you apply or dismiss.

Bring the diagrams you already have

Paste into the code panel and it converts, with an honest list of anything it couldn't carry. Mermaid pasted straight onto the canvas draws in place.

Going back out, Copy as Mermaid writes a flowchart or sequence diagram as Mermaid text for a README or wiki. Mermaid · coming from Structurizr

In your repo and CI

The openflowkit CLI runs the same engine as the app, from any terminal or CI job:

npx openflowkit render diagram.ofk -o diagram.svg   # Mermaid, D2, Structurizr or DSL → SVGnpx openflowkit validate diagram.ofk --strict       # exit 1 on an errornpx openflowkit convert flow.mmd -o flow.openflow.jsonnpx openflowkit discover . --out architecture.ofk   # draft a C4 model of this reponpx openflowkit drift .                             # exit 1 when the code moved on

[Running npx openflowkit: a welcome box, OPEN FLOWKIT in orange block letters, and three commands to try]

Commit architecture.ofk next to the code and drift keeps it honest in CI. The PR diagrams Action comments on a pull request with how its diagrams changed: node and connector counts, the text diff, and drift for .ofk models. CLI · GitHub Action

Exports and sharing

Keyboard

Every action has a key, and ? lists them all in the app.

How it works

[You, your agent and imported Mermaid, Structurizr or D2 all become OpenFlow DSL; the compiler turns it into one undo step on the scene document, which feeds the canvas, the exports and browser storage]

_{This diagram is OpenFlowKit text too: how-it-works.ofk, exported as an animated SVG with the pulse preset.}

You and your agent can also draw straight on the canvas; every edit, from text or by hand, is a command on the same document.

Any frame on the canvas writes back out as canonical text, and format(format(x)) == format(x) holds in the tests. The language and document code is plain TypeScript with no React, Pixi or DOM, which is why the same compiler runs in the browser, the MCP server and the CLI. The full tour: ARCHITECTURE.md.

Self-host

docker build -t openflowkit . && docker run --rm -p 3045:3045 openflowkit   # http://localhost:3045

The image is the static build behind nginx, with the same headers as the hosted app. Content security policy, AI providers on your own network, and share links: self-hosting.

Privacy

Your diagrams stay in your browser. Something leaves it only when you choose: AI with your own key goes to that provider, a share link uploads an encrypted copy, a repo map reads from GitHub. No account needed. We collect basic usage stats to improve OpenFlowKit; turn them off in Settings. Back up everything at once with Download all diagrams on Home; Import restores it in any browser.

Contributing

Issues, ideas and PRs are welcome. Start with CONTRIBUTING.md for setup and the checks, and ARCHITECTURE.md for how the code fits together. Questions go to Discussions. What changed in each version: CHANGELOG.md.

Report security issues privately, as SECURITY.md describes. MIT licensed, see LICENSE.

[Contributors]

[OpenFlowKit logo]

If OpenFlowKit saved you a diagram, give it a ⭐ on GitHub.
_{It's how other people find it.}

Open the app  ·  Docs  ·  Contribute  ·  Discussions  ·  Report a bug