FLOWCHART SIMULATOR

Flowchart Simulator

Build flowcharts with variables, operations, branches, and loops, then run them while tracking how values change.

Runs in your browser Auto-save JSON import and export No arbitrary JavaScript Desktop recommended

Desktop recommended: placing, connecting, and editing nodes works best with a mouse.

EDITOR

Flowchart

100%

Add nodes to create a flow

Delete: delete selectionCtrl+Z UndoCtrl+Y RedoCtrl+S: saveDouble-click: settings

Variables and run info

Variables

Values reset to their initial state when execution starts.

Output

Display node results

No output yet.

History

Run history

Select a node by clicking an entry.

No run history yet.

Settings

Select a node to edit its settings.

Project name Auto-saved in this device's localStorage

HOW TO USE

Build it, run it, and track value changes

Add nodes from the left and connect each output port to the next node. Edit operation, condition, and display expressions in Settings on the right.

Why use it? A diagram alone cannot show which branch runs, how variables change, or whether a loop ends. Running it confirms that operations follow the intended order.

Use it for Plan logic before coding, explain a process in class, check branches, calculations, and loops, or find mistakes before implementation.

Open Variables on the right and add number, string, or boolean variables
Connect nodes from Start to End, and add both Yes / No branches to each decision
Select “Step” to inspect the current node and variable changes
Save completed flows as JSON, and manage multiple versions with Open

Expressions use a restricted, safe expression language. Arbitrary JavaScript is not executed, and flowcharts or variables are never sent outside your browser.

GUIDE

Flowchart basics and how to use it

A flowchart represents operation order and conditional branches with shapes and connectors. This tool can run the flow you create.

What is a flowchart?

A diagram of a task or program that uses shapes and connectors flowing from top to bottom. It helps organize and explain operations by making their order, branches, and loops visible.

Role of each shape

Terminal (start/end): Marks the beginning and end of a flow.
Setup:Add a Start or End terminal from the list on the left. You can also change its type in Settings on the right.
Example:Start → Process → End
Process: Represents an operation to run, such as assigning a variable or performing a calculation.
Setup:Enter a display name and operation expression in Settings on the right. Write one assignment per line.
Example:Display name “Count up”, expression count = count + 1
Decision: Evaluates a condition and branches in two directions: Yes and No.
Setup:Enter a condition in Settings on the right, then connect both the Yes and No outputs.
Example:Condition score >= 70. If true, follow Yes; if false, follow No.
Display: Adds a calculation result or message to Output on the right.
Setup:Enter a display name and output expression in Settings on the right.
Example:Output expression "count=" + count
Loop start: While the condition is true, the flow enters the loop body. When false, it continues after the loop.
Setup:Enter a condition in Settings on the right and pair it with a loop end.
Example:Condition count < 5. If true, enter the body; if false, continue after the loop.
Loop end: At the end of the loop body, control returns to its matching loop start. If the condition is false, the flow continues after the loop.
Setup:Select the matching loop start in Settings on the right.
Example:Place it after the operation that increments count; the loop repeats while count is below 5.

How to draw the flow

General steps

Drag a shape from the node list on the left onto the central canvas.
Arrange shapes in operation order from Start to End. Drag nodes to position them.
Click a node to open its menu, then choose Edit operation to set its name or expression.

Placement and settings by shape

Terminal (start/end)

Placement:Place one Start at the beginning of the flow and an End at its end.

Connection:Connect one OUT from Start to the next node, and connect only an IN to End. End has no OUT.

Process

Settings:Choose Edit operation to enter a display name and operation expression. Use one assignment per line.

Connection:Connect the previous node to IN and one OUT to the next node. Example:count = count + 1

Decision

Settings:Enter a condition that evaluates to true or false or

Connection:Connect the lower Yes and No outputs to one node each. Example:score >= 70

Display

Settings:Enter a display name and output expression. When run, the result is added to Output on the right.

Connection:Connect the previous node to IN and one OUT to the next node. Example:"count=" + count

Loop start

Settings:Enter a condition and pair this node with its loop end using the same color and number.

Connection:Connect one OUT to the start of the loop body. When the condition is false, the flow automatically moves past the loop.

Loop end

Settings:Select the matching loop start in Settings on the right, then place this node at the end of the loop body.

