Supported syntax¶

The syntax draws inspiration from the C-style language with more flexibility to suit our use cases.

The project delivers a comprehensive syntax for various programming constructs, including process blocks, for and while loops, do-while loops, if-else blocks, functions, and comments.

It is worth noting that two structures from the orignal diagram design are currently not supported: parallel blocks and switch blocks, the latter being if-else blocks with more than two branches.

The examples are fully interactive, as such, do feel free to play around and experiment with them.

Process¶

From Wikipedia's article on Nassi–Shneiderman diagram:

"A process represents the simplest of steps and requires no analysis. When a process block is encountered, the action described is performed before moving onto the next."

A process is a sequence of words and symbols separated by spaces and terminates by a semicolon.

A process can contain any number of words and symbols, but it must contain at least one word or symbol.

Loop¶

From Wikipedia's article on Nassi–Shneiderman diagram:

"The loop allows the program to loop one or a set of processes until a particular condition is fulfilled."

The project supports two types of loops: test-first loops and test-last loops, each differing in the sequence of executed steps.

Test-First Loops: In these loops, the condition is assessed before the execution of processes, aligning with the behavior of for loops and while loops.
Test-Last Loops: Conversely, test-last loops evaluate the condition after the processes have been executed, mirroring the behavior of do-while loops.

Both types of loops consist of two components:

Condition Component: Enclosed within parentheses, this component comprises elements directly derived from the code, and pasted onto the diagram.
Body Component: Enclosed within curly braces, this component defines the processes to be iteratively performed.

For loop¶

Additionally, it's worth noting that a test-first loop can be invoked with either "for" or "while." The project generates the same diagram for both variations, making no distinction between the keywords.

Do-while loop¶

If-else block¶

From Wikipedia's article on Nassi–Shneiderman diagram:

"The simple True/False branching block offers the program two paths to take depending on whether or not a condition has been fulfilled."

If-else blocks consist of two components:

Condition Component: Enclosed within parentheses, this component comprises elements directly derived from the code, and pasted onto the diagram.
Body Component: Enclosed within curly braces, this component defines the processes to be performed when the condition is fulfilled.

The "else" keyword is used to access the other branch.

Function¶

"Functions encapsulate specific sets of processes. They promote clarity and reusability."

Functions and procedures within the project are characterized by two components:

Declaration Components: From the beginning of the statement up to the opening curly braces, this component comprises elements directly derived from the code, and pasted onto the diagram.
Body Component: Enclosed within curly braces, this component encapsulates the procedural elements of the function or procedure, defining the processes to be executed.

Comment¶

Comments within the project are invoked with two forward slashes. When a line is commented, the remainder of the line is excluded from the diagram.

Importantly, comments are preserved when a diagram is shared through a link. This ensures that the explanatory remarks remain intact, contributing to the collaborative and communicative nature of the shared diagrams.

Context-free grammar¶

Note that:

a star * means zero or more repetitions of the preceding element.
a plus + means one or more repetitions of the preceding element.
a verticle bar | means only one of the elements can be present.
element enclosed by square brackets [] is optional.
characters enclosed by single quotes ' is a literal.

<diagram> ::= <statement>+

<statement> ::= <token>* ';'
            |   <for-statement>
            |   <while-statement>
            |   <do-while-statement>
            |   <if-statement>
            |   <function>

<for-statement> ::= 'for' '(' <token>* ')' '{' <statement>* '}'

<while-statement> ::= 'while' '(' <token>* ')' '{' <statement>* '}'

<do-while-statement> ::= 'do' '{' <statement>* '}' 'while' '(' <token>* ')' ';'

<if-statement> ::= 'if' '(' <token>* ')' '{' <statement>* '}' ['else' '{'<statement>* '}']

<function> ::= <non-keyword-token>+ <token>* '{' <statement>* '}'

<keyword-token> ::= 'for'
                |   'while'
                |   'do'
                |   'if'

<token> ::= <any-character>+

<any-character> ::= <letter>
                |   <digits>
                |   <non-whitespace-character>