Openflowkit
100% Free, Open-source local-first AI diagramming for architecture diagrams and flowcharts with animated exports.
Install / Use
/learn @Vrun-design/OpenflowkitREADME
See it in action
<table> <tr> <td width="33%"> <img src="readme-media/Sample -GIF-1.gif" alt="OpenFlowKit demo 1" width="100%" /> </td> <td width="33%"> <img src="readme-media/Sample -GIF-2.gif" alt="OpenFlowKit demo 2" width="100%" /> </td> <td width="33%"> <img src="readme-media/Sample -GIF-3.gif" alt="OpenFlowKit demo 3" width="100%" /> </td> </tr> </table> <br/>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
