Openflowkit MCP
Architecture diagrams for your agent: draw on the live OpenFlowKit canvas or edit diagram files.
Install Openflowkit MCP
Pick your client, then add it in one click or paste the config.
No confirmed install command yet
We only publish a config when the install details come from the project itself — its README, its docs, or a verified owner. We haven’t found those for openflowkit-mcp, and we’d rather show nothing than a guess you’d paste into your client.
Open setup steps on GitHubOverview
From the project README
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/<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).
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 (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:
Security & health
What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.
ActiveLast checked 2d ago
Recent health check succeeded.
Reviews
No reviews yet — be the first to share how it worked for you.
Frequently Asked Questions about Openflowkit MCP
openflowkit-mcp is an MCP server that lets AI agents create and edit architecture diagrams in OpenFlowKit. It can work with the live OpenFlowKit canvas or diagram files, enabling agents to draw, restyle, and inspect diagrams while users watch changes happen. OpenFlowKit is free, open source, and local-first.
It can draw, edit, restyle, and inspect architecture diagrams through the OpenFlowKit canvas. An agent can make changes as individual undoable steps and take a screenshot to check its work.
Claude Code, Cursor, and other MCP clients can connect to openflowkit-mcp. The README describes using a connected agent to read the page, draw diagrams, restyle them, and verify the result.
OpenFlowKit supports its own text diagram syntax and can convert pasted Mermaid, Structurizr, or D2 diagrams. Its text and canvas represent the same diagram, and regenerating from the code panel updates the canvas as one undo step.
Yes, OpenFlowKit can read a GitHub repository and draw a map of its parts. You provide an owner/repo value in the app and choose Map repo, or use the documented GitHub map URL pattern.
Related MCP servers
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.
AllMCPs Directory Badge
Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.
Badge Style:
Live Dynamic SVG Preview
Markdown (GitHub README)
[](https://allmcps.com/mcp/openflowkit-mcp-2)HTML Embed
<a href="https://allmcps.com/mcp/openflowkit-mcp-2"><img src="https://allmcps.com/api/badge/openflowkit-mcp-2?style=directory" alt="Openflowkit MCP on AllMCPs" /></a>