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

✨ Mermaid → Icons Paste Mermaid · 1,600+ icons auto-assigned · beautiful

🤖 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

Every diagramming tool makes a compromise. OpenFlowKit doesn't.

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, automatic icon assignment from 1,100+ tech icons, and cinematic animated export — with zero server-side storage.

Paste any Mermaid flowchart, architecture, state diagram, class diagram, ER diagram, sequence diagram, mindmap, or journey — all 8 diagram families. OpenFlowKit renders it on a visual canvas and automatically assigns the correct branded icon to every technology node.

flowchart TD
  API[Express API] --> DB[(PostgreSQL)]
  DB --> Cache[Redis Cache]
  Cache --> Queue[RabbitMQ]

Paste this → you get the Express wordmark, PostgreSQL elephant, Redis logo, and RabbitMQ icon — all auto-detected, all beautifully laid out. No other tool does this.

1,600+ icons from developer, AWS, Azure, CNCF, and GCP catalogs are matched automatically based on node labels. No manual drag-and-drop. No configuration.

1. Paste Mermaid on the canvas or in the code panel
2. Semantic classifier detects technology names (PostgreSQL, Redis, Express, Lambda, etc.)
3. Icon matcher searches 1,100+ icons across all catalogs — exact match, then alias, then substring
4. Enricher assigns colors, icons, and provider SVGs to every node
5. ELK layout arranges everything cleanly

• npm run test:mermaid runs the broad Mermaid parser/plugin/round-trip gate
• npm run test:mermaid:layout runs the layout, import-state, and recovery corpus gate
• npm run test:mermaid:gold runs both together

Describe your system in plain English. AI generates a diagram on the canvas with correct icons applied automatically.

9 providers supported: Google Gemini, OpenAI, Anthropic Claude, Groq, Mistral, NVIDIA NIM, Cerebras, OpenRouter, or any custom OpenAI-compatible endpoint.

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

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

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 — paste any Mermaid and it renders with auto-assigned icons
• Specify icons directly: { archProvider: "developer", archResourceType: "database-postgresql" }
• Auto-icon resolution: nodes are enriched with the correct branded icon based on their label
• Export to Mermaid, PlantUML, or JSON
• Version snapshots — restore any previous state

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

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.

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 or MP4 (browser-native, no codec install needed), control animation speed, and share or embed anywhere.

Build your diagram once. Take it anywhere.

• 🎬 Cinematic WebM / MP4 — animated build 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

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.

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

Current roadmap focus:

• GIF export for cinematic animations — WebM/MP4 ship today; GIF export for zero-conversion embeds is next
• 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

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.

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.

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.