OpenFlowKit

The open-source diagramming studio builders actually want to use.

Create flows from templates, code, structured imports, or AI. Refine them visually, keep them local-first, and export — including as a cinematic animated video that no other open-source tool offers.

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

🧑‍💻 Code → Diagram SQL · Terraform · K8s OpenAPI · Source code

🤖 AI Generation 9 providers · BYOK Direct-to-canvas output

`{}` Diagram as Code Bidirectional live sync Git-friendly DSL

🧩 Asset Libraries Developer · AWS · Azure GCP · CNCF · Icons

🎬 Cinematic Export Animated video & GIF No upload required

---

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 9 providers, deterministic and AI-assisted imports, asset libraries for technical diagrams, and cinematic animated export — with zero server-side storage.

---

Feature highlights

	OpenFlowKit	Excalidraw	Draw.io	Mermaid	Lucidchart
Visual canvas editor	✅	✅	✅	❌	✅
Bidirectional diagram-as-code	✅	❌	❌	✅	❌
AI generation (9 providers) Beta	✅	❌	❌	❌	Limited
SQL → ERD (native parser)	✅	❌	❌	❌	❌
Terraform / K8s import Beta	✅	❌	❌	❌	❌
AWS / Azure / GCP / CNCF icons	✅	❌	✅	Partial	✅
Real-time collaboration (P2P) Beta	✅	✅	❌	❌	✅ (cloud)
Cinematic animated export	✅	❌	❌	❌	❌
Figma export (editable SVG)	✅	❌	❌	❌	❌
No account required	✅	✅	✅	✅	❌
Open source (MIT)	✅	✅	✅	✅	❌

---

Code → Diagram

Drop in your existing artifacts. Many formats are handled by deterministic native parsers that run entirely in your browser. AI-powered imports help when the source needs interpretation or when you want a richer first-pass architecture draft.

Native parsers (no API key needed):

CREATE TABLE orders (
  id       BIGINT PRIMARY KEY,
  user_id  BIGINT NOT NULL REFERENCES users(id),
  status   ENUM('pending','paid','shipped') NOT NULL
);

→ Typed ERD with inferred foreign-key edges and cardinalities. Rendered in milliseconds, no server involved.

# deployment.yaml
apiVersion: apps/v1
kind: Deployment
spec:
  replicas: 3
---
apiVersion: v1
kind: Service
selector:
  app: api
---
apiVersion: networking.k8s.io/v1
kind: Ingress
spec:
  rules:
    - host: api.example.com

→ Kubernetes architecture with Deployment → Service → Ingress connections.

AI-powered imports (API key required):

Paste source code, infrastructure, or API specs and hit generate — the diagram lands directly on your canvas. AWS, Azure, GCP, and CNCF icons are automatically applied when the AI detects cloud services in your input.

Source	Engine	API key?
SQL DDL	Native parser	No
Terraform .tfstate	Native parser	No
Terraform HCL	AI-assisted	Yes
Kubernetes YAML / Helm	Native parser	No
OpenAPI / Swagger YAML/JSON	Native parser	No
OpenAPI source text → richer flow	AI-assisted	Yes
Source code (single file)	AI-assisted · 9 languages	Yes
Mermaid	Native parser	No

---

Home first, editor second

OpenFlowKit now treats the product as two clear surfaces:

• Home for creating, opening, duplicating, importing, and organizing flows
• Editor for actual canvas work once a real document exists

That means the app does not create a fake default flow just to get you onto the canvas. If you delete everything, your workspace can stay empty until you intentionally create the next flow.

---

Flowpilot — AI generation with any model

Flowpilot sits directly in the editor. Describe a system, paste source code, upload a screenshot, or ask it to refine what's already on the canvas. Your API key is stored in your browser and sent directly to the provider — OpenFlowKit's servers never see it.

9 providers. Bring your own key. Switch any time.

Provider	Default model	Why use it
Google Gemini	gemini-2.5-flash-lite	Free tier available, fast, browser-safe
OpenAI	gpt-5-mini	Best reasoning for complex architectures
Anthropic Claude	claude-sonnet-4-6	Excellent code and system understanding
Groq	llama-4-scout-17b-16e-instruct	Fastest inference available
Mistral	mistral-medium-latest	Strong European privacy-first alternative
NVIDIA NIM	llama-4-scout-17b-16e-instruct	Enterprise GPU inference
Cerebras	gpt-oss-120b	Fastest on WSE-3 silicon
OpenRouter	google/gemini-2.5-flash	Access 100+ models through one key
Custom endpoint	Any model	Ollama, LM Studio, or any OpenAI-compatible API

No proxy. No middleman. Direct browser-to-provider requests.

---

OpenFlow DSL — diagram as code

Every diagram has a live code panel. Edit the canvas → code updates. Edit the code → canvas updates. Two-way, always in sync.

flowchart TB
  client[React App]   --> gateway[API Gateway]
  gateway             --> auth[Auth Service]
  gateway             --> orders[Orders Service]
  orders              --> db[(PostgreSQL)]
  orders              --> cache[(Redis)]
  auth                --> db

• Mermaid-compatible syntax
• Export to Mermaid, PlantUML, or JSON
• Paste any Mermaid diagram and it renders immediately
• Version snapshots — restore any previous state

---

Structured diagram families

Not a freeform whiteboard. Structured diagram types with opinionated defaults, correct relationship semantics, and purpose-built node styles.

