如何可视化工作流程？

Question

我在版本4中使用Windows工作流基础。我想询问是否有任何方法可以使用html5和js在网站上显示/可视化工作工作流实例。我不想使用重新托管设计师。我找到了WorkflowInspectionServices类，但说实话，从中提取工作流图结构并不是那么容易（不同的处理并行活动或流程图）。工作流跟踪系统是发现工作流实例状态/进度的唯一方法吗？

有没有人尝试过类似的东西？任何想法都会有所帮助。

Answer 1

WorkflowDesigner是一个WPF组件，所以不能很好地使用HTML，但是你不想使用它我觉得不是很重要，尽管你可以用它来生成工作流的图像并在浏览器中显示。我不知道有任何查看器将工作流定义转换为HTML结构。 XAML只是XML所以它肯定是可能的，但我怀疑它是一个简单的练习，因为你必须复制至少部分所有活动设计师。

Answer 2

考虑使用a Sankey Diagram来帮助可视化工作流程。

我已经看到了用于描述工作流的层次结构图，但一直认为它们缺少某些东西，例如可以有两个父级的节点。 Sankey图解决了这个问题，和提供了一种简单的方法来介绍“节点”之间移动多少体积的概念。另外，根据定义，a flowchart is "a type of diagram that represents a workflow or process"。 Sankey图看起来比层级图更具流动性。

有关更多信息，请查看David Pallmann's convincing case for using Sankey diagrams to visualize workflow。

通过分叉this workflow visualization并将系列数据自定义为以下内容，我能够在10分钟内创建the Highcharts's Sankey demo：

    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]
    ]