6/8/23, 2:48 PM User Manual | Flowgramming

Flowgramming

Flowgramming is a platform-independent graphical authoring tool which allows users to

draw and execute programs using flowcharts.

Why Flowgramming?

For the novice programmer, it is usually difficult to de-link the programming logic from the
syntax of the programming language. This often leads to students memorizing code rather
than understanding the logic and designing solutions. Flowgramming was built in an effort
for beginner and novice programmers to understand programming logic and develop
algorithmic thinking & problem solving skills without the hassle of learning the code syntax.

This site serves as an user manual on how to use the Flowgramming web application.

Features

1. Easy and intuitive to understand and use

2. Platform independent
3. Programming logic support (Condition,Loops,etc.)
4. Chat based input and output window
5. Arrays (1D and 2D)
6. Flexible expressions and all data types (including strings) supported
7. Dedicated variable watch window to see all variable changes
https://flowgrammers-org.github.io/flowgramming-manual/print.html 1/38
6/8/23, 2:48 PM User Manual | Flowgramming

8. Specialized string Functions

9. Function manager allows custom definition of multiple functions
10. Can save and load all developed flowgrams (saved with extension ".fgmin")

Contact
[email protected]

Mentor
Ritwik M

Contributors
Harshit Agarwal
Rajkumar S
Sanjana G
Pranesh S
Adithi Narayan
Ganapathi
Vishvakar S

https://flowgrammers-org.github.io/flowgramming-manual/print.html 2/38
6/8/23, 2:48 PM User Manual | Flowgramming

How to create a block in Flowgramming?

To add a block to the flowgram graph, you need to double click on the link (arrow).
A pop up will appear where in you can choose the type of block you want to add.

Select the block again to add the parameters

Click ok to save the block.

https://flowgrammers-org.github.io/flowgramming-manual/print.html 3/38
6/8/23, 2:48 PM User Manual | Flowgramming

Editing a block's properties

When you add a block to the graph, the next thing you would want to do is set some
properties on the block. For the same, you need to double-click on the block.

You will get a pop-up to edit the properties of the block, depending on its type. For instance,
if you double-click on a declaration block, you would see fields to enter the variable name,
its type, and length if it is an array.

After entering the values, when you press OK, you will see the block updated with its
properties on the flowgram.

https://flowgrammers-org.github.io/flowgramming-manual/print.html 4/38
6/8/23, 2:48 PM User Manual | Flowgramming

https://flowgrammers-org.github.io/flowgramming-manual/print.html 5/38
6/8/23, 2:48 PM User Manual | Flowgramming

Declaring multiple variables

If you would like to declare multiple variables of same type in the same block, you need to
use comma( , ) to separate the variable names.

For example, declaring a,b,c of type integer will look like this.

And the flowgram will look like :

https://flowgrammers-org.github.io/flowgramming-manual/print.html 6/38
6/8/23, 2:48 PM User Manual | Flowgramming

Deleting a block

If you want to delete a block, first double-click on the block [Say the assigment block].

You will get a pop-up to edit the properties of the block, depending on its type. On the
bottom left, a delete button is present. Click on it to delete the block.

Once clicked, you will see the block taken out of the flowgram.

https://flowgrammers-org.github.io/flowgramming-manual/print.html 7/38
6/8/23, 2:48 PM User Manual | Flowgramming

https://flowgrammers-org.github.io/flowgramming-manual/print.html 8/38
6/8/23, 2:48 PM User Manual | Flowgramming

Supported data types

Integer
Float
Character
String
One dimensional and two-dimensional arrays

For selecting the data type, choose declaration block and expand the datatype dropdown

If the variable needs to be an array, you will need to mark the checkbox as shown in the
picture, and choose the appropriate dimensions.

https://flowgrammers-org.github.io/flowgramming-manual/print.html 9/38
6/8/23, 2:48 PM User Manual | Flowgramming

In-built string functions

1. String concatenation

Declare strings x, y, z

Take input for x, y

Choose assignment block and write the code z = strcat(x,y)

2. Substring

Declare strings x, y

Take input for x

Choose assignment block and write the code y = x.substr(0,3)

3. String compare

Declare strings x, y and integer z

Take input for x, y

Choose assignment block and write the code z = strcmp(x,y)

https://flowgrammers-org.github.io/flowgramming-manual/print.html 10/38
6/8/23, 2:48 PM User Manual | Flowgramming

4. String length

Declare string x and integer y

Take input for x

Choose assignment block and write the code y = strlen(x)

5. To Ascii

Declare string x and integer y

Take input for x

Choose assignment block and write the code y = toAscii(x[0])

6. To Char

Declare an integer x and character y

Take input for x

