OpenFlowKit MCP
A diagram canvas that Claude Code and Codex draw on over MCP: Mermaid, D2 and Structurizr in, a repository map, SVG and PDF out
- 971 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Runs through `npx` and edits `.openflow.json` and `.ofk` files in the repository, and the plugin adds a skill to the agent
- The GitHub repository map reads data from GitHub, and a private repository needs a read-only token entered on the page
- The in-app assistant sends requests to the chosen provider with your key from the browser
Install
- Works in
Manual install
claude mcp add -s user openflowkit -- npx -y openflowkit mcpRequires Node 20.11 or newer. After restarting the agent, click Connect agent in the app.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs through `npx` and edits `.openflow.json` and `.ofk` files in the repository, and the plugin adds a skill to the agent
- The GitHub repository map reads data from GitHub, and a private repository needs a read-only token entered on the page
- The in-app assistant sends requests to the chosen provider with your key from the browser
This is third-party code. Review the repository files before installing.
What it does
OpenFlowKit is a web diagram canvas, an MCP server and an `openflowkit` command line on one engine. The server installs with `npx -y openflowkit mcp`. When the canvas is open in the browser at app.openflowkit.com and the agent is paired with it through the Connect agent button, the agent draws right on it: it creates and updates diagrams, moves and recolors shapes, takes a screenshot to check the result and hands back SVG, PNG, PDF, JSON or an animated SVG. Each agent change undoes in one step, like a user edit. With no app open, the same operations edit `.openflow.json` files in the repository. The server has 29 tools: 16 editor operations such as `create_diagram`, `update_diagram`, `get_diagram`, `style`, `screenshot`, `export` and 13 for files and repositories, including `discover_architecture`, `drift_report` and `explain_element`. A diagram is stored as text in the project's own language, which you can edit in the code panel. Mermaid, D2 and Structurizr paste in and convert, and a list of anything that could not be carried over is shown. The `npx openflowkit render`, `validate`, `convert`, `discover` and `drift` commands render SVG, check files, draft a C4 model of the repository and report where the code has moved away from the drawn architecture. For pull requests there is a GitHub Action that comments on diagram changes.
Who it is for. For developers and architects who ask Claude Code, Cursor or Codex to draw a system diagram and then edit it by hand, and for teams that keep architecture in the repository next to the code.
Good fit when
- You need an architecture diagram of a repository that the agent draws and you finish by hand
- Your docs hold Mermaid, D2 or Structurizr diagrams that you want in an editable form
- You want to keep the architecture model in an `architecture.ofk` file and catch drift from the code with `drift` in CI
- You need to export a diagram to SVG, PDF or PNG right from a conversation with the agent
- A pull request needs a comment on how its diagrams changed
Not a fit when
- You need real-time collaborative editing: diagrams are shared as a snapshot or a copy, with no simultaneous work
- You only need Mermaid text to paste into an article: `mcp-mermaid` is enough, it checks syntax and exports an image
- You need the canvas on a device without a current desktop browser with WebGL
Example request
Draw the architecture of this repository in OpenFlowKit, then make the boxes I selected red and add a cache in front of the APIMCP
- Transport
- stdio, http
- Authentication
- not required
Limitations
- The server and the command line need Node 20.11 or newer, and running the canvas from source needs Node 22.22. The canvas works in a current desktop browser with WebGL, and automated tests run in Chromium.
- The agent can draw on the open canvas only while the app is open and paired with the Connect agent button. The custom connector route in the claude.ai and ChatGPT chat apps shows the diagram as a card in the chat, not on the canvas.
- The browser route for agents through WebMCP is called experimental by the author.
- A GitHub repository map needs access to the repository; for a private one you enter a read-only token on the page. The in-app assistant uses your own key and sends requests to the provider you choose.
- The author collects basic usage statistics, which can be turned off in Settings, and a Pro plan for teams is only being prepared.
How to disable. In Claude Code run `claude mcp remove openflowkit` or remove the plugin with `claude plugin uninstall openflowkit@openflowkit`. In other clients remove the `openflowkit` block from the MCP config. Diagrams live in the browser and in `.openflow.json` files, and the Home screen lets you download all of them at once.
FAQ
How does AI draw a diagram in OpenFlowKit?
The agent calls `create_diagram` with text in the diagram language or Mermaid, `get_diagram` returns the text so that your manual edits survive, and `update_diagram` reports anything it had to drop. The agent checks the result with the `screenshot` tool.
Can I connect OpenFlowKit without installing anything on my computer?
In the claude.ai, Claude Desktop and ChatGPT chat apps add a custom connector `https://mcp.openflowkit.com/mcp` and choose the no sign-in option. The diagram comes back as a card in the chat with an Open in OpenFlowKit button.
How do I get a map of a GitHub repository?
Type `owner/repo` into an empty canvas and press Map repo, or open `app.openflowkit.com/#/map/github/<owner>/<repo>`. Every arrow lists the file and line it came from. A local checkout is mapped with `npx openflowkit map . --html map.html`.
How do I catch drift between architecture and code?
Put `architecture.ofk` next to the code and run `npx openflowkit drift .` in CI: the command exits with 1 when the code has moved away from the model. `npx openflowkit discover . --out architecture.ofk` drafts the model.
Which formats does OpenFlowKit take and give?
In: Mermaid (flowchart, sequenceDiagram, stateDiagram, erDiagram, classDiagram, mindmap and more), Structurizr DSL and D2. Out: PNG at 1x and 2x, SVG, PDF, JSON and animated SVG, and Copy as Mermaid gives text for a README.
Do my diagrams stay in the browser?
Yes, diagrams are kept in the browser. Something leaves only when you choose: the assistant with your key sends a request to the provider you picked, a share link uploads an encrypted copy, a repository map reads data from GitHub.
Discussion
No questions or reviews yet.
Related
MCP serversThe official draw.io MCP server: an agent builds diagrams from XML or Mermaid and opens them in the draw.io editor
A skill that draws validated architecture, workflow, sequence and data-flow diagrams as one interactive HTML file
Smart Drawio
Smart Drawio Next
An MCP server and skill for editable draw.io diagrams: an agent generates XML from a prompt, validates references, repairs tags and applies themes
MCP server for Mermaid diagrams: renders a diagram in the browser with live reload and saves it as SVG, PNG or PDF
Next AI Draw.io is an MCP server and plugin where the agent draws draw.io diagrams on a live browser canvas that you can edit by hand
A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| OpenFlowKit (this card) | no | not required | 971 | |
| MCP Mermaid | no | not required | 649 | only generates Mermaid diagrams and charts with syntax checking and export, with no canvas for manual edits |
| Excalidraw MCP | yes | not required | 5,667 | draws hand-drawn Excalidraw diagrams right in the chat |
| Draw.io MCP Server | yes | not required | 5,824 | the official draw.io server: diagrams from XML or Mermaid open in the draw.io editor |
README in short
The repository holds the canvas app, the MCP server and command line package in `mcp-server/`, plugins for Claude Code and Codex with the `skills/openflowkit/SKILL.md` skill, a GitHub Action in `action/`, a Dockerfile for self-hosting and architecture documentation. The main project page gives a table of ways to connect an agent, a list of tools, a table of import and export formats and a privacy section.