Introduction

code2flow let's you create flowcharts by writing natural language decorated with some extra syntax. See the example below.

Welcome to the help manual;
while(Pages left?) {
Read page;
if(Interested?) {
Play with examples.
}
Go to next page;
}
Enjoy our tool;
// Chinese-Japanese-Korean characters are also supported
你好;
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

The syntax is heavily inspired by C programming language and thus you may find that pasting actual C, Java, C++ code to code2flow may sometimes give satisfying results. Note that this is purely incidental. You are advised to re-write your actual code to human readable words so that your diagrams are readable by anyone.

Little hint, knowing editor keyboard shortcuts will make you more efficient over time.

Expressions

Expressions state something that happens at given point in a flowchart. Starting and ending (terminating) expressions are automatically marked as such.

Below example shows three consecutive actions. Each expression needs to be separated by a semicolon(;), otherwise they are joined and create a single expression. You can click on the code, edit it and see the updated flowchart.

Note that notion of action in flowcharts is traditionally called process.

Text formatting

Any text, be it in expressions, comments or other type of clock can be formatted. Formatting styles below:

  • Bold - **some text** will create some text.
  • Italic - *some text* will create some text.
  • Bold italic - ***some text*** will create some text.
  • Monospace - `some text` will create some text. This is useful for embedding code-like operations in the flowchart.

Please notice the whitespace handling in below example.

Longer monospace fragments will stay aligned to the left.

Notes and comments

You can place notes and comments that will appear above any flowchart block. You can also create code comments that will not appear in the flowchart.

  • // this is single line comment
  • /* this is multi-line comment */
  • # this is invisible comment, after '#' every character is ignored

Adjacent single line and multi line comments are joined together. Formatting of comment blocks is also not as literal like other type of blocks. Comments blocks will try to retain a sensible aspect ratio sometimes splitting long lines into shorter ones.

Comments can also appear between other language constructs and will be attached to corresponding generated blocks.

Conditionals (if)

Decision blocks allow for splitting process into two paths, one following successful/true outcome of the statement and other unsucessful/false outcome. The labels for both "True" and "False" can be adjusted as will be shown below. Using else if one can chain several consecutive conditions and with final else all other cases can be met.

Using braces { and } is optional if using only one expression.

Return (return)

Returning can be used to abruptly stop continuation after given process. Other use case is showing two separate flowcharts on one document.

As you can see "Show BIOS" is another terminating node now. This is simplified case and could be rewritten with if and else but it is necessary in more complicated cases.

You can also combine return with an expression.

Multiple outcome decisions (switch/match)

switch or match can be used to model more complex decisions where an outcome is based on more than true or false evaluation. There can be arbitrary number of outcomes.

You can alternatively use the match keyword which comes directly from Rust. It's entirely to use if you want to use switch or match. It works exactly the same.

Traditional switch conditionals (switch)

Specify each case with the case keyword and follow it by text. Write normal code inside and usually you want to end it with break that jumps out of the switch. If not provided, you will see the two cases linked. Try removing the break from line 5 of the next example to see this behaviour.

Example shows two cases being handled separately and two other cases being handled together.

Other example:

switch being modeled after C language may behave in peculiar way:

As you can see, there is a "fall-through" behavior and without an explicit break a case will link to the next case. It is useful for more compact representation of logic.

Goto and jump loops (goto/loop)

Goto, loop and loop labels allow jumping from the place where loop or goto is called to the place after label declaration. Labels are declared by writing a short no-spaced English string and ending it with :. Loop is performed by providing the label name after the loop or goto keywords as shown in the next example. loop is the synonym of goto.

To change the layout depending on your need you could also use a special nop command that creates a small circle as an intermediary node. Layout becomes bigger but the loop is now more apparent.

Several loops can be used simultaneously.

While and for loops (while/for/do)

Simple looping can be achieved more easily. Consider the smiling example from previous section. It can be improved in the following way.

Much shorter and more readable. Note that in this version the client has to be unhappy in the first place for you to smile. Let's change it.

In the second example the condition happens at the end of the loop which is required depending on given process.

With the keyword break you can terminate a loop at any given point. continue keyword allows to jump to the beginning of the loop.

There is also support for using for loops known from C language.

Input, manual operation and other shapes

Other shapes can be enforced by putting specific characters at beginning and the end of the expression.

Other shapes have semantic meaning, use them according to the needs;

Custom true/false labels and yielding values

Every expression, condition and loop may be provided with a text that will appear by the line connections coming out of it. When used with expressions it could be understood as something yielding a result, for example:

Any expression can yield a value which will be drawn as a label next to a diagram edge. Just provide a yielded text in square brackets at the end of an expression;

Grouping code into blocks / sections (block)

You may want to visually separate some parts of the diagram.

Branches, concurrency (branch/join)

Branches could be understood in terms of creating another process that occurs in parallel to the default one. They "live" totally separately and may have separate ends. To connect the ends of the branches to the main process a join statement is called with comma separated list of branch names. Consider this example.

Arbitrary amount of branches can be created provided each is given a separate name.

Exceptions and random errors (try/catch)

It's very easy to handle random errors that happen in any process.

You can also chart actual exception code taken from Java.

Functions (call/function)

You can define re-usable blocks of flowchart as function blocks.

Functions can also take arbitrary arguments.

Optional braces

Braces are usually entirely optional. The only exceptions are short-hand while, if written without using { and }.