Flowgramming

Home

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
  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

flowgramming@googlegroups.com

Mentor

Contributors

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.

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.

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 :

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.

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.

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)

  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)

  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)

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)

  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)

  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)

  10. Arcsin

  • Declare integers x, y

  • Take input for x, y

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

  1. Arccos

  • Declare integers x, y

  • Take input for x, y

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

  1. Arctan

  • Declare integers x, y

  • Take input for x, y

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

  1. Ceil

  • Declare integer x, float y

  • Take input for x, y

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

  1. Floor

  • Declare integers x, float y

  • Take input for x, y

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

  1. Round

  • Declare integers x, float y

  • Take input for x, y

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

  • Second parameter denotes number of digits after floating point

  1. Random
  • Declare integers x, y
  • Take input or assign value for y
  • Choose assignment block and write the code x = random(y)

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

  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
    • z contains the remainder of x/y

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.

  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.

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
  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

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.
    • 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.
    • 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.

Examples

1. Add Two Numbers

2. Subtract Two Numbers

3. Greater of Two Numbers

4. Are Two Numbers Equal

5. Sum of Array

6. Function for Adding Two Numbers

7. Check if character exists in String

8. Recursion

9. Loops

10. 1d Array

11. Math Functions

12. String Functions