Visually Tracking / Monitoring Workflow(WF) 4.0

I am planning to build a custom web application in ASP.NET 4.0 using WF 4.0, the user wants ability to modify workflows himself, for this we will be using a WPF client which the user can use and we will do workflow re-hosting, lots of blogs and guidance is available for this.

But I am not sure how to the meet one requirement where the user wants to see/track a visual representation (diagram/image) of the workflow, depicting what stages are over, what is the current stage etc. This needs to be done on a web page. Possibly the same workflow with icons depicting status. This is something similar to the visual available for Visio workflows in SharePoint 2010. Even AgilePoint workflows provide such a view.

Similar question here, but its for Wi开发者_如何学GonForms/WPF I guess. And I need this for ASP.NET.

Any ideas?

There's an interesting sample that might be useful: AppFabric Reference Implementation: Managing the LifeCycle of a WorkFlow Service. It deals with re-hosting the designer, and showing state on this design surface, ie. how far the workflow has come. It basically utilizes the data format found in the AppFabric Monitoring store to achieve this. The sample is a winforms app but the same principles would apply in a web based scenario.

I've created my own implementation of the debugger that you get in the WPF workflow designer. The original idea came from Andrew Zhu's book http://xhinker.com/post/WF4Microsoft-Windows-Workflow-Foundation-40-Cookbook-is-available-now.aspx, I also used reflector to see what the implmentation of the IDesignerDebugView interface (http://msdn.microsoft.com/en-us/library/system.activities.presentation.debug.idesignerdebugview.aspx), then added that to my rehosted workflow designer.

I have not found a nice way to convert the workflow designer view into an image to show on the web, we currently deliver this aspect as a clickonce application.