Updating Flow Studio's Flow Diagram feature

A customer reached out regarding Flow Diagram in Flow Studio - there was a bug preventing it from being generated. This was probably an issue that had been going on for some time - Flow Diagram was a feature last updated since June 2020. I’m very grateful when customers reach out with an email to ask me to look into something - thank you for bringing this to my attention.

In this case, we had a simple syntax bug, and then an evening of playing with Flow definitions and Mermaid JS graph syntax to give it some overdue love.

In Flow Studio’s drawing, we draw a subgraph whenever we see a scoped action: Scope, If, While, For Each loops. But in Mermaid the arrows must be linked to a node. So Flow Studio draws an imaginary “/End Scope” action, for lines to connect to at the bottom of the graph.

Previous versions don’t attach the line from the end of a scope correctly to the parent, leaving the crazy picture we see on the left.

After this update, we now get the cleaned logical version on the right.

When following “Non Succeeded” run-after path in a flow definition, we now draw a dotted arrow instead of the traditional solid line.
You can try our latest test build on https://dev.flowstudio.app/

Flow Diagrams are designed mainly for makers to document their flows with a diagram. Both Mermaid JS markdown is available, as well as generated image.

Let me know if you have any feedback.