1

I am using windows workflow foundation in version 4. I want to ask if there is any way to simply show/visualize working workflow instance on the website using html5 and js. I dont want to use re-hosting designer. I found WorkflowInspectionServices class, but to be honest it is not so easy to extract workflow graph structure from that(different handling parallel activities or flowcharts). And is the workflow tracking system only way for discovering workflow instance state/progress?

Has anyone tried anything similar? Any ideas would be helpful.

Mat38
  • 97
  • 1
  • 12

2 Answers2

0

The WorkflowDesigner is a WPF component so doesn't play well with HTML but as you din't want to use that I guess not very important although you could use it to generate an image of the workflow and display that in the browser. I am not aware of any viewer that turns an workflow definition into an HTML structure. XAML is just XML so it would certainly be possible but I doubt it would be a simple exercise to do as you would have to duplicate at least part of all the activity designers.

Maurice
  • 27,582
  • 5
  • 49
  • 62
  • First of all, thank you for reply. I was considering putting just an image, but I dont like that idea because there is no interaction with the user. I have no control over getting information where did he clicked(every image can be different, connecting clicked position with activity dynamically also doesnt sound nice) and this would be helpful if I wish to show more complicated, nested flows. It doesnt have to be html structure out of box, it would be nice if I could extract graph structure from framework objects without knowing structure of activities(sequence, flowcharts, parallel). – Mat38 Aug 09 '12 at 06:08
  • I am afraid there is no generic way of parsing unknown activity classes and understanding their layout/intent. – Maurice Aug 09 '12 at 07:16
0

Consider using a Sankey Diagram to help visualize workflow.

visualization of a security incident workflow

I've seen hierarchy charts used to depict workflow, but always thought they were missing something--nodes that can have two parents, for example. A Sankey diagram solves that problem, and provides a trivial way to introduce the concept of how much volume moves between "nodes". Also, by definition, a flowchart is "a type of diagram that represents a workflow or process". The Sankey diagram looks like it's flowing much more than a hierarchy chart.

For more information, check out David Pallmann's convincing case for using Sankey diagrams to visualize workflow.

I was able to create this workflow visualization in 10 minutes by forking the Highcharts's Sankey demo and customizing the series data to the following:

    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]
    ]
Jeromy French
  • 11,812
  • 19
  • 76
  • 129
  • 1
    This answer is a blatant repurposing of my answer to a similar question: https://stackoverflow.com/a/60954545/1430996 – Jeromy French Mar 31 '20 at 16:04