• 🔷 Flowcharts — processes, decision trees, system flows
• ☁️ Architecture — AWS / Azure / GCP / CNCF cloud provider icons built in
• 🗄️ Entity-Relationship — typed fields, FK edges, one-to-many / many-to-many notation
• 📐 Class diagrams — UML with inheritance, composition, and interface relationships
• ↔️ Sequence diagrams — async messages, actors, and lifelines
• 🧠 Mind maps — collapsible radial trees with auto-layout
• 🛤️ User journeys — steps, phases, and sentiment scoring
• ⚙️ State machines — transitions, guards, entry and exit actions

---

Editor workflow built for technical diagrams

OpenFlowKit works best when you move between the right surfaces instead of forcing everything through one panel:

• Toolbar add menu for quick insert actions
• Command Center for templates, import, assets, search, layout, pages, layers, and design systems
• Studio for Flowpilot, Mermaid, OpenFlow DSL, infra parsing, and linting
• Properties panel for exact visual and metadata edits

Large diagrams also get better organization with multi-page documents, layers, sections, and local-first document recovery.

---

🎬 Cinematic Export — a USP no other open-source tool has

Turn any diagram into an animated video walkthrough — node by node, edge by edge — entirely in your browser. No upload, no server, no third-party tool.

Designed for architecture reviews, onboarding docs, and demos where a static image doesn't cut it.

No other open-source diagramming tool does this.

Export as WebM, control animation speed, and share a link or embed it anywhere.

---

Export everywhere

Build your diagram once. Take it anywhere.

• 🎬 Cinematic MP4 / GIF — animated walkthrough, browser-only, no upload required
• PNG / SVG — transparent background, pixel-perfect at any resolution
• PDF — print-ready, vector-crisp
• Mermaid — paste directly into GitHub READMEs, Notion, Confluence, Linear
• PlantUML — for enterprise toolchains and legacy integrations
• Figma — full editable SVG import with preserved layers
• JSON — complete round-trip import/export, no data loss

---

Real-time collaboration — local-first by default

Local-first stays the default. Your saved flows live in the browser, your AI keys stay on your device, and export is explicit. When you do want to work together, OpenFlowKit supports P2P collaboration over WebRTC with live presence and shared editing, without making a hosted backend mandatory for solo work.

---

Canvas built for keyboard-first developers

Shortcut	Action
⌘ K / Ctrl K	Command bar — search, import, layout, assets, and actions
⌘ \ / Ctrl \	Toggle the live code panel
⌘ Z / Ctrl Z	Full undo with complete history
⌘ D / Ctrl D	Duplicate selection
⌘ G / Ctrl G	Group selected nodes
⌘ / / Ctrl /	Keyboard shortcuts reference

Plus: smart alignment guides, snap-to-grid, multi-select, pages, layers, sections, architecture lint, light/dark/system theme, and full i18n in 7 languages.

---

What we are improving next

Current roadmap focus:

• GIF export for cinematic animations — WebM is shipping now; GIF export coming next so diagrams can be embedded anywhere without conversion
• GitHub repo → diagram — currently in beta internally; will ship when output quality is consistent across real-world codebases
• better layers and page workflows for larger technical diagrams
• stronger code and structured-import diagram quality
• smarter auto-layout defaults with less cleanup after import
• performance boosts for bigger canvases and heavier sessions
• continued docs and onboarding cleanup so the product surfaces stay easier to understand

---

Get started in 30 seconds

git clone https://github.com/Vrun-design/openflowkit.git
cd openflowkit
npm install
npm run dev

Open http://localhost:5173. Done.

Zero environment variables required. AI provider keys are configured in the in-app settings panel at runtime — nothing goes in .env.

---

Self-host

OpenFlowKit is a pure static SPA. There is no backend. Deploy the dist/ folder anywhere that serves HTML.

Cloudflare Pages / Netlify / Vercel:

npm run build
# upload dist/ to your provider

No database. No secrets. No infrastructure. One folder.

---

Tech stack

Layer	Technology
Framework	React 19 + TypeScript 5
Build	Vite 6
Canvas	React Flow (XYFlow)
Auto-layout	ELK.js
State	Zustand
Storage	IndexedDB — local-first, no backend
Styling	Tailwind CSS
Collaboration	WebRTC (P2P, no relay server)
i18n	react-i18next — 7 languages
Testing	Vitest + Playwright

---

Contributing

All contributions are welcome — bug fixes, new diagram types, parser improvements, translations, and documentation.

Start here:

npm run dev        # development server at localhost:5173
npm run test       # unit tests via Vitest
npm run test:e2e   # end-to-end tests via Playwright
npm run lint       # ESLint + TypeScript type-check

Good first issues are tagged good first issue. Before opening a PR, please read CONTRIBUTING.md.

---

OpenFlowKit is MIT licensed, locally hosted, and built in the open.
No cloud required. No account required. No lock-in.

→ Launch App	Docs	Website	Changelog
Bug Report	Feature Request	Contributing Guide	Security Policy

---

If OpenFlowKit saves you time, the most impactful thing you can do is give it a star.
It helps other developers find the project.

_{React 19  ·  TypeScript 5  ·  Vite 6  ·  XYFlow  ·  ELK.js  ·  Zustand  ·  Yjs  ·  Framer Motion  ·  Tailwind CSS  ·  Cloudflare Pages
MIT Licensed  ·  Local-first  ·  No telemetry  ·  No account  ·  No server-side storage  ·  No lock-in}