OpenFlowKit

The open-source, local-first diagramming tool with AI generation built in.
No account. No cloud. No limits. Free forever.

Open the App →  ·  Documentation  ·  Website  ·  Report a Bug

OpenFlowKit is a fully open-source diagramming tool that runs entirely in your browser. It combines a fast, professional canvas with AI generation so you can go from a plain-English description to a structured, editable diagram in seconds.

There's no account to create, no server storing your work, and no feature gated behind a paywall — ever. Your diagrams live in browser local storage and stay there unless you explicitly export or share them.

You: "Draw a microservices architecture with an API gateway, auth service, product service, and Postgres database" OpenFlowKit: *builds it* 

Describe what you want in plain English. OpenFlowKit calls the AI with your own API key and builds a fully editable diagram. No middleman, no usage fees, no data sent to our servers.

Supports Gemini and OpenAI-compatible endpoints. Works with any locally-run model behind a compatible API.

Every diagram is round-trippable code. The OpenFlow DSL is a human-readable, git-friendly format — paste code in, get a diagram; export a diagram, get code. Ideal for version-controlled documentation.

flow: "Payment Processing" direction: LR node checkout [label: "Checkout"] node gateway [label: "Payment Gateway", shape: diamond] node success [label: "Success", shape: capsule] node failure [label: "Retry", shape: capsule] checkout -> gateway gateway -> success [label: "Approved"] gateway -> failure [label: "Declined"] 

One-click auto-arrange with ELK.js — the same layout engine used by Eclipse and VS Code's diagram extensions. Hierarchical, layered, force-directed, and radial modes for any graph shape.

Every edit is recorded. Scrub through your diagram's full edit history visually. Export the playback as an animated GIF or PNG sequence — useful for walkthroughs, onboarding docs, and architecture reviews.

20 curated starter templates so you're never staring at a blank canvas:

• Core shapes — rectangles, rounded rects, capsules, circles, diamonds, hexagons, cylinders, parallelograms, and more
• Specialised nodes — process, decision, start/end, annotation, text block, section, image, browser frame, mobile frame, architecture icon node
• AWS — full SVG icon pack with provider categories
• Azure — Microsoft architecture SVG pack
• CNCF — cloud-native artwork pack
• Lucide — 1,000+ general-purpose icons

SVG · PNG · JPG · Mermaid · OpenFlow DSL · JSON · Figma paste

Browser-based peer-to-peer collaboration via WebRTC room links. No server, no accounts, no persistence — just share a link and work together live.

• Node.js 18+
• npm 9+

git clone https://github.com/Vrun-design/openflowkit.git cd openflowkit npm install npm run dev # → http://localhost:5173

To use AI generation, open Settings → AI in the app and add your Gemini or OpenAI API key. It's stored locally in your browser — never sent to us.

npm run build # compile + bundle npm run bundle:check # verify bundle size budgets

npm run dev --workspace=docs-site # → http://localhost:4321

npm run dev --workspace=web # → http://localhost:4320

npm test -- --run # full suite

Focused suites for faster iteration:

npm run test:s0 # store, history, canvas core types npm run test:s10-state # state management and persistence npm run test:s10-canvas # canvas interaction logic npm run test:s4-handle-safety # edge handle safety rules

TypeScript and lint:

npx tsc --noEmit # type check npx eslint src # lint

src/ components/ command-bar/ Command palette — Assets, Templates, Design, Code, AI views flow-canvas/ Canvas orchestration, node/edge renderers, overlays home/ Dashboard, settings, welcome surfaces properties/ Node, edge, and canvas side panels top-nav/ Nav bar — export, share, history, collaboration config/ Rollout flags (feature gating) hooks/ Editor hooks — clipboard, history, playback, interaction lib/ Shared types, OpenFlow DSL parser, utilities services/ collaboration/ WebRTC room links and sync transport shapeLibrary/ Provider icon catalog, lazy SVG loading templateLibrary/ Starter template registry playback/ Playback model, step generation, GIF export store/ Zustand store — slices, defaults, persistence docs-site/ Astro + Starlight documentation (EN + TR) web/ Astro marketing landing page assets/ third-party-icons/ AWS, Azure, CNCF SVG packs + source metadata scripts/ shape-pack/ Icon pack intake and validation tooling 

See ARCHITECTURE.md for deep-dives on:

• Store slice design and per-slice hook pattern
• History V2 (per-tab past/future arrays, no global snapshot)
• ELK singleton and layout pipeline
• Export pipeline and bundle chunking strategy
• Rollout flag system for safe feature gating

See CONTRIBUTING.md for full setup instructions and code guidelines.

The two rules that matter most:

1. Never rename storage keys. openflowkit-storage, flowmind-clipboard, flowmind_snapshots — changing these silently wipes existing user data.
2. New features go behind a rollout flag. Add an entry to src/config/rolloutFlags.ts and gate the code path. Flip the default to true in a separate PR once validated.

Before opening a PR: tsc --noEmit and eslint must be clean, and all 637 tests must pass.

Three independent Cloudflare Pages projects, one repo:

Full setup guide: docs/cloudflare-pages-setup.md

OpenFlowKit ships with third-party SVG icon packs under their own licenses. Check SOURCE.md before redistributing.

OpenFlowKit's own source code is MIT licensed.