elefcode

Flowchart to Code

Loading the canvas…

7 nodes, 7 arrows.

Step through

Run the chart one node at a time: the node about to run is lit up on the canvas, and every variable shows here.

Test cases

Check the algorithm against examples: give the inputs, say what it should print or return, and run them all at once. The JavaScript version is what runs.

Advertisement

Guide

About the Flowchart to Code

Flowcharts are how many people first learn to think about programs. This tool keeps the chart honest: it writes the code the chart actually describes, so you can see how a decision diamond becomes an if statement and a loop becomes while.

The code is built by walking the chart from Start. Where the two branches of a decision meet again, the if statement ends. A loop’s body ends where its path comes back to the loop. Arrows that jump elsewhere would need goto, which none of these languages have, so they are flagged rather than guessed.

How to use it

  1. 1Pick a template or start with a Start node.
  2. 2Add blocks below the selected one with + Add node; drag from a block’s bottom dot to connect it.
  3. 3Click a block to edit its statement, condition or prompt.
  4. 4Open the Code tab and choose JavaScript, TypeScript, Python or Mermaid.

Frequently asked questions

How do I make a loop?

Use a Loop block. Connect its body output to the steps to repeat and lead the last step back into the Loop block; connect done to what follows. An arrow drawn back up to an ordinary block is reported, because it cannot become a while loop.

Which syntax do I write in the blocks?

Either JavaScript or Python style. Logical operators, true/false/None, print/console.log, input/prompt, len() and int()/parseInt() are translated into each target language.

Is the generated code type-checked?

No. The TypeScript output adds a return type and leaves types to inference; values read with input are strings until you convert them.