Local-first by default
Your diagrams, workspace state, and AI-related browser data stay on-device unless you choose to remove them.
The diagram studio
thatthinkslike you.
The Problem
Why do diagrams
always feel like a chore?
We're designing complex systems with tools built for arts and crafts.
A
B
1px off
Pixel Purgatory
Wasting hours aligning boxes by hand. One new service breaks your entire layout.
OUTDATED
The Screenshot Trap
Docs drift the moment you take the screenshot. Static assets are dead assets.
Locked
Enterprise Beige
Locked into rigid, generic templates. Your architecture is unique; your diagrams shouldn't look like clipart.
Everything you need.
Nothing you don't.
Diagram as Code
First-class support for our type-safe DSL. Define nodes in code and let the engine handle the layout.
// define.ts
const api = Node();
const db = Node();
api.connect(db);
API Service
Postgres DB
AI Assistant
Flowpilot AI
Chat with your diagram in natural language to build and style blocks instantly.
Add a Redis cache in front of the DB.
diff --git a/diagram.tsx
+ const redis = new Node({ type: 'Redis' });
+ api.connect(redis);
+ redis.connect(db);
Local & Private
Everything stays on your machine. No cloud tracking, no forced syncing. You have full freedom.
Offline Ready
Local File System
Bring Your Own Key
Plug in your own OpenAI or Anthropic keys. Stored securely on your device, avoiding all vendor lock-ins.
OpenAI API Key
v4X9
Export Everywhere
Export to native Figma vector layers, pristine SVG, PNG, or JSON. Your diagrams are instantly portable.
.fig
.svg
.png
+.json
Smart Auto-Layout
Powered by ELK.js to automatically route edges and perfectly snap nodes into alignment.
APP
API
DB
Multiplayer Sync
Share a link and build together with true peer-to-peer WebRTC zero-latency live cursors.
Shared Node Object
Alex
Sarah
Workflows
One engine.
Three native workflows.
OpenFlowKit adapts to the tool you are already using. No new tabs to open. No context switching.
Engineering
DIAGRAM AS CODE
Write diagrams in our DSL or Mermaid.js syntax. Paste code, get a fully laid-out diagram. Export as JSON to version control.
architecture.dsl
Auth Service
-> API Gateway
-> Redis Cache
-> Postgres DB
Design
THE VISUAL LAYER
Stop rebuilding screens. Copy from the canvas and paste into Figma as editable SVG and text layers.
Group 1
Export & Share
PIXEL-PERFECT OUTPUT
Export diagrams as SVG, PNG, or JSON. Copy to clipboard and paste into Figma with editable layers. Save as JSON to share or version control.
SVG
Vector • Editable in Figma
PNG
Raster • High-res export
JSON
Data • Save & restore flows
Zero Plugins Required
Copy the code.
Paste the design.
Copy a diagram from OpenFlowKit and paste it straight into Figma — you'll get editable text and clean vector shapes, not a flat image. No plugins needed.
Editable Text
Vector Fidelity
Selected
C
Untitled
Vector + Text
V
The Architecture
Not just a wrapper.
A 4-Layer Engine.
By aggressively decoupling state, layout, and rendering, OpenFlowKit delivers native performance without the bloat.
1. React Display Layer
A pure, stateless render layer strictly responsible for drawing nodes as fast as possible.
2. Collaboration Mesh
A robust, low-latency CRDT network powered by Yjs and WebRTC.
3. Headless Engine Core
The true source of logic. Headless DSL parsing, type validation, and ELK.js routing.
4. LLM Bridge
Private BYOK prompts translated into typed editor commands.
Client Canvas
NODE A
NODE B
CRDT WebRTC
@openflowkit/core
class Engine {
validate(nodes: Node[]): boolean {
return nodes.every(n => n.id);
}
export(): JSON {
return JSON.stringify(this);
}
}
LLM Proxy
Prompt: "Add auth layer..."
Why OpenFlowKit
A local-first AI diagramming tool built for editable technical work.
OpenFlowKit helps teams turn rough system ideas into diagrams they can keep editing, exporting, and sharing. It is designed for architecture flows, system design, process mapping, and other diagram-heavy workflows where static output is not enough.
Useful for real architecture work
OpenFlowKit supports freeform diagramming, architecture mapping, AI-assisted drafting, structured imports, and handoff exports.
Built for editable output
You can keep iterating in the canvas, export to Mermaid, or hand work off through SVG, PNG, and Figma-friendly paths.
Frequently Asked
What is OpenFlowKit?
OpenFlowKit is an open-source, local-first diagramming tool for architecture diagrams, flowcharts, and AI-assisted visual workflows.
Who is OpenFlowKit for?
It is designed for engineers, architects, technical founders, and product teams who need editable diagrams instead of static AI image output.
Does OpenFlowKit require an account?
No. You can open the app and start diagramming without creating an account.
How does AI work in OpenFlowKit?
AI is optional. You bring your own API key in the settings modal, then use AI to draft, refine, or expand diagrams inside the editor.
Premium features.
Zero dollar price tag.
OpenFlowKit is 100% free & open source. There is no "Enterprise Edition" hidden behind a sales call.
MIT License
Free Forever.
Full access to the core engine.
Host it anywhere. Modify it freely.
$0
Unlimited Usage
No account or credit card required
Everything Included
- Unlimited diagrams & projects
- Save locally, your data stays on your device
- White-Label Branding
- One-click auto-layout
- Export to SVG, PNG, JPG
- Figma Export
- Mermaid.js Support
- AI diagram generation (bring your own API key)
Under Construction
Build in public.
Shape the engine.
OpenFlowKit is just getting started. We are building the core engine in the open. Join us on Day 1.
Open Source
The core engine is MIT licensed. Read the source, submit PRs, or fork it for your internal tools.
PRs Welcome
Contributors
Community
Join developers building on OpenFlowKit.
+You
Feedback
“The clean interface looks great and dragging and dropping nodes offers a very pleasant experience. The attention to detail in the design really makes a difference. And the best part is that it is open-source and completely free. Wow!”
EA
Early Adopter
Senior Engineer
Ready to use
Build diagrams that
don't look generic.
Join us in building the next generation of visual tools. Open source, local-first, and forever free.
bash — 80x24
➜~gh repo clone Vrun-design/openflowkit
✔ Cloning into 'openflowkit'...
✔ Remote: Enumerating objects...
✔ Receiving objects: 100% done.