Flode is a course that creates executable flow charts. Flode is a great way to teach computational thinking and introduce students to programming. It can:

  • create beautiful, annotated flow charts
  • write proper code expressions, including decisions, in chart elements
  • integrated debugger
  • export your charts as images for project write-ups
  • input and output elements so automated tests can auto-grade charts.

Please see the sections below for details on how to access ready made course or how to create your own projects where students can create Flode charts within their own projects.

Cheat Sheet

Here is a quick reference for commonly used actions.

Dragging in blocks

Drag from the top toolbar into the chart.

Connecting blocks with lines

  • Hover over a block to see the connection points
  • Move the mouse over one of the small connection point circles
  • Click and drag with the mouse to start creating the line
  • Release the mouse to move in another direction then click to change direction again or connect to another connection point

Resizing blocks

Click on a block then drag a highlighted point

Zooming & centering your chart

Zoom controls are in the toolbar or using the mouse wheel if you have one

Multi selection

  • Press the shift key then drag the mouse to surround blocks to multi-select
  • Select one block then press the shift key then start dragging the mouse

Aligning blocks

  • Multi select the blocks to align
  • Right click and select one of the alignment options

Undo & Redo

  • Undo Ctrl+Z (PC) Cmd+Z (Mac)
  • Redo Shift+Ctrl+Z (PC) Shift+Cmd+Z (Mac)

Adding comments

  • Click on a block then press the speech bubble icon to add a comment.

Video overview

Flode teaching content

The content also contains many auto-graded assessments. Results can be seen instantly on the teacher Courses feature.

  1. Log into Codio
  2. Select Resources from the items on the left of the Dashboard
  3. Look for An Introduction to Programming

An Introduction to Programming uses Flode extensively and provides an excellent way of introducing students to programming, computational thinking and Algorithms.

Creating and editing a new Flode file

If you want to create Flode charts independently of any Codio Course content, create a new project from the Dashboard > My Projects area.

Once inside a project, to create a new flow chart, simply create a new file with the extension .flode. A new Flode window will appear and you can start creating and editing your chart.

A new file is created from either the File menu or by right-clicking on the project name line in the file tree.

authtoken

To edit an existing .flode file, simply click on the file name to open the Flode editor.

Detailed instructions

To get detailed instructions on how to use Flode,

  1. Log into Codio
  2. Select Resources from the items on the left of the Dashboard
  3. Look for An Introduction to Programming
  4. Select the first Module, Flode
  5. Press Start Assignment from the first Unit in the list Introduction to Flode

Credits

Many thanks to the folks at JGraph for their excellent flowcharting and diagramming tools.