Flowchart

规格

标签	值
版本	1.3.0（更新于 2026-01-18）
开发者	Labii Inc.
类型	章节
支持配置	是

概述

Flowchart 小插件为实验室团队提供图形化的交互式流程管理工具。它取代并改进了此前的 Workflow 小插件，可独立于工作流程设置运行，让用户能够定义任意步骤序列，并将其显示为相连的节点图。流程图中的每个步骤可以包含描述性元数据、条件分支逻辑、重定向循环以及一个或多个可配置操作。团队按照图表依次执行和完成每个步骤，系统实时跟踪完成状态。该小插件还支持通过 FlowchartGPT 使用 AI 辅助生成步骤，将纯文本工作流程描述自动转换为结构化流程图。

Flowchart 小插件将流程显示为交互式节点图，每个方框代表一个可执行并完成的步骤。

使用场景

• 采购工作流程管理：将从提交申请、经理审查、采购到交付的完整采购审批流程建模为可视化流程图，并在每个步骤提供操作按钮。
• 样本接收工作流程：按规定顺序引导实验室技术人员完成样本接收、贴标、质量检查和存储，并跟踪每个步骤的完成情况。
• 实验方案执行：将多阶段实验方案拆分为独立步骤，并提供条件分支（例如通过/失败决策节点）和重复操作的重定向循环。
• 入职与培训工作流程：为新团队成员创建分步入职检查清单，并在每个步骤中提供相关文档和表单链接。
• 合规流程：通过自动记录完成人员和时间戳的审计就绪完成记录，跟踪受监管程序（GLP、GMP）。
• 自动化下游操作：为步骤附加工作流程执行或 URL 打开操作，使完成步骤时自动触发下一项操作。

界面

只读视图

只读视图将渲染后的流程图显示为由相连节点组成的交互式图。每个节点代表一个步骤；节点根据配置的颜色进行颜色编码，已完成步骤以绿色突出显示。点击任意节点会打开步骤卡片覆盖层，其中显示步骤名称、说明和可用的操作按钮。

• Diagram Navigation：点击任意节点，打开该步骤的步骤卡片。
• Step Card：显示步骤名称、说明、完成状态和配置的操作按钮。使用 Prev 和 Next 在相邻步骤之间移动。
• Complete Step：点击步骤卡片上的 Complete，将步骤标记为已完成。系统自动记录完成人员的姓名和时间戳。图表会以绿色突出显示该步骤，并显示后续步骤。
• Undo Complete：点击步骤卡片上的 Undo，撤销完成状态。
• Perform Step Action：配置的操作按钮会显示在步骤卡片上。点击按钮可打开链接、打开章节或执行工作流程。
• Step Details Panel：点击节点后，右侧详细信息面板还会显示步骤名称、说明、节点操作（Edit、Add child、Duplicate、Delete）和步骤操作。

编辑视图

编辑视图提供步骤管理面板和流程图生成控件。

步骤管理面板列出所有步骤，并提供添加、编辑、删除和重新排序控件。

• Manage Steps Panel：点击 Manage steps 打开面板。所有已定义步骤均列出 Edit、Delete 和重新排序控件。
• Add Step：点击 Add step 创建新步骤（必须先打开 Manage steps 面板）。
• Edit Step：点击任意步骤行中的 Edit 修改字段。
• Delete Step：点击步骤行中的 Delete 移除步骤。
• Reorder Steps：拖放移动手柄，更改步骤顺序。
• Build Flowchart：点击 Build flowchart，根据当前步骤列表生成或重新生成图表。
• Save as Default：点击 Save as default，将当前步骤列表保存为模板，使其自动加载到新记录中。
• FlowchartGPT：在 AI 提示输入框中输入纯文本工作流程描述，然后按 Enter 自动生成步骤。

Add step 表单可完整配置步骤元数据、分支逻辑和操作。

步骤字段

Add step 表单中的每个步骤分为以下部分和字段：

字段	说明
Step Information	核心步骤详细信息的章节标题。
Name	步骤名称。此值用于引用步骤，因此在所有步骤中应保持唯一。
Description	为步骤显示的说明或描述性文本。
Flow and Navigation	关系和路由设置的章节标题。
Parent	此步骤的父步骤，用于将该步骤连接到图表中较早的步骤。
Condition	进入此步骤的条件。只能使用字母和数字。条件显示在步骤之间的箭头上。
Redirect To	选择此步骤要重定向到的步骤，用于创建循环或备用路由。
Redirect To Text	描述重定向操作的文本。默认为 “Redirect to”。
Link	从父步骤到此步骤的链接样式。可用样式包括箭头、双向、开放、虚线、粗线和不可见。
Animation	从父步骤到此步骤的链接动画速度。可用选项为 None、Slow 和 Fast。
Appearance	步骤样式选项的章节标题。
Shape	工作流程图中步骤的形状。请参阅 Mermaid 流程图形状。
Color	工作流程图中步骤的颜色。
Step Actions	配置操作按钮的章节标题。
Action	附加到步骤的一个或多个操作按钮。每个操作包含 Name、Icon、Action type 和 Parameters。

配置

可以配置图表和步骤卡片，以控制显示宽度和步骤执行限制。

