openflowkit: Open Source Design & Prototyping

What is openflowkit?

OpenFlowKit is a free, MIT-licensed, local-first AI diagramming studio for builders — developers, architects, and platform teams — who create architecture diagrams and flowcharts from templates, code, structured imports, or AI, refine them on a visual canvas, and export them as animated MP4 walkthroughs.

What it is

OpenFlowKit is an open-source diagramming studio that lives in the TypeScript and React ecosystem. It combines a professional visual canvas with bidirectional diagram-as-code, AI generation, and hardware-encoded video export. Diagrams stay on the local machine: the project advertises zero server-side storage, and no account is required to use it. It ships a first-party Model Context Protocol (MCP) server so tools such as Claude Desktop, Cursor, and Windsurf can drive the editor directly.

The concrete problem it solves is the split between code-only and canvas-only tooling. Mermaid renders diagrams from text but has no visual canvas, no AI, and no interactive editor; freeform whiteboards such as Excalidraw and tldraw have no structured diagram types, no DSL, and no code imports; Draw.io carries decade-old UX with limited AI integration and no developer import pipelines. OpenFlowKit replaces that fragmented workflow with one workspace where a pasted Mermaid flowchart becomes an editable, icon-annotated canvas diagram, and where the same diagram can be edited as a Git-friendly DSL and re-synced both ways.

Key capabilities

Paste Mermaid across all eight diagram families — flowchart, architecture, state, class, ER, sequence, mindmap, and journey — and get a rendered canvas with icons auto-assigned.
Automatic icon assignment from more than 1,600 icons spanning developer, AWS, Azure, GCP, and CNCF catalogs; a semantic classifier detects technology names such as PostgreSQL, Redis, Express, and Lambda, then matches by exact name, alias, or substring.
AI generation from 10 providers, including a local Ollama preset pointing at localhost for fully offline diagramming, sent direct to canvas.
Bidirectional diagram-as-code with a Git-friendly DSL and live sync in both directions.
Cinematic MP4 export using WebCodecs H.264, rendered faster than real time.
Anchored auto-layout: nodes can be pinned so ELK auto-layout rearranges the rest of the graph around them.
Worker-based ELK layout that runs off the main thread so the UI stays responsive, plus self-correcting AI that reads its own malformed DSL output and repairs it.
Figma export as editable SVG.

Who uses it and how

Architecture and platform teams documenting AWS, Azure, GCP, or CNCF estates, using the bundled asset libraries instead of drawing provider icons by hand.
Developers in MCP-capable editors — Claude Desktop, Cursor, or Windsurf — asking the assistant to generate or revise a diagram, with OpenFlowKit as the rendering and editing surface.
Air-gapped or privacy-sensitive environments, where the Ollama localhost preset keeps AI generation entirely offline and no account is required.
Documentation and developer-relations teams converting existing Mermaid sources into polished, icon-annotated diagrams, then exporting Cinematic MP4 walkthroughs for release notes, talks, or onboarding material.
Teams that want diagrams versioned alongside source, leaning on the bidirectional DSL and Git-friendly storage rather than a hosted whiteboard.

Getting started

The README points to launching the app directly rather than to a package or container: use the "Launch the App" link at https://openflowkit.com/, with documentation, website, and issues linked from the project. MCP-driven use starts by connecting the first-party MCP server to Claude Desktop, Cursor, or Windsurf.

How it compares

Against Lucidchart and Miro, the README's complaint is cloud lock-in: those products are described as expensive, requiring an account, with diagram data stored on the vendor's servers, while OpenFlowKit is MIT-licensed, requires no account, and keeps zero server-side storage. The cost model differs accordingly — the project is free and self-directed, whereas the incumbents are paid cloud subscriptions. Against the free alternatives, the trade is scope: Excalidraw, tldraw, Draw.io, and Mermaid each cover part of the job, and OpenFlowKit claims to be the only MIT-licensed tool combining a visual canvas, bidirectional diagram-as-code, AI generation, auto-icon assignment, anchored auto-layout, MP4 export, and an MCP server.

When to use it — and when not to

OpenFlowKit suits teams that want structured, code-linked diagrams they own, and it leans local-first, so there is no diagram database or SMTP service to operate for the core product. The README excerpt is thin on self-hosting specifics: it names no npm package, Docker image, or compose file, so anyone deploying it on their own infrastructure must work from the linked documentation rather than the repository front page. It is a poor fit for people who want a purely freeform whiteboard, for those who need text-only Mermaid rendering with no canvas, and for teams unwilling to supply AI provider credentials or install Ollama — and with 18 open issues and a repository whose last push is dated 2026-08-19, the project should be evaluated on its current state before it is made critical to a workflow.

project readme (upstream, from github) — read inline

OpenFlowKit

The open-source diagramming studio for builders.

Create flows from templates, code, structured imports, or AI. Refine them visually, keep them local-first, and export as Cinematic MP4 walkthroughs — or drive everything from Claude / Cursor / Windsurf via our first-party MCP server.

→ Launch the App | Documentation | Website | Issues | Contribute

