Recommendations for algorithm drawing tool?

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 :slight_smile:

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] https://xstate.js.org/docs/guides/start.html

[2] XState: Let’s pair program state machines and state charts with David Khourshid:

[3] https://xstate.js.org/viz/

[4] I wrote my calculator project using xstate and reactsj:

[5] https://github.com/DrSensor/scdlang

[6] https://github.com/sverweij/state-machine-cat

[7] https://en.wikipedia.org/wiki/List_of_Unified_Modeling_Language_tools

1 Like

@Sky020 @DanCouper @astv99 @erretres Thanks guys, for all these recommendations! Cool stuff.

1 Like

Hi @michaelsndr :smile: ,

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 :slight_smile:

Notes:

[0] https://en.wikipedia.org/wiki/State-transition_table

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