search

statelyai / xstate

Actor-based state management & orchestration for complex app logic.
https://stately.ai/docs
MIT License
27.13k stars 1.25k forks source link

Visualize in ascii diagrams #90

Closed KyleAMathews closed 5 years ago

KyleAMathews commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

KyleAMathews commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

https://monodraw.helftone.com/

davidkpiano commented 4 years ago

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

imjuni commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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