How to Quokka: every feature, with examples.

Visit quokkaflow.io and click Get started. Quokka uses Google sign-in — pick your Google account, grant access, and you'll land on a three-step onboarding wizard.

1. Step 1 — Profile. First and last name (defaults to your Google name, edit if needed), title, company, function (your role within the org), and an optional LinkedIn URL. Required: first name, last name, function.
2. Step 2 — Tech Stack. A catalog of ~80 common B2B tools across 11 categories. Click the chips for the tools your team uses — they become your tag library on the canvas. You can skip and add later.
3. Step 3 — AI credentials. Quokka generates flows from natural-language descriptions using your own Anthropic or OpenAI API key. Paste it here (encrypted at rest; never shown back to the browser). Optional — you can use the canvas without AI features.

After onboarding you land on /dashboard. From the top:

• Welcome row — your name + the title / company / function you set in onboarding.
• Stats grid — flow count, tech tool count, function, account email.
• Your flows section — folder cards on top (when you have any), unfoldered flows below. Each card shows the flow name, step count, last update, and a Σ total (critical-path duration).
• Your tech stack snapshot— the first 12 tools from your library, with an “Edit” link to /onboarding.
• AI-readiness teaser — a reminder of why you tag tools at all.

The header has three primary buttons: ✨ Generate from prompt, 📁 New folder, and + New flow.

Three ways to start a flow:

• From a prompt (recommended) — click ✨ Generate from prompt on the dashboard, paste a paragraph describing your process, wait ~10 seconds. Quokka lays it out with steps, edges, durations, tools, and functions inferred.
• Blank canvas — click + New flow. You land on the canvas with no steps. Add them manually.
• Sample template — when the canvas is empty, click the template button on the empty-state card. Loads a 4-step example process you can edit.

Four ways to add a step:

• Click + Add Step in the canvas top bar. New step drops next to the currently selected node and auto-connects with an edge.
• Press ⌘+N. Same behavior.
• Press ⌘+Dto duplicate the selected step — comes back with “(copy)” in the name.
• For containers (steps with sub-steps): select the container, open the right panel, click + Add a component. Creates a child step inside.

Each step has connection handles on all four sides (small dots on top, right, bottom, left). Those are what you grab to draw edges to other steps.

   ┌───────────────────┐
   │     · top ·       │   ← drag from any of these
   │                   │     small dots to connect
   │ ·  Step name   ·  │
   │    5 min          │
   │    [Salesforce]   │
   │     · btm ·       │
   └───────────────────┘

Creating an edge:

1. Hover a step — handles fade up to full opacity on all four sides.
2. Click and drag from any handle. A green dashed line follows your cursor.
3. Drop on any handle of another step. The closest valid handle within 45 pixels snaps; you don't need to land precisely.

The line goes red and won't commit if the connection would:

• Create a self-loop (drop on the same node you started from)
• Duplicate an existing edge between the same two steps in the same direction
• Create a cycle (target is already upstream of the source — would loop)

Moving an existing edge. Hover any edge — two emerald dots appear at the endpoints. Grab either dot and drag it to a different node, or to a different side of the same node. The edge follows. Same validation rules apply.

Deleting an edge. Click an edge to select it (top-center action bar appears) → click the red 🗑 Delete button. Or select + press Delete.

Click any step to select it. The right panel slides in with all the editable fields:

• Name — also editable inline by double-clicking the node on the canvas. Press Enter to save.
• Description — multi-line. Used in the Markdown export.
• Duration — number plus unit (seconds / minutes / hours / days / weeks). Feeds the critical-path math.
• Owner / Role— free-form text. Best as a role (“Owner”, “Reviewer”) rather than a person's name.
• Tech Stack — multi-select with autocomplete (covered next).
• Functions — multi-select with autocomplete (also next).
• Nest under — pick a parent step to make this a sub-step (containers).
• Dependencies — read-only display of which steps feed in and which feed out. Edit by dragging edges on the canvas.
• Delete Step — confirmation modal, then removes the step and any connected edges.

Total time recomputes live as you edit any duration. The top barTotal: 12d reflects the current critical path.

Two separate tag systems on every step: tech stack (the tools that power the step) and functions (the org units involved).

Adding a tag.In the right panel's Tech Stack or Functions field, start typing. The dropdown shows matches from your library; press Enteror click a suggestion. If your typed text doesn't match, a + Create “X” option appears — Enter to both create the library entry AND tag this step.

Removing. Click any active chip on the step. It un-tags here but stays in your library.

