Hierarchical flows that make sense

How it works

1. Step 01

   Nested flows and subflows

   Create hierarchies that match your app structure. Authentication → Login → Forgot Password. Unlimited nesting depth for complex products.

   Flow Structure0 items

   📁Authentication5

   📁Login2

   📄Email Entry

   📄Password

   📁Forgot Password3

   📄Enter Email

   📄Check Inbox

   📄Reset Form

   STRUCTURE

   Depth

2. Step 02

   Mermaid diagram generation

   Auto-generate flowcharts from your screen structure. Edit diagrams visually or with code. Export for documentation.

   diagram.mmd

   ✓ Valid

   1

   2

   3

   4

   5

   6

   graph TD

   A[Start] --> B{Decision}

   B -->|Yes| C[Action 1]

   B -->|No| D[Action 2]

   C --> E[End]

   D --> E

   PREVIEW

   Auto-sync

3. Step 03

   Drag-and-drop ordering

   Reorder flows and screens by dragging. Move items between flows. Restructure your entire project in seconds.

   Screen OrderDragging...

   ⋮⋮

   👋Welcome1

   ⋮⋮

   📝Sign Up2

   ⋮⋮

   ✉️Verify Email3

   ⋮⋮

   ✅Complete4

   FLOW PREVIEW

   👋

   📝

   ✉️

   ✅

What you get

• 01

  Unlimited nesting

  Create as many levels of hierarchy as your product needs. No artificial limits.

• 02

  Auto-generated diagrams

  Mermaid flowcharts are created automatically from your flow structure.

• 03

  Export anywhere

  Export flows to PDF, share links, or embed diagrams in your docs.

Where it is used

Complex App Documentation

Document apps with hundreds of screens using nested flows that mirror your information architecture.

Feature-Based Organization

Group screens by feature area—Authentication, Dashboard, Settings—with sub-flows for each journey.

Sprint Planning

Create flows for upcoming features, organize by sprint, and share with stakeholders.

Client Deliverables

Organize client projects with clear hierarchies that make presentations easy to navigate.