openflowkit

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.

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:

Your agent runs…	How to connect	What it can do
On your computer: Claude Code, Cursor, VS Code, Claude Desktop, Windsurf	The MCP server, below	Everything: draws on your open canvas (one undo step per change), edits .openflow.json files in your repo, maps a codebase, takes screenshots
In a chat app: claude.ai, Claude Desktop, ChatGPT	Add a custom connector: https://mcp.openflowkit.com/mcp, choose No sign-in	Draws a diagram in the chat as a card, with Open in OpenFlowKit. Not on your open canvas
In your browser (experimental)	Nothing to install: open a diagram in a browser whose agent supports WebMCP	Reads and edits the diagram you have open

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 Code
claude plugin marketplace add openflowkit/openflowkit
claude plugin install openflowkit@openflowkit

# Codex: add the marketplace, then install OpenFlowKit from the Plugins Directory
codex plugin marketplace add openflowkit/openflowkit

The skill (skills/openflowkit/SKILL.md) tells an agent when a diagram helps, how to write it, and to save it beside the code. Agents that read the web get the same text at https://app.openflowkit.com/llms.txt.

Working with agents

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

It can	With
Draw a diagram from text or Mermaid, then change it	create_diagram, update_diagram, add_shape
Read every page, the text behind a diagram, and what you selected	get_document, get_diagram, list_pages
Restyle and move what is already there	style, move, delete
See its own result	screenshot returns a real image the model can look at
Hand you files	export: SVG, PNG, PDF, JSON or an animated SVG
Read your repo	discover_architecture, drift_report, explain_element

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.

Sixteen editor operations, which also work on files: create_diagram, update_diagram, get_diagram, list_diagrams, get_syntax, search_icons, find_icons_for, move, style, delete, add_shape, export, screenshot, fit_view, get_document, list_pages.

Thirteen for files and repositories: openflow_create, openflow_open, openflow_save, whoami, server_info, validate_openflow_dsl, list_diagram_node_types, list_starter_templates, get_starter_template, analyze_codebase, discover_architecture, drift_report, explain_element.

Arguments and examples: MCP server docs. The op manifest is src/agent/manifest.ts. Requires Node 20.11+.

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.

From	What converts
Mermaid	flowchart / graph, sequenceDiagram, stateDiagram, erDiagram, classDiagram, mindmap, architecture, gitGraph
Structurizr DSL	the model, views and styles, as a C4 workspace with one page per view
D2	shapes, connections and containers

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 → SVG
npx openflowkit validate diagram.ofk --strict       # exit 1 on an error
npx openflowkit convert flow.mmd -o flow.openflow.json
npx openflowkit discover . --out architecture.ofk   # draft a C4 model of this repo
npx openflowkit drift .                             # exit 1 when the code moved on

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

Format	Notes
PNG	1× or 2×; light, dark or print theme; transparent background optional
SVG, PDF	vector, with icons and the Inter font embedded
JSON	the whole document, every page; opens in any browser
Animated SVG, GIF, MP4, WebM	made in your browser from the animate block or the connector order
Copy as Mermaid	flowchart and sequence
Share links	a view-only link, encrypted in your browser; or an editable copy, the code inside the link, nothing uploaded

Keyboard

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

Key	Action
V R O T A	select, rectangle, ellipse, text, connector
⌥C · ⌘↵	code panel · generate from text
⌘J	AI assistant
M	switch Canvas and Map
⌘F	find on the canvas
⇧1 · ⇧2	fit everything · zoom to selection
⌘G · ⌘D	group · duplicate
Enter	edit the selected shape's label

On Windows and Linux, Ctrl and Alt replace ⌘ and ⌥.

How it works

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.

Path	What
src/dsl/	the language: grammar, parser, diagram families, compile and serialize, repo discovery
src/opencanvas/	the editor: document model and commands, Pixi renderer, exporters, React UI
src/agent/	the operations agents call, the bridge protocol, the op manifest
mcp-server/	the published MCP server and openflowkit CLI
cli/	openflowkit on npm: the short name for the CLI
plugin/, skills/	the Claude Code and Codex plugins, and the agent skill
action/	the PR diagrams GitHub Action
worker/	the share-link Worker (stores ciphertext only)
stats/	the private usage dashboard Worker
docs-site/	the docs site

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.

Is it free? Yes: MIT licensed, free to use and to self-host. A Pro plan for teams is planned; the waitlist is in the app.

Does it work offline? Once the page is open, drawing, the code panel and exports run in the page. AI, share links and repo maps need the network. For no internet at all, self-host it.

Which browsers? A current desktop browser with WebGL. The automated tests run in Chromium.

Can my team edit together? Not in real time. A view-only link is a snapshot, an editable link hands each person their own copy, and .openflow.json and .ofk files live happily in git.

More: FAQ.

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.

---