Flowist

Flowist is a simple webapp created by Me (Zied) & Sherbo that lets you create FlowCharts and run them realtime. We have created this webapp to help all the students understand the basics of writing flowcharts.

How to use? (Last updated v1.6)

Page

When you first load up, you will be presented with this.

Tools

There are 4 tools (in the current version) :

• Hand (keyboard shortcut: Q)

  • Lets you move the FlowChart block on the Board

    ---

• Edit (keyboard shortcut: W)

  • Lets you edit the content of a FlowChart block
  • Follow the Notation to avoid unwanted behaviour during run process

  ---

• Connections (keyboard shortcut: E)

  • Lets you connect FlowChart blocks together or remove already made connections

  • In decision, dragging in the red region lets you drag the No arrow and dragging in the green region lets you drag the Yes arrow

  • To remove an arrow just reconnect it again and it will be removed

    

  ---

• Eraser (keyboard shortcut: R)

  • Lets you erase / remove a FlowChart block

    

Adding a new block

You can add new FlowChart block using the buttons on the Side Bar

Running the FlowChart

You can run FlowChart script using the run button

• Each block highlights when it runs

• You can't pause the running process

  

Saving the current FlowChart

You can save the current FlowChart to your browser cache using the save button

Clear the currently saved FlowChart

You can clear the currently saved FlowChart using the clear button

Notation

Each FlowChart symbol requires to be written in a specific notation to work properly. Here are the required notations for each FlowChart symbol

• Vanilla Javascript syntax will work

• Input / Output

  • Variable names should be separated by commas , or semicolons ; ie. var1, var2 or var1; var2
  • Strings should be wrapped between quotes (double or single) 'string here' "or here"
  • Undefined variables will be treated as 0s
  • Undefined functions will return nulls
  • Variables are case and space sensitive

• Decision

  • Conditions should be written in this formate X >= 6
    • All conditions

      =	<>	AND
      >	<	OR
      >=	<=	NOT

• Process

  • Processes can be separated by commas , or semicolons ;. ie. X <- 0; Y <- 0

    • All Operations

      <- or <=	Assigns value to a variable. ie. X <- 1 or X <= 1
      +=	Adds the value to the variable. ie. X += 2
      -=	Subtracts the value to the variable. ie. X -= 2
      *=	Multiplies the value to the variable. ie. X *= 2
      /=	Divides the value to the variable. ie. X /= 2
      %=	Sets the variable to Remainder of there division. ie. X %= 2
      **=	Sets the variable to its value power the other value. ie. X **= 2
      <<=	Preforms right shifting operations on the binary representation of the variable in repetition of the given number. ie. X <<= 2
      >>=	Preforms left shifting operations on the binary representation of the variable in repetition of the given number. ie. X >>= 2
      &=	Operator performs bitwise AND on the two operands and assigns the result to the left operand. ie. X &= 2
      ^=	Operator performs bitwise XOR on the two operands and assigns the result to the left operand. ie. X ^= 2
      |=	Operator performs bitwise OR on the two operands and assigns the result to the left operand. ie. X |= 2

• Allowed Functions

  • Allowed Functions should be written in this format MOD(x,y)with the brackets as shown
  • Undefined / Unallowed functions will return nulls
    • Current allowed functions:

  DIV	Math.floor
  MOD	Math.log
  INT	Math.max
  Math.abs	Math.min
  Math.acos	Math.pow
  Math.asin	Math.random
  Math.atan	Math.round
  Math.atan2	Math.sin
  Math.ceil	Math.cos
  Math.sqrt	Math.tan
  Math.exp

Contact us?

Best way to reach us is via discord.
My Discord ID: ohzied
Sherbo's Discord ID: sherbo2007