点击 Flowchart 小插件标题中的 Configure 按钮，打开设置面板。

配置可用设置：

• Width：流程图的显示宽度，以分数表示（例如 6/12 = 总宽度的 50%）。
• Should disable actions if step not current：选中后，用户无法完成非活动步骤或对其执行操作，从而强制严格按顺序执行。

点击 Save 应用配置。

信息

对于包含多个分支步骤的流程图，建议将 Width 设置为 12/12（全宽），确保无需滚动即可看到所有节点。

注意

启用 Should disable actions if step not current 会强制严格遵循步骤顺序。在生产记录中启用此选项前，请确保流程图步骤顺序正确。

其他功能

Execute Workflow 视图

Execute Workflow 视图将完成工作流程所需的所有资源集中在一个窗口中。

点击 Flowchart 小插件中的 Execute Workflow 按钮。

工作流程视图将打开，并包含：

• 侧边菜单中的流程图，用于确定当前位置
• 内容窗口顶部的步骤详细信息（名称、说明、操作）
• 主体中显示的其他记录章节

使用步骤详细信息面板依次处理每个步骤。您可以完成步骤、执行操作并前往后续步骤，无需离开工作流程视图。

步骤操作

每个步骤可以分配一个或多个操作，并以按钮形式显示在步骤卡片上。支持的操作类型：

操作	说明
OPENLINK	在新标签页中打开任意 URL。
OPENSECTION	在新标签页中打开特定记录章节。
EXECUTEWORKFLOW	使用 UID 执行已配置的 Labii 工作流程。

操作参数字符串示例：

• 打开 URL：{'action': 'OPENLINK', 'parameters': 'https://www.example.com'}
• 打开 Gmail 撰写窗口：{'action': 'OPENLINK', 'parameters': 'https://mail.google.com/mail/?view=cm&fs=1&to=someone@example.com&su=SUBJECT&body=BODY'}
• 打开新样本创建表单：{'action': 'OPENLINK', 'parameters': '/form/rows/experiments/0/?d0RLUmZpZWxkc19kaXNhYmxlZHlIUVo_=is_archived'}
• 执行工作流程：{'action': 'EXECUTEWORKFLOW', 'parameters': 'ehkn0a40x1glqvAFKP'}

使用 AI 生成流程图（FlowchartGPT）

FlowchartGPT 可根据纯文本工作流程描述自动生成流程图步骤，免去为常见流程手动创建步骤的工作。

点击 Manage steps 打开 Manage steps 面板。

找到 AI 提示输入框并输入工作流程的详细描述。清楚列出每个阶段和所有分支条件，可以提高准确性。

按 Enter。AI 会解析描述并自动创建相应的流程图步骤。

检查生成的步骤。根据具体工作流程要求编辑、重新排序或删除步骤。

点击 Build flowchart，根据最终步骤渲染图表。

提示

提供详细、有序的描述可生成更准确的 AI 步骤。加入决策点和条件（例如 “if sample passes QC, proceed to storage; otherwise, reject”），可生成内容更丰富的图表。

保存为默认值

要在多条记录中复用一组步骤，请在 Manage steps 面板中点击 Save as default。当前步骤会预加载到所有包含此 Flowchart 小插件的新记录中，从而节省重复工作流程的设置时间。

最佳实践

设计流程图步骤

• 步骤 Name 应简短明确且只使用字母和数字（例如 ReceiveSample、QCCheck）。
• 在 Description 中编写清晰的说明；这是用户执行流程时在步骤卡片中看到的内容。
• 在分支箭头上使用 Condition 文本，使决策逻辑能够在图表中自行说明（例如 Pass、Fail、Approved）。

强制保持工作流程完整性

• 对于受监管或 GMP 流程，请启用 Should disable actions if step not current，防止乱序完成。
• 对标准化 SOP 使用 Save as default，确保所有新记录均从正确的步骤集开始。
• 分配 EXECUTEWORKFLOW 操作，在适当步骤自动创建下游记录或执行数据操作。

性能和可维护性

• 添加、编辑或重新排序步骤后，始终点击 Build flowchart 重新生成图表并反映最新更改。
• 为保证可读性，单个流程图的步骤应保持在易于管理的数量（通常少于 20 个）。对于较长流程，考虑拆分为通过 EXECUTEWORKFLOW 操作连接的子工作流程。
• 谨慎使用 Redirect To，并清楚记录循环条件，以免循环图令人困惑。

提示

在 Execute Workflow 视图中将 Flowchart 小插件与相关数据章节结合使用，用户无需离开当前页面，即可获得完成步骤所需的全部内容，包括说明、操作和支持数据。

应避免的常见问题

• 避免在步骤 Name 字段中使用空格或特殊字符；这些值在图表语法中用作节点标识符。
• 避免在未先重新指定子步骤父级的情况下删除父步骤，否则会破坏图表连接。
• 正确做法是在移除中间步骤前，重新分配子步骤的 Parent 值。

相关小插件

• Steps：另一种流程管理小插件，以线性列表而非图形化图表显示步骤。如果相比可视化流程图更适合使用顺序检查清单视图，请选择 Steps 小插件。