xstate-viz
xstate-viz copied to clipboard
statecharts
Feature Request: Improve Diagram Layout
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):
- 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.
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.)
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
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.
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.
@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.
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.