The diagram studio
thatthinkslike you.
Why do diagrams
always feel like a chore?
We're designing complex systems with tools built for arts and crafts.
Pixel Purgatory
Wasting hours aligning boxes by hand. One new service breaks your entire layout.
The Screenshot Trap
Docs drift the moment you take the screenshot. Static assets are dead assets.
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.
Flowpilot AI
Chat with your diagram in natural language to build and style blocks instantly.
Local & Private
Everything stays on your machine. No cloud tracking, no forced syncing. You have full freedom.
Bring Your Own Key
Plug in your own OpenAI or Anthropic keys. Stored securely on your device, avoiding all vendor lock-ins.
Export Everywhere
Export to native Figma vector layers, pristine SVG, PNG, or JSON. Your diagrams are instantly portable.
Smart Auto-Layout
Powered by ELK.js to automatically route edges and perfectly snap nodes into alignment.
Multiplayer Sync
Share a link and build together with true peer-to-peer WebRTC zero-latency live cursors.
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.
Design
THE VISUAL LAYER
Stop rebuilding screens. Copy from the canvas and paste into Figma as editable SVG and text layers.
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.
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.
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.
Premium features.
Zero dollar price tag.
OpenFlowKit is 100% free & open source. There is no "Enterprise Edition" hidden behind a sales call.
Free Forever.
Full access to the core engine.
Host it anywhere. Modify it freely.
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 (BYOK)
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.
Community
Join developers building on OpenFlowKit.
“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!”
Early Adopter
Senior Engineer
Build diagrams that
don't look generic.
Join us in building the next generation of visual tools. Open source, local-first, and forever free.