The diagram studio that draws like you.

100% free, open-source diagram tool for builders. Write code or drag and drop — get beautiful results either way.

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.

model User {
  id Int @id
  email String @unique
  posts Post[]
}

model Post {
  id Int @id
  title String
  author User
}

Paste your code. See your architecture.

Don't draw boxes manually. Paste JSON, React components, Prisma schemas, or SQL dumps into OpenFlowKit. Our AI engine parses the relationships and builds a living canvas instantly.

Direct your architecture.

The world's first cinematic export engine for system design. Turn static diagrams into breathtaking, presentation-ready animations in one click.

Zero Keyframes Required

Just design your system. Our engine automatically interpolates movement, opacity, and pathing.

Cinematic Path Routing

Data flows perfectly along complex architectural branches using smooth Bezier curves.

Pristine 60fps Native Exports

Render natively to MP4 without leaving the browser environment.

Everything you need. Nothing you don't.

The ultimate white-label canvas. Fully customizable nodes, edges, and themes — powered by React Flow. It's your brand, given infinite space to breathe.

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);

Flowpilot AI

Chat with your diagram in natural language to build and style blocks instantly.

// 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.

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.

class Engine {
  validate(nodes: Node[]): boolean {
    return nodes.every(n => n.id);
  }

export(): JSON {
    return JSON.stringify(this);
  }
}

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.

  • Unlimited Usage
  • Get Started
  • 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.

Join developers building on OpenFlowKit.

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!”

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.

Get Started Now

➜~gh repo clone Vrun-design/openflowkit
✔ Cloning into 'openflowkit'...
✔ Remote: Enumerating objects...
✔ Receiving objects: 100% done.