# Recommendations for algorithm drawing tool? **URL:** \ **Category:** General\ **Created:** [May 4, 2020, 8:08am UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406 "2020-05-04T08:08:54Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![michaelsndr](https://avatars.discourse-cdn.com/v4/letter/m/ecd19e/32.png) [@michaelsndr](https://forum.freecodecamp.org/u/michaelsndr)\ **Post date:** [May 4, 2020, 8:08am UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/1 "2020-05-04T08:08:54Z")
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. ---
**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\ **Post date:** [May 4, 2020, 8:18am UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/2 "2020-05-04T08:18:04Z")
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/](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 ---
**Author:** ![michaelsndr](https://avatars.discourse-cdn.com/v4/letter/m/ecd19e/32.png) [@michaelsndr](https://forum.freecodecamp.org/u/michaelsndr)\ **Post date:** [May 4, 2020, 8:29am UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/3 "2020-05-04T08:29:35Z")
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: ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/e/d/ede3a5c6cf1138d315e6a39296778538b13350ae.png) ---
**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\ **Post date:** [May 4, 2020, 11:57am UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/4 "2020-05-04T11:57:28Z")
Mermaid is pretty good [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) Plant UML is also good, has pretty good tooling > **[Open-source tool that uses simple textual descriptions to draw beautiful UML...](https://plantuml.com/)** > > Easily create beautiful UML Diagrams from simple textual description. There are also numerous kind of available diagrams. It's also possible to export images in PNG, LaTeX, EPS, SVG. ---
**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\ **Post date:** [May 4, 2020, 12:03pm UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/5 "2020-05-04T12:03:31Z")
Oh, well, I have used _[draw.io](http://draw.io)_ for many flowcharts. Generally, it is excellent for UML based design, but has a myriad of other templates/options. ---
**Author:** ![astv99](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/astv99/32/66820_2.png) [@astv99](https://forum.freecodecamp.org/u/astv99)\ **Post date:** [May 4, 2020, 5:03pm UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/6 "2020-05-04T17:03:59Z")
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](https://www.visual-paradigm.com/download/community.jsp) ---
**Author:** ![Diego\_Perez](https://avatars.discourse-cdn.com/v4/letter/d/f07891/32.png) [@Diego\_Perez](https://forum.freecodecamp.org/u/Diego_Perez)\ **Post date:** [May 4, 2020, 7:37pm UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/7 "2020-05-04T19:37:03Z")
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/](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](https://xstate.js.org/docs/guides/start.html) [2] XState: Let’s pair program state machines and state charts with David Khourshid: [![](https://img.youtube.com/vi/uRfQJJArZEg/maxresdefault.jpg "XState: Let's pair program state machines and state charts with David Khourshid") ](https://www.youtube.com/watch?v=uRfQJJArZEg) [3] [XState Visualizer](https://xstate.js.org/viz/) [4] I wrote my calculator project using xstate and reactsj: > **[GitHub - diegoperezm/react-xstate-calc: A simple calculator using react and...](https://github.com/diegoperezm/react-xstate-calc)** > > A simple calculator using react and statecharts. Contribute to diegoperezm/react-xstate-calc development by creating an account on GitHub. [5] [GitHub - DrSensor/scdlang: Statechart Description Language (just an experiment, need to be rewritten)](https://github.com/DrSensor/scdlang) [![](https://user-images.githubusercontent.com/4953069/60861162-a5d1a800-a243-11e9-8dd3-b04ee3fde30c.gif) ](https://user-images.githubusercontent.com/4953069/60861162-a5d1a800-a243-11e9-8dd3-b04ee3fde30c.gif) [6] [GitHub - sverweij/state-machine-cat: write beautiful state charts 🙀](https://github.com/sverweij/state-machine-cat) [7] [List of Unified Modeling Language tools - Wikipedia](https://en.wikipedia.org/wiki/List_of_Unified_Modeling_Language_tools) ---
**Author:** ![michaelsndr](https://avatars.discourse-cdn.com/v4/letter/m/ecd19e/32.png) [@michaelsndr](https://forum.freecodecamp.org/u/michaelsndr)\ **Post date:** [May 5, 2020, 3:55pm UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/8 "2020-05-05T15:55:54Z")
@Sky020 @DanCouper @astv99 @Diego_Perez Thanks guys, for all these recommendations! Cool stuff. ---
**Author:** ![Diego\_Perez](https://avatars.discourse-cdn.com/v4/letter/d/f07891/32.png) [@Diego\_Perez](https://forum.freecodecamp.org/u/Diego_Perez)\ **Post date:** [June 30, 2020, 12:52pm UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/9 "2020-06-30T12:52:20Z")
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 [![](https://img.youtube.com/vi/Iw9li86waAc/maxresdefault.jpg "Executable diagram on a browser") ](https://www.youtube.com/watch?v=Iw9li86waAc) - Path highlighting [![](https://img.youtube.com/vi/2C1KdXJqkkw/maxresdefault.jpg "Executable diagram path highlighting") ](https://www.youtube.com/watch?v=2C1KdXJqkkw) - Demo: [https://diegoperezm.github.io/simple-machine-config-xstate/examples/browser/trafficlights/index.html](https://diegoperezm.github.io/simple-machine-config-xstate/examples/browser/trafficlights/index.html) Cheers and happy coding 🙂 Notes: [0] [State-transition table - Wikipedia](https://en.wikipedia.org/wiki/State-transition_table) ---
**Author:** ![michaelsndr](https://avatars.discourse-cdn.com/v4/letter/m/ecd19e/32.png) [@michaelsndr](https://forum.freecodecamp.org/u/michaelsndr)\ **Post date:** [June 30, 2020, 5:38pm UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/10 "2020-06-30T17:38:11Z")
Cool. Thanks for sharing it. ---
**Author:** ![lifeModder19135](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@lifeModder19135](https://forum.freecodecamp.org/u/lifeModder19135)\ **Post date:** [June 30, 2020, 6:08pm UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/11 "2020-06-30T18:08:16Z")
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 ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [June 1, 2021, 6:49pm UTC](https://forum.freecodecamp.org/t/recommendations-for-algorithm-drawing-tool/383406/12 "2021-06-01T18:49:24Z")
Closed on June 1, 2021, 6:49pm UTC