Connection:Connect one OUT to the operation after the loop. Do not draw a direct line back to the loop start; the flow returns automatically during execution.

Connections and rules

Select Connect mode or choose Start connection from a node menu.
Click OUT below the source node, or click Yes / No on a decision node.
Click IN above the destination node to complete the connection.
A regular OUT can have one connection. An IN can accept connections from multiple nodes.
Connecting the same OUT to another node automatically replaces its previous connection.
To delete a connector, select it and press Delete.
Drag nodes to arrange them so connectors do not cross.

One OUT only

Process A

Process B

Only one connection can leave an OUT. Connecting it to another node replaces the old line.

IN accepts multiple connections

Process A

Process B

Process C

Multiple OUT ports can connect to the same node’s IN. Use this to merge flows after a branch.

Connect Yes and No separately only on a decision. Pair loop start and loop end in Settings; do not connect them directly to each other.

About the panels on the right

Output: Displays results from executed Display nodes in order. Results from nodes skipped by a branch are not added.
Note:Before running, “No output yet” is shown. During execution, the Output panel opens automatically.
Variables: Add variable names, types, and initial values. Current values are shown during execution.
History: Review visited nodes, condition checks, and variable changes step by step.
Settings: Edit the selected node’s display name, operation, condition, or output expression.

How to inspect output

Enter an output expression in the Display node settings. Example:"count=" + count
Use Step or Run to advance to the Display node.
When a Display node runs, its evaluated result is added to Output.
If a Display node runs multiple times in a loop, each result is added in order.
To inspect output from the beginning, select Clear in edit mode before running.

Example:Variables count is 1 . Then the output expression "count=" + count produces count=1 .

Editing is disabled during execution; the right panel shows actual variable values and output. Select End run to return to editing.

How to run it

StepRuns one current node.

RunRuns automatically at the selected speed.

PausePauses continuous execution.

End runEnds run mode and returns to editing.

Speed: NormalSelect the speed for continuous execution.

Drag a shape from the node list on the left onto the central canvas.
Drag nodes on the canvas to position them.
Click a node to open its menu and choose Edit operation to change its contents.
Select a connector by clicking it, then press Delete to remove it.
Step runs one node at a time; Run executes automatically. Select End run to stop.
Projects are saved on this device and can be backed up as JSON.

Arithmetic operators and examples

Type	Symbol	Example	Meaning
Addition	`+`	`score + 10`	Add 10 to score
Subtraction	`-`	`count - 1`	Subtract 1 from count
Multiplication	`*`	`price * quantity`	Multiply price by quantity
Division	`/`	`total / 2`	Divide total by 2
Remainder	`%`	`count % 2 == 0`	Check whether it is even

Comparison and logical operators

Type	Symbol	Example	Meaning
Equal	`==`	`score == 70`	score equals 70
Not equal	`!=`	`score != 0`	score is not 0
Greater than	`>`	`score > 70`	score is greater than 70
Greater than or equal to	`>=`	`score >= 70`	score is at least 70
Less than	`<`	`count < 5`	count is less than 5
Less than or equal to	`<=`	`count <= 5`	count is at most 5
AND	`&&`	`score >= 70 && count < 5`	Both conditions are true
or	`\|\|`	`score < 0 \|\| score > 100`	Either condition is true
NOT	`!`	`!isFinished`	Inverts a boolean value

= assigns a value in an operation, while== compares values in a condition.!isFinished When using isFinished register it as a boolean variable. Group complex conditions with parentheses, such as (score + bonus) >= 70 .

Troubleshooting execution errors

Error message Reasons the flow cannot run appear below the run controls. Problem nodes are also marked on the canvas; fix each issue shown.

For a structure error, check the node name and its connections in the message.
Click the node, choose Edit operation, and correct its operation, condition, or output expression.
If a connection is missing, connect an output port to the target input port.
If an error occurs during execution, select End run, make corrections, and check again with Step.

Check connections and structure

Use one Start node and connect the flow from Start to End.
Give every node except decisions and End exactly one next connection.
Connect one Yes and one No branch to each decision.
Pair each loop start with its loop end using the same number.

Check expressions and values

Use one assignment per line and register each variable before using it.
Do not mix number, string, and boolean types.
For decision and loop conditions, the result must be true or false .
Check for division by zero and unclosed parentheses or strings.