FlowZap - Not another Diagramming tool - CODE FLOWZAP

For AI Agents: Canonical FlowZap Syntax (Copy-first)

laneA { # Lane A
  n1: circle    label:"Start"
  n2: rectangle label:"Next step"
  n1.handle(right) -> n2.handle(left) [label="Continue"]
}

laneB { # Lane B
  n3: diamond label:"Decision?"
}

n2.handle(bottom) -> laneB.n3.handle(top) [label="Handoff"]

loop [retry until valid] n2 n3

Strict LLM Rules

Output ONLY FlowZap Code; no markdown fences; no explanations.
Node attributes use colons (e.g.,
```
label:"…"
```
).
Edge labels use equals inside brackets (
```
[label="…"]
```
). Never
```
label:"…"
```
on edges.
Only shapes:
```
circle
```
,
```
rectangle
```
,
```
diamond
```
,
```
taskbox
```
.
Only one comment is allowed:
```
# Display Label
```
immediately after a lane’s opening brace.
Attribute keys stay English (
```
label/owner/description/system
```
) even if label text is localized.
IDs
```
n1, n2, …
```
must be unique across all lanes.

Do / Don’t (LLM guardrails)

| Do | Don’t | | --- | --- | |

n1: circle label:"Start"

n1: circle label="Start"

| |

n1.handle(right) -> n2.handle(left) [label="Yes"]

n1 -> n2 [label:"Yes"]

| |

