DEV Community

Cover image for FlowRun - executable flowcharts for the web
Sakib Hadžiavdić
Sakib Hadžiavdić

Posted on

FlowRun - executable flowcharts for the web

Wow, it's been 5 years since my last post here.. :o
I have something really exciting to share with you people!

FlowRun is my latest greatest project.
It is a PWA web app for designing and running flowcharts in your browser.
Its main alternative is Flowgorithm, which supports only Windows unfortunately.
FlowRun even works offline to some extent. It is a PWA so it can be "installed" on phone/desktop. Since it is web based it is easier to share programs and integrate them in other apps like Jira, Confluence and similar.

Snappy editor

A big advantage of FlowRun is its better UX of the editor: no popup windows, no doubleclicking nodes etc.
Everything is right there, usually one click away.
It has some features that Flowgorithm does not, like reporting syntax errors as you type.

Expressions

The expressions and execution is mostly the same as in Java.
It will be easy for beginners to switch to most real programming languages.

Code generator

Code generator works for 10 languages, although there are probably still some bugs left to fix.

When you click a statement(node in diagram) it gets highlighted in the code generator! Very handy when you are learning a new programming language.

Execution

Runtime is also neat, you can start and stop the program whenever you want.

When you get an error it will highlight the relevant node in the editor!

When a program pauses for taking input from user, you can see the current state/values of variables.

Layout

You can turn off some panels in the settings popup.

E.g. if you only want to show the main function you can hide the functions chooser. This way you can focus viewer's attention on relevant details.

Fun facts

FlowRun editor/interpreter is open source: https://github.com/sacode387/FlowRun

It is written in ScalaJS, which compiles to JavaScript.
Why? Because Scala is really good for writing compilers.

Next, it uses Graphviz via d3-graphviz library,
which uses WebAssembly under the hood.
You can copy the DOT source for each function that is displayed,
and generate an SVG/PDF/JPG or any other format that Graphviz supports.

Conclusion

Hope that this tool will help more people to get into programming.

If you have any feedback, suggestions, please let me know in the comments! :)

Discussion (0)