Documentation
o-flow is a snap-to-grid tool for standardised technical diagrams. You build flows from a fixed kit of meaningful shapes, on a grid that keeps everything aligned. You can draw with the mouse or write your diagram as code — both stay in sync.
Quick start
- Open the app and you'll see a starter diagram on the grid.
- Add a shape: drag one from the Shapes panel onto the canvas, or click it to drop in the middle.
- Edit text: double-click a shape and type. Press Enter to finish.
- Connect shapes: hover a shape and drag from one of the four blue dots onto another shape.
- Move: drag a shape; it snaps to the grid. Drag a marquee on empty canvas to select many, then move them together.
- Tidy: click ⇅ Tidy to align columns and even out spacing.
The canvas
- Snap & grid: everything snaps to a 20px grid. Toggle with the Snap button.
- Zoom: Ctrl/⌘ + scroll, or the + / − / Fit buttons.
- Pan: hold Space and drag, use the middle mouse button, or toggle the ✋ Hand tool.
- Undo / redo: Ctrl+Z and Ctrl+Shift+Z.
- Delete: select and press Delete.
Shapes
Pick a shape by what it means. The kit:
| Shape | Type | Use for |
|---|---|---|
| Stadium | terminator | Start / end of a flow |
| Rectangle | process | An action or step (auto-fits as a flat, wide bar) |
| Diamond | decision | A branch / yes-no question |
| Parallelogram | data | Input / output |
| Wavy rectangle | document | A report or document |
| Cylinder | database | Stored / persisted data |
| Barred rectangle | subprocess | A predefined sub-routine |
| Circle | connector | On-page reference / join |
| (none) | text | A free text label — no box or border |
| Person card | person | A person — name, role and a profile photo |
Sizes & styles
Every shape has five fixed sizes (xs s m l xl). Process boxes use a flat, wide set; other shapes
use a squarer set. Widths are multiples of the grid so aligned shapes connect with perfectly straight lines.
There are 20 styles. The first 15 have solid outlines; the last 5 are dotted. Text is black on light styles and white on the deep solid ones, automatically.
| Style keys |
|---|
plain sky mint sun rose violet teal amber pink slate · navy green red indigo charcoal (deep) · sky-dot slate-dot mint-dot amber-dot violet-dot (dotted) |
Select a shape and use the inspector on the right to change its size and style, or set them in code.
Connectors
- Drag from a shape's side dot to another shape. The dashed preview shows exactly where it will land.
- Select a connector to set its line (solid / dotted), corners (curved / sharp), arrows (none / one-way / two-way) and a label.
- Optionally match the destination shape's outline colour, so the connector picks up that shape's accent.
- Double-click a connector to add or edit its label.
- Near-aligned connectors snap to perfectly straight lines automatically.