Hi, I have been experimenting with web apps to draw flowcharts of algorithms. Didn’t yet fall in love with any of them. Do you have any recommendations for a tool that is particularly pleasant to use for drawing algorithms? Thank you.
1 Like
Hello there.
I am not sure what you mean by “drawing algorithms”, but if you mean visualisation of code, I would recommend: https://p5js.org/
Also, if you need something to help you figure out how best to use it: Search Coding Train on YouTube. A man named Daniel Shiffman runs the channel, and has many videos on using p5.js for the purpose of visualising algorithms.
Hope this helps
1 Like
Thanks, that must be a cool library. I once stumbled upon a p5js book in a store and it had lots of interesting examples.
I guess my wording was somewhat ambiguous. I meant drawing a flowchart to think through an algorithm problem, before starting to code, like so:
Mermaid is pretty good
https://mermaid-js.github.io/mermaid/
Plant UML is also good, has pretty good tooling
1 Like
Oh, well, I have used draw.io for many flowcharts. Generally, it is excellent for UML based design, but has a myriad of other templates/options.
2 Likes
If you don’t need a web app, Visual Paradigm is really good and has a free community edition: https://www.visual-paradigm.com/download/community.jsp
1 Like
Hi @michaelsndr, I’m also currently searching for a code generator/excutable diagram[0]. At the moment I have tried:
-
xstate[1][2]:
Has a ‘Visualizer’ [3] that let you write the configuration for the diagram, so, is more a description than a drawing. Is really good, and is easy to use with reactjs[4] -
scdlang[5] and state-machine-cat[6]:
These are interesting, but at the moment I can’t add an extended state to the diagram (so they are not that useful for now). -
Yakindu:
I am trying to learn it, but is not open-source. So I am not really sure about this one :? .
There are also “uml modeling language tools”[7] that can generate code from uml/diagrams.
Cheers and happy coding 
notes:
[0] https://statecharts.github.io/
In addition to just using statecharts to model the behaviour in documents separate from the actual running code, it’s possible to use one of various machine formats, both to design the behaviour, and at run-time to actually be the behaviour. The idea is to have a single source of truth that describes the behaviour of a component, and that this single source drives both the actual run-time code, but that it can also be used to generate a precise diagram that visualises the statechart.
[1] Getting Started | XState Docs
[2] XState: Let’s pair program state machines and state charts with David Khourshid:
[4] I wrote my calculator project using xstate and reactsj:
[6] GitHub - sverweij/state-machine-cat: write beautiful state charts 🙀
1 Like
@Sky020 @DanCouper @astv99 @Diego_Perez Thanks guys, for all these recommendations! Cool stuff.
1 Like
Hi @michaelsndr 
,
It might interest you, I am currently writing (in progress) an executable diagram (to use directly in the browser or cli).
You have to describe the diagram using an string with this format (state transition table[0]):
STATE input STATE :action
Here some examples:
- Executable diagram on a browser
- Path highlighting
- Demo:
https://diegoperezm.github.io/simple-machine-config-xstate/examples/browser/trafficlights/index.html
Cheers and happy coding
Notes:
1 Like
Cool. Thanks for sharing it.
1 Like
My personal favorite is Microsoft Visio, but that is because I have been using it for a very time, and I am comfortable with it. When I started coding, Visio was the best at what it does. Nowadays, I am sure that there are probably an abundance of better options.
Googling “UML Diagram tool” should give you multiple options. That said, be careful when downloading ANY type of software! DO YOUR HOMEWORK
1 Like