什么是流程图？
用自上而下的图形和连接线表示任务或程序流程的图表。它能直观呈现处理顺序、条件分支和循环，有助于整理和说明流程。
流程图模拟器
流程图模拟器
创建包含变量、运算、分支和循环的流程图，并在运行时跟踪数值变化。
完全在浏览器中运行
自动保存
JSON 导入和导出
不会执行任意 JavaScript
建议使用电脑
建议使用电脑：使用鼠标更适合放置、连接和编辑节点。
运行模式：无法编辑。此处显示变量实际值和输出。选择“结束运行”即可返回编辑模式。
EDITOR
流程图
100%
放置节点以创建流程
当前运行步骤
—0步
开始运行后，这里会显示当前处理内容。
Delete：删除所选内容Ctrl+Z UndoCtrl+Y RedoCtrl+S：保存双击：设置
HOW TO USE
创建流程、运行并查看数值变化
从左侧添加节点，并将输出端口连接到下一个节点。可在右侧的“设置”中编辑处理、条件和显示表达式。
为什么需要？ 仅排列图形无法确认条件分支方向、变量变化或循环是否结束。实际运行可以检查处理是否按预期顺序进行。
适用场景 可用于编程前整理流程、课堂或说明中确认步骤、检查分支和循环，以及在实现前查找错误。
- 打开右侧的“变量”，添加数字、字符串或布尔变量
- 从开始连接到结束，并为每个判断节点添加 Yes / No 两个分支
- 选择“单步运行”以查看当前节点和变量变化
- 完成的流程可保存为 JSON，多个版本可在“打开”中管理
表达式使用受限且安全的语言计算。不会执行任意 JavaScript，也不会将流程图或变量发送到浏览器之外。
GUIDE
流程图基础与操作方法
流程图用图形和连接线表示处理顺序和条件分支。此工具可以直接运行您创建的流程。
各图形的作用
- 端点（开始／结束）
- 表示流程的开始和结束。
设置方法：从左侧列表添加开始或结束端点，也可以在右侧设置中更改端点类型。
示例：开始 → 处理 → 结束 - 处理
- 表示要执行的操作，例如赋值或计算。
设置方法：在右侧设置中输入显示名称和处理表达式，每行写一个赋值表达式。
示例：显示名称“计数递增”和处理表达式count = count + 1 - 判断
- 判断条件表达式，并分为 Yes 和 No 两个方向。
设置方法：在右侧设置中输入条件表达式，并分别连接 Yes 和 No 输出。
示例：条件表达式score >= 70。为真时前往 Yes，为假时前往 No。 - 显示
- 将计算结果或消息添加到右侧的“输出”。
设置方法：在右侧设置中输入显示名称和输出表达式。
示例：输出表达式"count=" + count - 循环开始
- 条件为真时进入循环主体，为假时则继续到循环之后。
设置方法：在右侧设置中输入条件表达式，并指定对应的循环结束节点。
示例：条件表达式count < 5。为真时进入主体，为假时继续到循环之后。 - 循环结束
- 在循环主体末尾返回对应的循环开始节点。开始条件为假时，则继续到循环之后的处理。
设置方法：在右侧设置中选择对应的循环开始节点。
示例：将它放在 count 递增操作之后，并在 count 小于 5 时重复。
图形绘制方法
通用创建步骤
- 将左侧节点列表中的图形拖放到中央画布。
- 按处理顺序从开始到结束放置图形，并拖动节点调整位置。
- 点击节点打开菜单，然后选择“编辑处理”来设置名称或表达式。
各图形的放置和设置
端点（开始／结束）
放置：在流程开头放置一个开始节点，并在末尾放置结束节点。
连接：从开始节点只连接一条 OUT 到下一个节点，结束节点仅连接 IN，不连接 OUT。
处理
设置：选择“编辑处理”输入显示名称和处理表达式，每行一个赋值。
连接：将前一个节点连接到 IN，再将一个 OUT 连接到下一个节点。示例：count = count + 1
判断
设置：输入条件表达式，结果应为 true 或 false 。
连接：将下方的 Yes 和 No 分别连接到一个后续节点。示例：score >= 70
显示
设置：输入显示名称和输出表达式。运行后，结果会添加到右侧的“输出”。
连接：将前一个节点连接到 IN，再将一个 OUT 连接到下一个节点。示例："count=" + count
循环开始
设置：输入条件表达式，并与颜色和编号相同的循环结束节点配对。
连接：OUT 只连接一条到循环主体开头。条件为 false 时会自动移至循环之后。
循环结束
设置：在右侧设置中选择对应的循环开始节点，并将此节点放在循环主体末尾。
连接：OUT 只连接一条到循环之后的处理。不要直接连回循环开始，运行时会自动返回。
连接方式和规则
- 点击“连接模式”，或从节点菜单中选择“开始连接”。
- 点击源节点下方的 OUT，或判断节点的 Yes / No。
- 点击目标节点上方的 IN 即可完成连接。
- 普通 OUT 只能连接一条线，IN 可以接受多个节点的连接。
- 将同一个 OUT 连接到其他节点时，旧连接会自动替换。
- 要删除连接线，请选中线条并按 Delete。
- 拖动节点调整位置，避免连接线交叉。
处理 A
处理 B
每个 OUT 只能输出一条连接。改连到其他节点时，旧连接会被替换。
处理 A
处理 B
处理 C
多个 OUT 可以连接到同一节点的 IN，适用于合并分支后的流程。
只有判断节点需要分别连接 Yes 和 No。请在设置中配对循环开始和结束，不要直接连接两者。
右侧面板说明
- 输出
- 按运行顺序显示已执行的显示节点结果。分支中跳过的节点不会添加结果。
注意：运行前会显示“暂无输出”，运行时会自动打开“输出”面板。 - 变量
- 设置变量名称、类型和初始值。运行期间可以查看当前实际值。
- 历史记录
- 逐步查看经过的节点、条件判断和变量变化。
- 设置
- 编辑所选节点的显示名称、处理、条件或输出表达式。
查看输出的方法
- 在显示节点设置中输入输出表达式。示例：
"count=" + count - 使用“单步运行”或“连续运行”前进到显示节点。
- 显示节点运行后，表达式计算结果会添加到“输出”。
- 如果显示节点在循环中多次运行，每次结果都会按顺序添加。
- 要从头查看输出，请在编辑模式下点击“清除”后再运行。
示例：变量 count 为 1 时，显示表达式 "count=" + count 的输出为 count=1 。
运行期间无法编辑，右侧会显示变量实际值和输出。选择“结束运行”即可返回编辑模式。
运行方式
只运行当前节点。
按设定速度自动运行。
暂停连续运行。
结束运行模式并返回编辑。
选择连续运行速度。
- 将左侧节点列表中的图形拖放到中央画布。
- 拖动画布上的节点以调整位置。
- 点击节点打开菜单，然后选择“编辑处理”以更改内容。
- 点击连接线选中，再按 Delete 删除。
- “单步运行”逐个运行节点；“连续运行”自动运行。点击“结束运行”可停止。
- 项目会自动保存在此设备，也可以保存为 JSON 备份。
条件表达式中的算术运算和示例
| 类型 | 符号 | 示例 | 含义 |
|---|---|---|---|
| 加法 | + | score + 10 | score 加 10 |
| 减法 | - | count - 1 | count 减 1 |
| 乘法 | * | price * quantity | price 乘以 quantity |
| 除法 | / | total / 2 | total 除以 2 |
| 余数 | % | count % 2 == 0 | 判断是否为偶数 |
比较和逻辑运算符
| 类型 | 符号 | 示例 | 含义 |
|---|---|---|---|
| 等于 | == | score == 70 | score 等于 70 |
| 不等于 | != | score != 0 | score 不等于 0 |
| 大于 | > | score > 70 | score 大于 70 |
| 大于或等于 | >= | score >= 70 | score 大于或等于 70 |
| 小于 | < | count < 5 | count 小于 5 |
| 小于或等于 | <= | count <= 5 | count 小于或等于 5 |
| 且 | && | score >= 70 && count < 5 | 左右条件都为真 |
| 或 | || | score < 0 || score > 100 | 其中一个条件为真 |
| 非 | ! | !isFinished | 反转布尔值 |
= 是处理中赋值的符号，而== 是在条件中比较值的符号。!isFinished 使用isFinished 请将它注册为布尔变量。复杂条件请用括号组合，例如 (score + bonus) >= 70 。
运行错误的处理方法
错误提示 无法运行的原因会显示在运行按钮下方。画布也会标出有问题的节点，请根据提示逐项修复。
- 如果是结构错误，请检查提示中的节点名称和连接内容。
- 点击节点并选择“编辑处理”，修正处理、条件或输出表达式。
- 如果缺少连接，请将输出端口连接到目标输入端口。
- 运行中出现错误时，点击“结束运行”返回编辑模式，修复后再用“单步运行”检查。
检查连接和结构
- 只使用一个开始节点，并将流程从开始连接到结束。
- 除判断和结束节点外，每个节点都应有一条后续连接。
- 每个判断节点都要各连接一条 Yes 和 No。
- 用相同编号配对循环开始和结束节点。
检查表达式和值
- 每行写一个赋值，并先注册要使用的变量。
- 请勿混用数字、字符串和布尔类型。
- 判断和循环条件表达式的结果必须为
true或false。 - 检查是否除以 0，以及括号或字符串是否未闭合。