sacode387 / flowrun

Runnable flowcharts for the web

FlowRun

Flowcharts, runnable in your browser!

---

Features

• simple and fast flowchart editor
• run program inside your browser, locally
• export program into JSON
• readonly mode for documentation/tutorials
• predefined functions
• precise error reporting

Data types

• Integer for whole numbers
• Real for decimal numbers
• String for text
• Boolean for true/false

Operators

• +, -, *, /, % for arithmetic operations
• &&, ||, ! for boolean operations
• <, <=, ==, !=, >, >= for comparing values

The rules of precedence should be familiar to you from mathematics.
For example:

• * has higher precedence than +:
  2 + 2 * 2 == 2 + 4 == 6.
• && has higher precedence than ||:
  true || false && true == true || false == true.

Functions

You can define new functions and use them from your main function.
Functions have a return type, the type of value which it returns.
For example, if you calculate a sum of two Integers, the result would also be an Integer (return type).

The return type can also be Void, which means it doesn't return anything, it just executes and that's it.
For example, it could calculate something, print it and exit.

There are also some predefined functions that you can use, they are defined automatically in FlowRun.
You can find them here

---

Implementation details

Written in ScalaJS.
Uses d3-graphviz to display the flowcharts.

flowrun's Issues

Add C language generator

forEach and Arrays

Would be nice to to have the ability to declare arrays and use forEach to iterate through all elements inside the array.

How to import exported programs?

I can export the current diagram to the system's clipboard using both the "Copy Source" and "Copy DOT".
However, how can I import the previously exported program?

Looking at the demo file index.html, it looks like the diagram DOT could be "inserted" into the <div class="flowrun-instance> and then rendered in the browser (graphviz's magic?). However, I get the impression this would have to happen in the back-end before the page is served.

If there isn't currently a way to import diagrams, what is recommend as the best approach to doing this?
Once again, thank you for sharing this project.

Login issue

There seems to be an issue with the Login feature at https://flowrun.io/
After logging in, I still cannot save a flowchart.

Steps performed:
Created a flowchart.
Clicked Save and was prompted to log in.
Clicked Login link
Selected Google icon
Entered Google login information
Login link remains in upper right of page.
Clicked Save and was prompted to log in.
Attempted to login in again with Google - no response when clicking the G icon.

Great tool! Would love to use it as an alternative to Flowgorithm for my students.

Clear output panel

Inconsistency between dashboard and diagrams

When modifying an existing diagram, some inconsistencies are shown on the dashboard. Moreover the shown diagram is not updated or is an older version.

Starting situation:

Added a new symbol:

On the dashboard the "output" message is shown:

This is the diagram with the default message:

Converting strings to ints

I don't think it's currently possible to convert strings to an integer, I think thats needed

Arrays support

http://www.flowgorithm.org/index.html supports flat arrays like int[], meaning 1-level depth.
Maybe it would be nice to support matrices too, since some mathy problems do require them.

Zoom and pan

It has been requested a few times.
Handy lib that does it: https://github.com/bumbu/svg-pan-zoom

https://flowrun.io/ 504 Gateway Time-out

Website is down

How to do square root and to the power

It seems to me essential to be able to have roots or be able to to the power numbers in this code

Debug point statement

Would be neat to have a "stop execution here" button.

Test generated code

https://www.graalvm.org/reference-manual/polyglot-programming/

Jdoodle?

Node comment

Undo / redo

Compilation instructions?

First of all: Thank you so much for this amazing project! I teach computer science at a college in Montreal and I love the idea of "cross-platform Flowgarithm in the browser".

Would it be possible to provide compilation instructions in the Readme?
I've successfully compiled the demo project and I can serve it with a basic http server. However, I'm not very familiar with Scala and ScalaJS so I'm wondering if I'm missing something.

I mostly followed the instructions from Haoyi's Hands-on Scala.js and Multi-project builds from scala-sbt.org.

My steps:

> sbt
sbt:flowrun> project demo
sbt:demo> compile
sbt:demo> fastOptJS

The sbt:demo> run command failed in but I was still able to find and serve the files inside FlowRun/demo/target/web/public/main

Am I missing anything else? It seems functional.

Step by step exec

          Also, step by step exec.  

Stop before every statement

Originally posted by @sake92 in #6 (comment)

Slow motion execution mode

Would be nice to have a slow motion exec mode.
Maybe have a "speed" dropdown with values:

• fastest (meaning no artificial slowing down of program)
• fast (pause of 0.5 seconds after each statement)
• medium 1 second pause
• slow 3 seconds pause

It could/should also highlight each statement while it is being executed.