laneA { # Lane A

// Lane A

or comments elsewhere | |

n3.handle(bottom) -> laneB.n5.handle(top)

n3 -> n5

(missing lane for cross-lane) | | Only FlowZap syntax | Mermaid syntax (

graph TD

sequenceDiagram

participant

->>

) |

Minimal complete templates

process { # Process
  n1: circle    label:"Start"
  n2: rectangle label:"Step"
  n3: circle    label:"End"
  n1.handle(right) -> n2.handle(left)
  n2.handle(right) -> n3.handle(left)
}

user { # User
  n1: circle    label:"Start"
  n2: rectangle label:"Submit"
  n1.handle(right) -> n2.handle(left)
  n2.handle(bottom) -> app.n3.handle(top) [label="Send"]
}
app { # App
  n3: rectangle label:"Process"
  n4: circle    label:"Done"
  n3.handle(right) -> n4.handle(left)
}

flow { # Flow
  n1: rectangle label:"Check"
  n2: diamond   label:"OK?"
  n3: rectangle label:"Fix"
  n4: rectangle label:"Proceed"
  n1.handle(right) -> n2.handle(left)
  n2.handle(bottom) -> n3.handle(top)  [label="No"]
  n2.handle(right)  -> n4.handle(left) [label="Yes"]
}

flow { # Flow
  n1: rectangle label:"Validate"
  n2: diamond   label:"Valid?"
  n1.handle(right) -> n2.handle(left)
  loop [retry until valid] n1 n2
}

ops { # Ops
  n1: taskbox owner:"Alice" description:"Deploy" system:"CI"
}

LLM-ready seed prompt

OUTPUT ONLY VALID FlowZap Code. NO OTHER TEXT. NO MARKDOWN. NO EXPLANATIONS.
Follow https://flowzap.xyz/flowzap-code and https://flowzap.xyz/examples.
Use colon for node properties (e.g., label:"...") and equals in edge labels ([label="..."]).
IDs n1, n2, … must be globally unique across all lanes. Only allowed shapes: circle, rectangle, diamond, taskbox.
Only one comment allowed: lane display label right after the opening brace.

Common errors (Bad → Good)

Bad:

n1: circle label="Start"

Good:

n1: circle label:"Start"

Bad:

n1.handle(right) -> n2.handle(left) [label:"Go"]

Good:

n1.handle(right) -> n2.handle(left) [label="Go"]

Bad:

n1.handle(bottom) -> n5

Good:

n1.handle(bottom) -> laneB.n5.handle(top)

Advanced (optional): Tiny ABNF snippet

node-line   = node-id ":" SP? shape SP label-prop
node-id     = "n" 1*DIGIT
shape       = "circle" / "rectangle" / "diamond" / "taskbox"
label-prop  = "label:" DQUOTE label-text DQUOTE

edge-line   = node-ref ".handle(" dir ")" SP "->" SP node-ref ".handle(" dir ")" SP
               "[" "label=" DQUOTE label-text DQUOTE "]"

node-ref    = node-id / lane-id "." node-id
dir         = "left" / "right" / "top" / "bottom"

lane-header = lane-id SP "{" SP? "#" SP display-label
lane-close  = "}"
lane-id     = ALPHA *(ALPHA / DIGIT)
display-label = 1*(%x20-7E)

loop-line   = "loop" SP "[" condition-text "]" SP node-id *(SP node-id)

label-text      = 1*(%x20-21 / %x23-5B / %x5D-7E)
condition-text  = 1*(%x20-5B / %x5D-7E)

FlowZap is built for Tech and Business builders alike who want to map out processes quickly, clearly, and without technical jargon. Here’s your step-by-step guide to writing and editing FlowZap Code, the simplest language existing that powers your FlowZap Diagrams. Now with enhanced support for Sequence Diagrams and LOOP fragments, you can toggle between Workflow Diagram views (for process flows) and Sequence Diagram views (for interaction timelines) in one click, all from the same FlowZap Code.

What Is FlowZap Code?

FlowZap Code is a straightforward way to describe your workflow visually. You’ll write a few short lines to define steps (nodes), connect them (edges), and organize everything into swimlanes (lanes) that match your real-world teams or roles. Although FlowZap Code is a DSL (Domain Specific Language) designed specifically for describing business process diagrams, it is not a programming language. No programming background is needed. The new Sequence Diagram mode lets you visualize object interactions over time, ideal for modeling user-system handoffs and AI Automation projects.

1. Organize Your Process with Lanes

Think of lanes as rows in your diagram, each representing a team, department, or role. Every lane groups together related steps.

lane1 {
  ...nodes...
  ...edges...
}

lane2 {
  ...nodes...
  ...edges...
}

The lane name (like
```
lane1
```
,
```
lane2
```
) is up to you.
Use clear names that make sense for your process (like
```
Sales
```
,
```
Accounting
```
).

2. Add Steps with Nodes

Inside each lane, list every step in your process. Each step is called a node.

n1: circle      label:"Start"
n2: rectangle   label:"Enter data"
n3: taskbox     owner:"Alice" description:"Validate input" system:"FormApp"
n4: diamond     label:"Is valid?"

How to Write a Node:

Nodes: nodeId:shape label:"Description"
Shapes: Pick from circle (start/end), rectangle (process), diamond (decision), taskbox (only if requested)
Use short unique IDs (n1, n2, …) across the entire diagram. Do not reuse IDs across lanes.
label:"Text" is what appears in the diagram. Keep labels concise but descriptive of the step or decision
Whitespace between the colon and shape is optional; examples use a space (e.g.,
```
n1: circle
```
).
The only allowed comment is a display label immediately after a lane's opening brace using
```
# <Display Label>
```
. Lines beginning with
```
//
```
are ignored and not preserved on regeneration. Do not add other comments.

Sequence View compatibility

Sequence view requires node IDs in
```
n*
```
form (
```
n1
```
,
```
n2
```
,
```
n3
```
, …).
Non-numeric aliases (e.g.,
```
u1
```
,
```
ai1
```
) are normalized to
```
n*
```
during parsing so events can be numbered and rendered correctly.
Keep IDs unique across the entire diagram; use lane-prefixed references for cross-lane edges (e.g.,
```
App.n6
```
).

3. Connect Steps with Edges

After your nodes, describe how each step connects to the next.

node.handle(direction) -> node.handle(direction) [label="Text"]

How to Write an Edge:

Main flow should move from left to right within lanes Use directions: right (main flow), left (backward), top/bottom (decisions) Label all decision outcomes (e.g., [label="Yes"], [label="No"]) Always use equals sign (=) for label assignment, never colon (:) Examples use a space after the colon in node definitions; whitespace is optional. Keep edge labels short and clear

4. Connect Across Lanes

If a step jumps from one lane to another, just add the lane name before the node:

n3.handle(bottom) -> lane2.n5.handle(top) [label="Send for Review"]

So, Cross-lane: node.handle(direction) -> laneName.node.handle(direction) Use when responsibility transfers between actors/systems Clearly show handoffs between lanes When connecting across lanes, the edge definition must live inside the braces of the origin lane

5. Add Loops with LOOP Fragments

Loops handle repeating processes, like retrying a form until valid. Use the new one-line LOOP syntax inside a lane to define iterations without complex blocks.

loop [condition] node1 node2 node3 node4

How to Write a LOOP:

loop [retry until valid format] n2 n3 n7 n8 (example: references nodes across lanes for a retry cycle).
The condition in brackets (e.g., [retry until valid format]) describes the loop's purpose—keep it simple and descriptive.
List involved nodes (e.g., n2 for input, n3 for submit, n7 for validate, n8 for check).
Loops render as repeating segments in flowcharts (curved arrows) or framed iterations in Sequence Diagrams (UML-style boxes).
Place LOOP after relevant nodes/edges in the originating lane.
Supports cross-lane nodes for realistic business/system loops, like authentication retries.
No nesting yet—keep loops flat for simplicity.

6. Full Example

Here’s a complete FlowZap Code sample for a three-lane process:

User { # User
  n1: circle label:"Start"
  n2: rectangle label:"Enter username and password"
  n3: rectangle label:"Submit form"
  n4: rectangle label:"Receive confirmation"
  n5: circle label:"Access granted"
  n1.handle(right) -> n2.handle(left)
  n2.handle(right) -> n3.handle(left)
  n3.handle(bottom) -> Application.n6.handle(top) [label="Send credentials"]
  n4.handle(right) -> n5.handle(left)

  loop [retry until valid format] n2 n3 n7 n8
}

Application { # Application
  n6: rectangle label:"Receive request"
  n7: rectangle label:"Validate format"
  n8: diamond label:"Valid format?"
  n9: rectangle label:"Forward to server"
  n14: rectangle label:"Forward confirmation to client"
  n6.handle(right) -> n7.handle(left)
  n7.handle(right) -> n8.handle(left)
  n8.handle(right) -> n9.handle(left) [label="Yes"]
  n9.handle(bottom) -> Server.n10.handle(top) [label="Authenticate"]
  n8.handle(top) -> User.n2.handle(bottom) [label="No - Error"]
  n14.handle(top) -> User.n4.handle(bottom) [label="Success"]
}

Server { # Server
  n10: rectangle label:"Check database"
  n11: diamond label:"Valid credentials?"
  n12: rectangle label:"Generate session token"
  n13: rectangle label:"Return error"
  n10.handle(right) -> n11.handle(left)
  n11.handle(right) -> n12.handle(left) [label="Yes"]
  n11.handle(bottom) -> n13.handle(bottom) [label="No"]
  n12.handle(top) -> Application.n14.handle(bottom) [label="Token"]
  n13.handle(top) -> Application.n6.handle(bottom) [label="Error 401"]
}

See more FlowZap Code examples here.

7. Tips & Best Practices

Keep IDs short: Use simple codes like
```
n1
```
,
```
n2
```
.
Help from AI: Ask your favorite AI Agent to draft a first template of FlowZap Code for you, specifying flowchart or sequence needs.
Auto-Layout checkbox: The Auto-Layout checkbox will take a first stab at organizing your Diagram. You can always tidy it up later.
Comments: Use a single display label comment after the opening brace using
```
# <Display Label>
```
(typically the capitalized lane name). Lines beginning with
```
//
```
are ignored and will not be preserved when you regenerate the code.
Labels: You can leave a connector label empty (
```
label=""
```
) or leave it out. For loops, make conditions actionable (e.g.,
```
[repeat 3 times]
```
).
Mode-Specific Tips: In Sequence mode, focus on message labels for clarity; avoid overusing loops to prevent cluttered timelines.
Sequence View: Use numeric
```
n*
```
IDs. Non-numeric aliases will be normalized to
```
n*
```
so the Sequence view can number and render events correctly. Keep IDs unique across the whole diagram.
Just write or paste your FlowZap Code into the editor and click “Update Diagram.” Your process comes to life—no technical skills required!

Just write or paste your FlowZap Code into the editor and click “Update Diagram.” Your process comes to life—no technical skills required!

FlowZap makes process mapping as easy as writing a checklist. If you can describe your workflow, you can diagram it in FlowZap.

How to Write and Edit FlowZap Code (No Tech Skills Needed!)

For AI Agents: Canonical FlowZap Syntax (Copy-first)

Do / Don’t (LLM guardrails)

Minimal complete templates

LLM-ready seed prompt

Common errors (Bad → Good)

1. Organize Your Process with Lanes

2. Add Steps with Nodes

3. Connect Steps with Edges

4. Connect Across Lanes

5. Add Loops with LOOP Fragments

6. Full Example

7. Tips & Best Practices