TECH STACK
  [Salesforce ×]  [Gong ×]  [Outreach.io ×]
  ┌─────────────────────────────────┐
  │ + Add tech…                     │
  └─────────────────────────────────┘

FUNCTIONS
  [👥 Owner ×]  [👥 Reviewer ×]
  ┌─────────────────────────────────┐
  │ + Add function…                 │
  └─────────────────────────────────┘

Tags are stored in two places: on the step (its own array) and in your global library (one per user). The sidebar of the canvas has both libraries with usage counts — click any tool name there to see how many steps use it, hover to reveal a remove button.

Some steps are really collections of workrather than atomic actions. E.g., “Company R&D” might consist of researching Website + LinkedIn + Salesforce in parallel. Quokka models this with containers.

Two ways to nest:

• Add component. Select an existing step → in the right panel, click + Add a component. A new child step appears inside the parent's box. The parent automatically becomes a container.
• Drag-to-parent. Drag any existing step on top of another step (header area). The dragged step becomes a child of the target. Use this to move pre-existing flows into a phase.

Container math.A container's effective duration is the sumof all its descendants' durations (recursive — children of children roll up too). The container card shows Σ 47 min instead of its own time.

Visual.Containers have a translucent off-white wash with a dark header bar showing the name + Σ total. Tools and owner chips live below the header on the body. Children appear inside the container's frame.

Manual resize. Select a container — eight emerald corner/edge handles appear. Drag any to resize the container freely.

Detach. Select a child → right panel → click Detach from parent to promote it back to top level.

Quokka highlights the critical path— the longest chain through your flow, in orange. The top bar shows the chain's total time (Total: 9.5d).

Auto mode (default). The algorithm runs a topological sort + longest-path dynamic programming over the top-level DAG. Sequential steps add up; parallel branches that merge take the max. Containers contribute their full recursive sum. Cycles or orphan steps show as amber warnings in the top bar.

Manual override.Sometimes the math doesn't capture a real-world constraint. Click any edge → the action bar appears → click 🔥 Make critical. The edge and its endpoint nodes turn orange. Mark as many edges as you want. The total updates to the sum of all manual-critical nodes' effective durations.

In manual mode, a chip appears in the top bar: 🔥 Manual critical · reset. Click reset to clear all manual marks and return to auto.

The fastest way to start a complex flow: describe it in plain English and Quokka generates the layout.

1. On the dashboard or empty canvas, click ✨ Generate from prompt.
2. A modal opens with a textarea and three example prompts. Either click an example or write your own.
3. Press ⌘+Enter or click Generate flow. Quokka calls your configured LLM (Anthropic Claude or OpenAI) with your tech + functions libraries as grounding context.
4. In 5–15 seconds, you'll land on the canvas with the generated flow: laid out left-to-right via auto-layout, durations estimated, tools tagged (preferring names already in your library), functions tagged, owner roles assigned. Refine from there.

Example prompt:

When a new request comes in from a webform we capture it in our intake tool, route it to a reviewer who triages in Slack, then the owner runs a stakeholder meeting in Zoom with notes in Google Docs, sends an approval document via DocuSign, then the request is closed.

That generates ~8 steps with sensible durations and dependencies.

When you have several flows that are phases of one larger process, group them in a folder. The folder shows the sum of all child flow totals.

1. On the dashboard, click 📁 New folder. A folder card appears with the name “New Folder”.
2. Click the folder name (or the pencil icon) to rename.
3. Two ways to add flows. Drag a flow card onto the folder (the folder lights up emerald during drag). OR hover any flow card → click the ↔ icon → pick a folder.
4. The folder shows 📂 Folder name · 3 flows · Σ 12d. Click the chevron to expand/collapse.
5. Delete the folder via the trash icon. Flows inside don't get deleted — they return to the unfoldered section.

From the canvas top bar, click the ↓ Export dropdown:

• PNG image — a snapshot of the diagram (UI chrome like the minimap and controls are filtered out). Drop into slides.
• JSON — the full flow structure: name, total time, every step with duration / tech / functions / owner / position, every edge, the critical path. Ingest into other tools.
• Markdown summary — formatted for docs and decks. Flow name, total time, steps table (with duration / owner / tech / on-critical-path flag), step notes (description blocks), tech stack rollup, and a critical-path callout.

Use the Markdown export to paste into a doc or wiki, the JSON for programmatic downstream use, and the PNG for slides.

Everything below is on the canvas (/app):