Visualize in ascii diagrams

[KyleAMathews]

It could be really cool to be able to generate diagrams of statecharts in ascii to embed in code comments. Not sure how easy it'd be easy to visualize complex statecharts in 80 character width or whatever but it'd be really valuable for browsing through a large code base.

[KyleAMathews]

Perhaps something just as good would be if there were a service that you could link to that'd create a visualization on the fly. Connect to GitHub and extract the JSON and show a visualization.

[davidkpiano]

Hmm, I'm guessing this may come in handy: http://search.cpan.org/~tels/Graph-Easy/bin/graph-easy

[KyleAMathews]

Oh nice! Yeah, wrap that in a little CLI tool that scans your code base, extracts out the charts, generates the ascii visualization, and inserts it above the xstate definition.

[johncmunson]

For real world statecharts, I'm skeptical of how practical a medium ASCII would be. For one, not sure how legible it would be. Two, I don't think the generated ASCII would be compact enough to be conveniently inlined into source code comments.

I could be totally wrong with my concerns above, but perhaps a viable alternative is to explore what could be done with Graphviz and the associated DOT markup language. Pretty sure there are tools to export Graphviz to SVG. Similar to remark which has been useful in the Gatsby project, there exists redot which can be used for manipulating the Graphviz AST.

[davidkpiano]

Found a cool example of this over here: https://github.com/kddeisz/fast_underscore/blob/master/ext/fast_underscore/fast_underscore.c#L61-L120

[johnyanarella]

This app is great for manually drawing them, in the meantime:

https://monodraw.helftone.com/

[davidkpiano]

Got a plan! https://dot-to-ascii.ggerganov.com/

[imjuni]

I think Mermaid that is great opensource drawing tool. If xsate can extract transition flow, easily can draw mermaid chart. Also Mermaid can export png, pdf, svg. How about it?

[FokkeZB]

@davidkpiano both this request and #528 (which forward to this) are closed. We'd love to be able to generate an SVG (so more #528 than this ASCII one) for documentation of each machine, in a pre-commit hook.

Is this still on the roadmap?

[mattpocock]

This could also fold in with the codegen workflow. Run a single CLI command, output anything the user requires (types, ASCII, xstate-viz built as html) via a plugin system. You could run it on watch mode like Storybook's dev server to rebuild on file change.

[davidkpiano]

@FokkeZB Yes, it's here: https://github.com/davidkpiano/xstate/projects/1#card-40599007