Choose assignment block and write the code y = toChar(x)

https://flowgrammers-org.github.io/flowgramming-manual/print.html 11/38
6/8/23, 2:48 PM User Manual | Flowgramming

7. To lower case

Declare strings x, y

Take input for x

Choose assignment block and write the code y = toLowerCase(x)

8. To upper case

Declare strings x, y

Take input for x

Choose assignment block and write the code y = toUpperCase(x)

https://flowgrammers-org.github.io/flowgramming-manual/print.html 12/38
6/8/23, 2:48 PM User Manual | Flowgramming

In-built string functions

1. Absolute

Declare integers x, y

Take input for x, y

Choose assignment block and write the code x = abs(y)

2. Power

Declare integers x,y and z

Take input for x, y

Choose assignment block and write the code z = pow(x,y)

3. Square Root

Declare integers x, y

Take input for x, y

Choose assignment block and write the code x = sqrt(y)

https://flowgrammers-org.github.io/flowgramming-manual/print.html 13/38
6/8/23, 2:48 PM User Manual | Flowgramming

4. Signum

Declare integers x, y
Take input for x, y
Choose assignment block and write the code x = sgn(y)

5. Natural Log

Declare integers x, y
Take input for x, y
Choose assignment block and write the code x = ln(y)

6. Log

Declare integers x,y and z

Take input for x, y

Choose assignment block and write the code z = log(x,y)

https://flowgrammers-org.github.io/flowgramming-manual/print.html 14/38
6/8/23, 2:48 PM User Manual | Flowgramming

7. Sin

Declare integers x, y

Take input for x, y

Choose assignment block and write the code x = sin(y)

8. Cos

Declare integers x, y

Take input for x, y

Choose assignment block and write the code x = cos(y)

9. Tan

Declare integers x, y

Take input for x, y

Choose assignment block and write the code x = tan(y)

https://flowgrammers-org.github.io/flowgramming-manual/print.html 15/38
6/8/23, 2:48 PM User Manual | Flowgramming

10. Arcsin

Declare integers x, y

Take input for x, y

Choose assignment block and write the code x = arcsin(y)

11. Arccos

Declare integers x, y

Take input for x, y

Choose assignment block and write the code x = arccos(y)

12. Arctan

Declare integers x, y

Take input for x, y

Choose assignment block and write the code x = arctan(y)

https://flowgrammers-org.github.io/flowgramming-manual/print.html 16/38
6/8/23, 2:48 PM User Manual | Flowgramming

13. Ceil

Declare integer x, float y

Take input for x, y

Choose assignment block and write the code x = ceil(y)

14. Floor

Declare integers x, float y

Take input for x, y

Choose assignment block and write the code x = floor(y)

15. Round

Declare integers x, float y

Take input for x, y

Choose assignment block and write the code x = round(y)

https://flowgrammers-org.github.io/flowgramming-manual/print.html 17/38
6/8/23, 2:48 PM User Manual | Flowgramming

Second parameter denotes number of digits after floating point

https://flowgrammers-org.github.io/flowgramming-manual/print.html 18/38
6/8/23, 2:48 PM User Manual | Flowgramming

Operators
Flowgramming supports different math operations such as '+', '-', '*', '/', '%'

1. The '+' operator

The '+' operator is used to perform the addition operation.

Declare three integers x,y and z.
Assign a value to x and y
Assign z = x+y
z contains the sum of x and y

2. The '-' operator

The '-' operator is used to perform the subtraction operation.

Declare three integers x,y and z.
Assign a value to x and y
Assign z = x-y
z contains the difference of x and y

https://flowgrammers-org.github.io/flowgramming-manual/print.html 19/38
6/8/23, 2:48 PM User Manual | Flowgramming

3. The '*' operator

The '*' operator is used to perform the multiplication operation.

Declare three integers x,y and z.
Assign a value to x and y
Assign z = x*y
z contains the product of x and y

4. The '/' operator

The '/' operator is used to perform the division operation.

Declare three integers x,y and z.
Assign a value to x and y
Assign z = x+y
z contains the quotient of x/y

5. The '%' operator

The '%' operator is used to perform the modulus operation.

Declare three integers x,y and z.
Assign a value to x and y
Assign z = x%y
https://flowgrammers-org.github.io/flowgramming-manual/print.html 20/38
6/8/23, 2:48 PM User Manual | Flowgramming

z contains the remainder of x/y

https://flowgrammers-org.github.io/flowgramming-manual/print.html 21/38
6/8/23, 2:48 PM User Manual | Flowgramming

User Defined Functions

User defined functions need to be called only inside a Function block.

1. Manually Adding a Function

Enter the name for the function.

