🧠
Template Gallery
Start fast with built-in templates for release workflows, approval loops, incident handling, and BPM process maps. Insert and adapt in seconds.
NewThe fastest free online swimlane diagram tool. Visual drag-and-drop builder, live code editor, smart arrow routing — all in your browser. No account, no download.
Capabilities
SwimFlow packs the power of a paid tool into a free, browser-native experience — with zero setup.
Start fast with built-in templates for release workflows, approval loops, incident handling, and BPM process maps. Insert and adapt in seconds.
NewSave named snapshots while editing and jump back to any saved state instantly. Great for exploring alternatives without losing your current version.
NewBuilt-in lint panel catches broken arrows, missing start/end nodes, duplicate IDs, and lane issues before you export.
NewAdd lanes and nodes with one click. Edit labels, IDs, and colors inline. Drag nodes to reorder. No syntax knowledge needed.
No-codeSyntax highlighting, live autocomplete, auto-indent, snippet insertions, and inline error markers — all in the code panel.
Code-firstDiagram updates 550ms after you stop typing. Code and canvas stay in perfect sync. Hit ⇄ Sync to write positions back.
Instant8 named connection ports per node (top, bottom, left, right + corners). Arrows exit and enter at precise points with clean orthogonal paths.
Pro routing5 line styles (solid, dashed, dotted, thick, double), 5 end markers, custom colors, corner radius, opacity, and label position sliders.
CustomizableExport a clean, cropped SVG (vector, infinitely scalable) or 2× PNG for presentations. Fonts embedded. No watermarks. Also export JSON for downstream tooling and automation.
Export readyBFS rank-based auto-layout positions nodes at the correct row based on graph connections — no manual positioning needed.
Smart100-step undo/redo history. Works across node moves, lane edits, arrow changes, and property updates. Ctrl+Z / Ctrl+Y.
Non-destructiveLive minimap with viewport indicator. Scroll-to-zoom centered on cursor. Fit-to-screen, reset, and cursor-pan with Alt+drag.
NavigationGenerate shareable links, import SwimFlow code files, and keep a local draft automatically saved so work is never lost.
NewWorkflow
Start with the visual 🧩 Build tab for no-code editing, or the ⌨ Code tab if you prefer typing syntax.
Click + Add Swimlane and add process, decision, start, end, note, I/O, or sub-process nodes to each lane.
Use the Arrow tool — hover any node to see 8 port dots, click to start a connection, click a target port to finish.
Download a clean SVG or 2× PNG. Or copy the SwimFlow code and version-control it like source code.
Code editor
SwimFlow uses a clean, human-readable syntax similar to Mermaid — but more powerful. Write it once, version-control it, generate it from code.
from:right to:left port control inline
YES /
NO branch coloring built-in
<-> bidirectional arrows
x N y N w N h N manual position pinning
// comments supported
diagram "E-commerce Campaign Flow" direction LR theme dark lane "Marketing" blue start m0 process m1 "Launch campaign" endlane lane "Storefront" purple process s1 "Customer checkout" endlane lane "Payments" green decision p1 "Paid?" process p2 "Retry payment" endlane lane "Fulfillment" yellow process f1 "Pack and ship" end f2 endlane // Checkout and payment paths arrow m0 -> m1 arrow m1 -> s1 "Traffic" from:right to:left arrow s1 -> p1 "Place order" arrow p1 -> f1 YES arrow p1 -> p2 NO arrow p2 -> s1 "Retry" from:left to:bottom arrow f1 -> f2
Comparison
| Feature | SwimFlow | Lucidchart | draw.io | Mermaid |
|---|---|---|---|---|
| 100% Free (no limits) | ✓ | ✕ Paid tiers | ✓ | ✓ |
| No sign-up required | ✓ | ✕ | ✓ | ✓ |
| Visual drag-and-drop builder | ✓ | ✓ | ✓ | ✕ |
| Code-based diagram syntax | ✓ | ✕ | ✕ | ✓ |
| Live bi-directional sync (code ↔ canvas) | ✓ | ✕ | ✕ | ✕ |
| Port-level connection control (8 ports) | ✓ | ~ Basic | ~ Basic | ✕ |
| Curved / orthogonal routing | ✓ | ✓ | ✓ | ~ Basic |
| SVG + PNG export (no watermark) | ✓ | ✕ Paid | ✓ | ✓ |
| Runs 100% in browser (no server) | ✓ | ✕ | ✓ | ✓ |
| Swimlane-optimized (primary focus) | ✓ | ~ General | ~ General | ~ General |
Who uses it
Map CI/CD pipelines, code review workflows, deployment processes, and microservice interactions across ownership boundaries.
Document BPMN business processes, approval chains, procurement flows, and HR workflows with cross-functional clarity.
Teach UML activity diagrams, system design concepts, and algorithm flows with clean, presentable, exportable visuals.
Visualize sprint workflows, stakeholder responsibilities, release processes, and cross-team dependencies clearly.
FAQ
Yes, 100%. No account, no credit card, no watermarks. All features including SVG/PNG export are permanently free.
A swimlane diagram (cross-functional flowchart) organizes process steps into lanes representing people, teams, or departments — making responsibilities crystal clear. Used in BPMN and UML activity diagrams.
SwimFlow has a dedicated swimlane-optimized syntax, a visual drag-and-drop builder, per-arrow port control, waypoints, custom arrow styles, templates, snapshots, lint diagnostics, and a live minimap. Mermaid is code-only and lacks swimlane-specific features.
Lucidchart requires a paid account for full features and export. SwimFlow is completely free, runs in your browser with no sign-up, and adds a unique code-based editing mode with live sync.
Yes. Diagrams you create with SwimFlow are yours. Use them in any commercial project, documentation, presentation, or publication.
No. SwimFlow runs entirely in your browser. No data is sent to any server. Your diagrams stay completely private and local.
Export as SVG and embed it in Word, PowerPoint, Confluence, Notion, or any tool that accepts vector images. Export as PNG for raster use.
Process (rectangle), Decision (diamond), Start/End (circles), Note (dashed box), I/O (parallelogram), and Sub-process (double-border). All with drag-resize support.
Join thousands of developers, analysts, and educators who use SwimFlow every day.