Skip to content
CodioMarch 17, 20163 min read

Flode and JGraph Tutorial

In late 2015 we released our educational tool Flode, a fully functional, web-based flow charting coding tool. The big difference? Flode’s flowcharts execute like regular code. It comes with a visual debugger that lets you step through the flowchart, watch variables, and outputs data to a console.

At Codio, we focus on ensuring we use cutting-edge, professional tools that are tailored to enhance the learning experience. So, it was only natural that we built Flode using the best browser-based charting engine we could find - JGraph.

Flode

What is JGraph?

JGraph is a powerful, industry-standard library for interactive Java-based diagramming and graph visualization. It allows users to create diagrams and graphs quickly and easily with an intuitive drag-and-drop interface. It can also be used to connect charts and data from multiple sources, making it an incredibly versatile tool for visualizing complex concepts.

What is Flode?

Flode is an online flowcharting application built on top of JGraph. With Flode, users can quickly create and execute sophisticated flowcharts with annotations for easy comprehension.

Moreover, this integration allows users to write proper code expressions – including decision-making elements - in chart elements. This makes it easier to track the logic of a program flowchart.

Codio has recently launched its Flode Program, based on Jgraph. This integration provides access to the full range of features available in both tools so that users can create powerful visualizations without sacrificing development speed.

How do you use Flode?

To use Flode, start by creating an assignment or project within your course. Once inside a project, simply create a new file with the extension .flode and you're ready to go. In the Flode window, you can start creating and editing flowchart elements with annotations.

Moreover, you can write code expressions such as decision-making statements in the Flow editor, providing even greater control over the flowchart's behavior.

You can also use Flode to generate input and output elements for automated tests. With support for JGraph software, users have access to comprehensive tutorials and downloads that make it easy to get started with programming flow charts in no time.

In summary, Flode is a great tool for creating flowcharts that can be used to visualize complex programming logic and automate testing processes. With access to JGraph tutorials and downloads, users can easily learn the basics of coding flow charts with Flode.

The Benefits of Flow Chart Coding

Flow chart coding is a useful tool for improving the clarity, efficiency, and coordination of any project. By creating user-friendly flow charts that accurately represent programming logic, users can easily identify errors within their code. Additionally, automated testing becomes much easier with Flode’s support for input and output elements.

Overall, flow chart coding is an essential skill in programming that can be easily mastered with the help of JGraph. The tutorials and downloads available from JGraph provide users with a comprehensive understanding of flow chart coding and how it can be used to effectively communicate, coordinate and increase efficiency within any project. Additionally, flow chart coding is an excellent tool for problem-solving, documenting results, and performing effective analysis.

Combining Flode with JGraph Tutorials

JGraph is a commercial product. But given our focus on education, David Benson and JGraph provided the license at no charge. We integrated JGraph into the Codio Flode platform to turn it into an amazing tool for teaching kids and students how to understand the basics of algorithms and computational thinking.

I would like to thank the folks at JGraph for their support of our educational efforts. Flode is already being widely used in UK and US schools and universities and we expect it to play a growing role in computer science education.

At Codio, we have built an entire course that teaches programming concepts using Flode charts. It teaches everything from basic algorithms to conditions, loops, arrays, and more.

Anyone is able to create a Flode chart from within the Codio IDE by creating a new file with the extension .flode. Using our content authoring tool, Codio Guides, teachers can author their own course tutorials to share with other teachers and students.

You can find more information on JGraph at https://www.jgraph.com/

Learn more about Flode on our Youtube channel.

avatar

Codio

Codio is the evidence-based platform for building mastery in computing education.