Add multiple parameters by entering the variable name and variable type.

Enter the return variable and the variable type.

Save the function and continue.

2. Uploading a Function

Click the upload button to upload a pre-existing function.

https://flowgrammers-org.github.io/flowgramming-manual/print.html 22/38
6/8/23, 2:48 PM User Manual | Flowgramming

3. Updating a Function

To update an existing function, click the edit button in the function manager.

Update the different parameters.

Save the function and continue.

4. Downloading a Function

Click the download button to download the function.

5. Deleting a Function

Click the delete button to delete an existing function.

https://flowgrammers-org.github.io/flowgramming-manual/print.html 23/38
6/8/23, 2:48 PM User Manual | Flowgramming

Keywords
These are in-built keywords in Flowgramming. Ensure that variable names aren't one of
these.

1. array
2. auto
3. break
4. case
5. catch
6. char
7. cin
8. const
9. continue
10. cout
11. default
12. do
13. else
14. enum
15. false
16. float
17. for
18. foreach
19. if
20. in
21. int
22. input
23. let
24. list
25. long
26. new
27. None
28. not
29. null
30. print
31. printf
32. register
33. return
34. scanf
35. scanner
36. short
37. signed
38. sizeof

https://flowgrammers-org.github.io/flowgramming-manual/print.html 24/38
6/8/23, 2:48 PM User Manual | Flowgramming

39. static
40. string
41. struct
42. switch
43. throw
44. true
45. typedef
46. union
47. unsigned
48. var
49. void
50. volatile
51. while

https://flowgrammers-org.github.io/flowgramming-manual/print.html 25/38
6/8/23, 2:48 PM User Manual | Flowgramming

Uploading an .fgmin file

The flowgramming application supports upload by clicking the upload button on the nav
bar.

Select the '.fgmin' file of your preference to upload into the website.

Downloading an .fgmin file

The flowgramming application supports download by clicking the download button on the
nav bar.

By default, '.fgmin' files are untitled and will be saved as 'Untitled.fgmin'. In order to save
them by a different name, please follow the instructions as per your current browser.

1. Google Chrome

Click on the icon on the top right corner and choose Settings from the dropdown
list.

https://flowgrammers-org.github.io/flowgramming-manual/print.html 26/38
6/8/23, 2:48 PM User Manual | Flowgramming

Click on advanced settings

This will expand the settings list. Scroll down to the Downloads section. Then
check the box next to Ask where to save each file before downloading.

https://flowgrammers-org.github.io/flowgramming-manual/print.html 27/38
6/8/23, 2:48 PM User Manual | Flowgramming

Google Chrome will then be updated to open a Browse Window each time a file is
downloaded.

2. Mozilla Firefox

Click on the icon in the top right corner and choose Options.

Then check the circle next to Always ask me where to save files.

Firefox will now open a Browse Window as you download files.

https://flowgrammers-org.github.io/flowgramming-manual/print.html 28/38
6/8/23, 2:48 PM User Manual | Flowgramming

Examples

1. Add Two Numbers

2. Subtract Two Numbers

https://flowgrammers-org.github.io/flowgramming-manual/print.html 29/38
6/8/23, 2:48 PM User Manual | Flowgramming

3. Greater of Two Numbers

4. Are Two Numbers Equal

https://flowgrammers-org.github.io/flowgramming-manual/print.html 30/38
6/8/23, 2:48 PM User Manual | Flowgramming

5. Sum of Array

https://flowgrammers-org.github.io/flowgramming-manual/print.html 31/38
6/8/23, 2:48 PM User Manual | Flowgramming

6. Function for Adding Two Numbers

https://flowgrammers-org.github.io/flowgramming-manual/print.html 32/38
6/8/23, 2:48 PM User Manual | Flowgramming

7. Check if character exists in String

https://flowgrammers-org.github.io/flowgramming-manual/print.html 33/38
6/8/23, 2:48 PM User Manual | Flowgramming

8. Recursion

https://flowgrammers-org.github.io/flowgramming-manual/print.html 34/38
6/8/23, 2:48 PM User Manual | Flowgramming

9. Loops

https://flowgrammers-org.github.io/flowgramming-manual/print.html 35/38
6/8/23, 2:48 PM User Manual | Flowgramming

10. 1d Array

https://flowgrammers-org.github.io/flowgramming-manual/print.html 36/38
6/8/23, 2:48 PM User Manual | Flowgramming

11. Math Functions

https://flowgrammers-org.github.io/flowgramming-manual/print.html 37/38
6/8/23, 2:48 PM User Manual | Flowgramming

12. String Functions

https://flowgrammers-org.github.io/flowgramming-manual/print.html 38/38