SwimFlow Documentation

Everything needed to design diagrams quickly: syntax basics, editor flow, and export best practices.

Quick Start

Create lanes, add nodes, connect them, and export. You can build visually or use code mode for precision.

  • Create a lane and add process/decision nodes.
  • Link nodes with arrows across lanes.
  • Use live preview to verify flow logic.

Syntax Core

SwimFlow syntax is concise and readable. Example tokens: diagram, lane, process, decision, arrow.

  • lane "Team A" blue creates a lane.
  • process p1 "Validate request" adds a node.
  • endlane closes the lane block.

Connections

Connections support direction and branch labels. Port-level control improves readability in dense diagrams.

  • arrow a1 -> b1 simple link.
  • arrow d1 -> b2 YES labeled branch.
  • from:right to:left explicit ports.

Keyboard Shortcuts

  • Ctrl + Z undo
  • Ctrl + Y redo
  • Alt + drag to pan canvas

Export Guide

Use SVG for docs and scalable diagrams, PNG for slides and quick sharing.

  • SVG: best for Confluence, Notion, and print.
  • PNG: ideal for messaging and presentation decks.
  • Always check lane labels before export.