Feature Request: Improve Diagram Layout

[amitnovick]

Description

Currently, the Visualizer layout algorithm isn't producing very readable diagrams.
The following is a comparison between a diagram produced by PlantUML to one made by XState-Viz:

• 🖼️ PlantUML diagram from source Gist
• 🖼️ XState-Viz diagram taken as a screenshot from the Visualizer from source Gist.

Details

• Transition arrows are climbing over other objects (instead of restructuring the nodes when possible and/or expanding the diagram in height to fit better):
  • 🖼️ Over other transition arrows
  • 🖼️ Over state node
  • 🖼️ Over event names
• Transition arrows 🖼️ turn too sharply
• Transition arrows 🖼️ converge near a shared target state node (instead of: 1. creating a fork OR 2. target distinct points on the target state node)

Suggestion

Two possible approaches:

• Experiment and tweak the layout algorithm and/or the resizing of the diagram.
• Research layout solutions implemented in similar tools and try to adapt them for use in our Visualizer system.

[davidkpiano]

Might be useful to implement some pathfinding algorithm to find the most optimal path around state nodes to a target state node which avoids "areas of interest" (such as state names, event labels, actions, etc.)

[jdpigeon]

Integrating cola.js into the cytoscape-based graph viz may be enough to make nice force-directed graph layouts. This example could be useful: https://js.cytoscape.org/demos/colajs-graph/

Unfortunately I don't have a ton of time out of work to implement something like this, but I'll subscribe to this issue so that I can come back to it during Hacktober or something

[carloslfu]

I was playing with https://github.com/OpenKieler/elkjs and it works pretty well. SCION a project in which XState is a backer, has a visualizer https://gitlab.com/scion-scxml/schviz which uses KlayJS that is an older version of ELKjs and it works. One option I evaluated is to modify https://gitlab.com/scion-scxml/schviz to support the XState format and this way we could reuse the layout logic.

[tclain]

If we want to go one step further and want to have an bidirectionnal editing experience (from diagram to code), do we want to reinvent the wheel ?

Could we investigate a more robust diagram base, so we can plugin graph layouts and interactivity ?

@davidkpiano thoughts appreciated.

anyway I'd like to experiment on that.

[carloslfu]

@tclain, I think https://github.com/OpenKieler/elkjs works pretty well. I am not sure but I think @davidkpiano is working on an improved visualizer, I saw something about it on Twitter.

[tclain]

thanks @carloslfu !
will take a look.

I'm investigating:

• sprotty (full typescript support and have layout features vial elk)
• mxgraph (the base tech behind draw.io/diagrams.net (very capable but no great typescript support)
• jointjs (very nice as well, the dual licencing might be an issue though)

I think that having stable xstate viz/editor will be definitely a huge step. @davidkpiano I'm working and researching on that personnally, if there is an ongoing effort and I can help in any way let me know.