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.

This is the beginning of the README. Read the rest at the original. Read the full README ↗