✨ Mermaid → Icons _{Paste Mermaid · 1,600+ icons auto-assigned · beautiful}	🤖 AI Generation _{10 providers inc. local Ollama Direct-to-canvas output}	`{}` Diagram as Code _{Bidirectional live sync Git-friendly DSL}	🧩 Asset Libraries _{Developer · AWS · Azure GCP · CNCF · Icons}	🎬 Cinematic MP4 _{WebCodecs H.264 Faster-than-realtime}
🧷 Anchored Layout _{Pin nodes — auto-layout rearranges around them}	🪄 MCP Server _{Drive from Claude Desktop, Cursor, Windsurf}	⚡ Worker Layout _{ELK runs off main thread UI stays responsive}	🦙 Local AI _{Ollama localhost preset fully offline diagramming}	♻️ Self-Correcting AI _{Bad DSL → AI sees its own output and repairs it}

See it in action

Why OpenFlowKit?

Every diagramming tool makes a compromise. OpenFlowKit doesn't.

Tool	What's missing
Excalidraw / tldraw	Freeform whiteboards — no structured diagram types, no DSL, no code imports
Mermaid.js	Code-only — no visual canvas, no AI, no interactive editor
Draw.io	Decade-old UX — Limited AI integration, no developer import pipelines
Lucidchart / Miro	Cloud lock-in — expensive, account required, your data lives on their servers
PlantUML	Server-dependent rendering — no visual editor, no local-first model

OpenFlowKit is the only MIT-licensed tool that combines a real workspace home, a professional visual canvas, bidirectional diagram-as-code, AI generation from 10 providers (including fully-local Ollama), automatic icon assignment from 1,600+ tech icons, anchored auto-layout, hardware-encoded cinematic MP4 export, and a Model Context Protocol server so Claude / Cursor / Windsurf can drive it directly — all with zero server-side storage.

Feature highlights

	OpenFlowKit	Excalidraw	Draw.io	Mermaid	Lucidchart
Visual canvas editor	✅	✅	✅	❌	✅
Bidirectional diagram-as-code	✅	❌	❌	✅	❌
AI generation (10 providers + Ollama)	✅	❌	❌	❌	Limited
Mermaid import (8 types)	✅	❌	⚠️	✅	❌
Auto-icon assignment (1,600+)	✅	❌	❌	❌	❌
AWS / Azure / GCP / CNCF icons	✅	❌	✅	Partial	✅
Anchored auto-layout (pin nodes)	✅	❌	❌	❌	❌
Cinematic MP4 export (WebCodecs)	✅	❌	❌	❌	❌
Figma export (editable SVG)	✅	❌	❌	❌	❌
No account required	✅	✅	✅	✅	❌
Open source (MIT)	✅	✅	✅	✅	❌

Paste Mermaid → Beautiful Diagrams

Paste any Mermaid flowchart, architecture, state diagram, class diagram, ER diagram, sequence diagram, mindmap, or journey — all 8 diagram families. OpenFlowKit renders it on a visual canvas and automatically assigns the correct branded icon to every technology node.

flowchart TD
  API[Express API] --> DB[(PostgreSQL)]
  DB --> Cache[Redis Cache]
  Cache --> Queue[RabbitMQ]

Paste this → you get the Express wordmark, PostgreSQL elephant, Redis logo, and RabbitMQ icon — all auto-detected, all beautifully laid out. No other tool does this.

1,600+ icons from developer, AWS, Azure, CNCF, and GCP catalogs are matched automatically based on node labels. No manual drag-and-drop. No configuration.

How it works

Paste Mermaid on the canvas or in the code panel
Semantic classifier detects technology names (PostgreSQL, Redis, Express, Lambda, etc.)
Icon matcher searches 1,600+ icons across all catalogs — exact match, then alias, then substring
Enricher assigns colors, icons, and provider SVGs to every node
ELK layout arranges everything cleanly

Mermaid quality gates

npm run test:mermaid runs the broad Mermaid parser/plugin/round-trip gate
npm run test:mermaid:layout runs the layout, import-state, and recovery corpus gate
npm run test:mermaid:gold runs both together

AI generation (API key required)

Describe your system in plain English. AI generates a diagram on the canvas with correct icons applied automatically.

Prompt	Output
"Node.js API with PostgreSQL and Redis"	3 nodes with correct icons
"AWS Lambda → SQS → DynamoDB"	3 nodes with AWS icons
"React frontend → Express → MongoDB → S3"	4 nodes across developer + AWS catalogs

10 providers supported: Google Gemini, OpenAI, Anthropic Claude, Groq, Mistral, NVIDIA NIM, Cerebras, OpenRouter, Ollama (fully local), or any custom OpenAI-compatible endpoint. Bad DSL from any provider is now auto-repaired — the model sees its own broken output and the parser error, then returns corrected DSL in a single follow-up turn.

Frequently asked questions

Is openflowkit free to use?

openflowkit is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does openflowkit do?

100% Free, Open-source local-first AI diagramming for architecture diagrams and flowcharts with animated exports.

What is openflowkit written in?

openflowkit is primarily written in TypeScript. Its source is publicly available at https://github.com/Vrun-design/openflowkit, and it has 772 GitHub stars.