告别复杂代码：Automatisch可视化工作流编辑器让流程自动化像搭积木一样简单

你是否曾因需要编写代码来连接不同应用而头疼？是否梦想过用拖拽方式就能搭建自动化工作流？Automatisch的可视化工作流编辑器正是为解决这些痛点而生。本文将带你深入了解这个基于React Flow构建的强大工具，只需简单几步，即可完成从Typeform表单到Slack通知的自动化流程，无需任何编程经验。

核心概念：工作流的基本构成单元

在开始使用编辑器前，先了解几个关键概念：

• App（应用）：Automatisch支持的第三方服务，如Typeform、Slack、GitHub等。完整列表可查看可用应用文档。

• Connection（连接）：存储应用凭证的安全机制，允许Automatisch代表用户操作第三方服务。

• Flow（工作流）：由多个步骤组成的自动化流程，例如"当Typeform收到新提交时，自动发送消息到Slack频道"。

• Step（步骤）：工作流的基本单元，分为触发步骤（Trigger）和动作步骤（Action）。触发步骤启动工作流，动作步骤执行具体操作。

编辑器架构：React Flow驱动的可视化引擎

Automatisch工作流编辑器的核心实现位于packages/web/src/components/Editor/index.jsx，基于React Flow构建，主要包含以下组件：

1. 画布核心

编辑器使用React Flow的ReactFlow组件作为画布基础，配置了节点和边的交互规则：

<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  nodeTypes={nodeTypes}
  edgeTypes={edgeTypes}
  nodesDraggable={false}  // 禁用节点拖拽，保持布局整洁
  panOnScrollMode={PanOnScrollMode.Vertical}  // 垂直滚动平移
  minZoom={1}
  maxZoom={1}  // 固定缩放比例，确保流程清晰
/>

2. 节点与边

• 节点组件：每个步骤对应一个FlowStepNode，显示应用图标、名称和状态：

<NodeWrapper className="nodrag">
  <NodeInnerWrapper>
    <Handle type="target" position={Position.Top} />
    <FlowStep step={step} onSelect={onStepSelect} onDelete={onStepDelete} />
    <Handle type="source" position={Position.Bottom} />
  </NodeInnerWrapper>
</NodeWrapper>

• 边组件：连接步骤的线条，实现于Edge组件，支持添加新步骤的交互点。

3. 侧边栏

StepDetailsSidebar提供步骤配置界面，根据选择的步骤类型显示不同配置项，如应用选择、参数设置等。

实战指南：创建Typeform到Slack的工作流

以下是使用编辑器创建自动化工作流的详细步骤：

步骤1：创建应用连接

1. 进入My Apps页面，点击Add connection按钮
2. 选择Typeform，按提示输入API凭证，完成连接创建
3. 重复上述步骤创建Slack连接

步骤2：构建工作流

添加触发步骤（Trigger）

1. 在流程创建页面点击Create flow
2. 选择Typeform作为触发应用
3. 选择New entry作为触发事件
4. 选择之前创建的Typeform连接
5. 选择目标表单，点击Test & Continue验证连接

添加动作步骤（Action）

1. 点击触发步骤下方的"+"图标添加动作步骤
2. 选择Slack作为动作应用
3. 选择Send a message to channel动作
4. 选择Slack连接和目标频道
5. 编辑消息内容，可使用触发步骤的变量（如{{steps.trigger.output.fields.name}}）
6. 点击Test & Continue验证动作

步骤3：发布与监控

1. 点击右上角Publish按钮激活工作流
2. 工作流将自动执行，可在执行记录页面查看运行状态
3. 如需修改，需先点击Unpublish，编辑后重新发布

高级特性：提升工作流效率

1. 步骤管理

• 删除步骤：点击步骤卡片右上角的删除图标，编辑器会自动重排剩余步骤
• 调整顺序：通过拖拽调整步骤位置（高级模式）
• 复制步骤：右键点击步骤选择"Duplicate"快速创建相似步骤

2. 错误处理

编辑器内置错误处理机制，当步骤配置有误时：

• 步骤卡片会显示红色警告图标
• 侧边栏会高亮显示错误字段
• 提供详细错误信息和修复建议

3. 模板库

Automatisch提供多种预制模板，可在模板页面快速创建常见工作流，如：

• GitHub issue自动分配到Slack
• Google Sheets新行自动创建Trello卡片
• RSS订阅更新发送邮件通知

结语：人人可用的自动化工具

Automatisch工作流编辑器通过直观的可视化界面，将复杂的自动化流程简化为拖拽操作。无论你是运营人员、产品经理还是开发人员，都能在几分钟内创建强大的自动化工作流，节省宝贵的时间和精力。

立即访问项目仓库开始使用，或查看开发文档了解更多高级功能。

提示：如需要特定应用集成，可通过集成请求表单提交需求。

---

读完本文你将获得：

• 理解工作流自动化的核心概念
• 掌握使用Automatisch编辑器创建流程的方法
• 了解如何优化和扩展工作流
• 解决常见自动化场景的实施方案

现在就动手创建你的第一个自动化工作流吧！