FlowZap - Not another Diagramming tool

FlowZap 面向真正的业务用户——会计、客户服务代表、工厂经理——帮助他们快速、清晰地绘制流程，而无需任何技术术语。以下是一步步教你如何使用 FlowZap Code（FlowZap 代码）来编写和编辑流程图的指南。

什么是 FlowZap Code？

FlowZap Code 是一种简洁的文本语言，用来可视化地描述你的工作流程。只需几行简单的代码即可定义步骤（节点）、连接（边），并将所有内容组织到与你的实际团队或角色对应的泳道（lane）中。完全不需要编程背景。

1. 使用泳道组织流程

把泳道想象成图表中的行，每一行代表一个团队、部门或角色。每条泳道把相关的步骤分组在一起。

sales {
  ...nodes...
  ...edges...
}

accounting {
  ...nodes...
  ...edges...
}

泳道名称（如 sales、accounting）由你决定。
使用清晰易懂的名称，更方便阅读。

2. 添加步骤（节点）

在每条泳道中，列出流程中的每一步。每一步称为节点（node）。

n1: circle      label:"开始"
n2: rectangle   label:"录入数据"
n3: taskbox     owner:"Alice" description:"验证输入" system:"表单应用"
n4: diamond     label:"是否有效？"

编写节点的要素：

ID: 节点的简短标识（如 n1、n2）。
形状: 选择 circle、rectangle、diamond 或 taskbox。
属性:
- label:"文本" — 显示在图上的文字。
- 对于 taskbox，还可添加：owner:"负责人"、description:"说明"、system:"系统名称"。

属性顺序不重要，可按需组合。

3. 用边连接步骤

在定义完节点后，描述各步骤之间的连接关系。

n1.handle(right)  -> n2.handle(left)   [label="下一步"]
n2.handle(bottom) -> n3.handle(top)

边的写法要点：

起点: 起始节点及连接的位置（例如 n1.handle(right)）。
终点: 目标节点及连接的位置（例如 n2.handle(left)）。
箭头: 始终使用 -> 指示方向。
标签（可选）: 使用 [label="文本"] 添加连线文字。

4. 跨泳道连接

如果步骤跨越泳道，只需在节点前加上泳道名：

n3.handle(bottom) -> accounting.n5.handle(top) [label="发送审核"]

5. 完整示例

sales {
  n1: circle      label:"开始"
  n2: rectangle   label:"收集信息"
  n3: diamond     label:"需要审核？"
  n4: circle      label:"结束"

  n1.handle(right)  -> n2.handle(left)
  n2.handle(right)  -> n3.handle(left)
  n3.handle(top)    -> n4.handle(left)       [label="否"]
  n3.handle(bottom) -> accounting.n5.handle(top) [label="是"]
}

accounting {
  n5: rectangle label:"审核详情"
  n6: circle    label:"审核结束"

  n5.handle(right) -> n6.handle(left)
}

6. 小贴士与最佳实践

保持 ID 简短: 使用 n1、n2 等简短编号。
借助 AI: 让你喜欢的 AI 助手为你起草第一版 FlowZap Code。
自动布局: 选中 Auto-Layout 让系统尝试自动排版，后续可手动微调。
注释: 可以在泳道上方使用 // 添加注释，但最好不要在边上添加注释。
连线标签: 可将 label 置空（label=""）或省略。

只需在编辑器中编写或粘贴 FlowZap Code，然后点击 “更新图表 (Update Diagram)”，你的流程将立即呈现——无需任何技术技能！