考虑使用桑基图来帮助可视化工作流程。

我已经看到用于描述工作流程的层次结构图(正如您在问题中所说明的那样),但一直认为它们缺少一些东西——例如,可以有两个父节点的节点。桑基图解决了这个问题,并提供了一种简单的方法来介绍“节点”之间移动量的概念。此外,根据定义,流程图是“一种表示工作流或流程的图表”。桑基图看起来比层次结构图流动得多。
有关更多信息,请查看David Pallmann 关于使用桑基图可视化工作流的令人信服的案例。
通过 fork Highcharts 的 Sankey 演示并将系列数据自定义为以下内容,我能够在 10 分钟内创建此工作流可视化:
data: [
['Event Submission', 'Event Submission Close', 250],
['Event Submission', 'Create Incident', 750],
['Event Submission Close', 'Approve', 240],
['Event Submission Close', 'Reject', 10],
['Approve', 'After Action Review', 640],
['Create Incident', 'Contained', 400],
['Create Incident', 'Provide Analysis', 150],
['Create Incident', 'Incident Close', 125],
['Contained', 'Containment Approval', 370],
['Contained', 'Containment Rejection', 30],
['Incident Close', 'Approve', 110],
['Incident Close', 'Reject', 15],
['Containment Approval', 'Eradicated', 320],
['Containment Approval', 'Provide Analysis', 50],
['Eradicated', 'Eradication Approval', 315],
['Eradicated', 'Eradication Rejection', 5],
['Eradication Approval', 'Recovered', 315],
['Eradication Approval', 'Provide Analysis', 5],
['Recovered', 'Approve', 310],
['Recovered', 'Reject', 5]
]
因此,在您的情况下,如果您能找到自动映射元素如何相互关联的东西,您只需将这些映射格式化为上述语法,Highcharts 就能完成剩下的工作!