There are two flow diagrams here: one for adding values to a data structure, and another is for removing values from a data structure. 

For the design:

Variables: Variable Name -> Description -> Scope

• data_struct -> Data Structure -> Global variable (note: for dictionaries the data_struct will be of type dictionary. For Linked Lists the data_struct will be of type Node. For Binary Trees and BSTs the data_struct will be of type TreeNode. For Heap it'll be of type Heap. For all other data structures they can be represented using JavaScript arrays)
• element_to_add -> Element To Add to Data Structure ->  Private to addElementToDataStructure()
• element_to_remove -> Element to Remove from Data Structure -> Private to removeElementFromDataStructure()

Functions: Function Name -> Description -> When is this function executed

• addElementToDataStructure() -> Adds element to data_struct-> Executed when the "Add to Data Structure" button is clicked
• removeElementFromDataStructure() -> Removes element from data_struct -> Executed when the "Remove from Data Structure" button is clicked
• receiveElementFromTextbox() -> Receives element from textbox and checks if the value is of the right data type -> Called in addElementToDataStructure() and removeElementFromDataStructure()
• dataStructIsFull() -> Checks if data_struct is full -> Called in addElementToDataStructure()
• generateVisualRepresentationOfDataStructure() -> Generates visual representation of data structure -> Called in addElementToDataStructure() and removeElementFromDataStructure()

Classes/Objects:

• Node (only used if the data structure is a linked list)
• TreeNode (only used for Binary Trees and BSTs)
• Heap (used for heaps)