Forum Academy Marketplace Showcase Pricing Features

Building a Flowchart with Bubble

If you’ve ever kicked off a design or software project with a flowchart, you know how valuable they can be in planning (& executing) a well thought design. Unfortunately, the number of flowchart mapping apps that are both user friendly and feature rich are slim to none. I am wondering if Bubble can be used to build something like a flowchart builder (outputting something similar to image the blow), with shapes that can be dragged and dropped onto an art-board and connected by lines/arrows.

I started one approach to it as outlined below, but am out of ideas when it comes to connecting shapes with lines. Does anyone have maybe a different approach to what I’ve tried, or can expound upon it?

Probable Plugins:
Draggable Elements

One Considered Approach:
Database: Create a data table named “tbl_map.” Create another data table “tbl_map_element,” add the field “map_id” with field type = “tbl_map.” Add an “element_type” text field. Add 8 yes/no fields set to “false” and labeled “element_is_arrow_[#1 through 8]”.

  1. Add a new page with data type = “tbl_map.” Build a grid using a repeating group (same number of columns as rows). Set data type to “tbl_map_element” and source to "do a search for ‘tbl_map_elements’ with “map_id”=current page’s “tbl_map.” Populate the data base according to the size of your grid.
  2. Group (“Group Cell”) 2 shapes (for simplicity / MVP) in a cell and set both to hidden on page load. Ex: one default shape element and another with rounded corners set to 100. Set the group’s (“Group Cell”) data type to “current cell’s tbl_map_element.”
  3. Create a floating group ("FG Toolbar) outside of the repeating group to use as a toolbar, and add icons/shapes representing the two elements you just drew.
  4. Setup a workflow so that when an icon in the toolbar is clicked, it sets a custom state (ex: “active_tool”) of the floating group to ___ (whatever you want to call the shape).
  5. Setup a workflow so that when “Group Cell” is clicked make changes to parent group’s map_element, “element_type” = FG Toolbar’s “active tool.”
  6. Add visibility conditions to each shape corresponding to its parent’s “element_type” field in the database.
  7. Add one hidden outgoing and one hidden incoming arrow icon (8 total) to each side of “Group Cell.” Add visibility conditions to each arrow, referencing the database such that when parent group’s tbl_map_element’s “arrow [#]” (I would go clockwise, with evens representing incoming and odds representing outgoing) this icon is visible.
  8. Pair the arrows that share the same side together. (4 Groups total. Label “Group Arrows [up/right/left/down]” accordingly). Set background and border styles of all groups to “none.”
  9. Add a condition to each of the four “Group Arrows __” where when this group is hovered, background style = flat color, background color = X.
  10. Add workflow when page is loaded set FG Toolbar’s “outgoing” to “yes.”
  11. Add workflows for when each of the four arrows groups is clicked set FG Toolbar’s “active_tool” to “arrow” > make changes to parent group’s map_element’s element_type = “arrow” > make changes to parent group’s map_element’s element_is_arrow_[#odd] = yes only when FG Toolbar’s outgoing is “yes” > make changes to parent group’s map_element, element_is_arrow_[#even] = yes only when FG Toolbar’s outgoing is “no” > set FG Toolbar’s outgoing to “no” only when FG Toolbar’s outgoing is “yes” > set FG Toolbar’s outgoing to “yes” only when FG Toolbar’s outgoing is “no.”

Dream Features:

  • Infinite artboard space to continue building
4 Likes

Hello,

Not sure that it can help, but you may want to try textografo.com
It’s a text-based flowchart maker for quickly turning outlines into flowcharts meaning you can make a flowchart without moving your fingers away from the keyboard.

Julien
Disclaimer: I’m the founder of Textografo

2 Likes

Update: I recently started using Miro.com and found it is doing exactly what I was attempting to achieve and then some. Free version only supports a couple of artboards but if you and your company are looking and willing to pay I highly recommend checking it out.

2 Likes

Hi

Cool concept.

Regards the lines and arrows:

In the cell you add horizontal line , vertical line and then you calculate based on location in the grid when to make them visible.

For example to connect x2y2 with x5y5 you would do x5-x2: x3,x4 visible etc.
And also add half lines to be able to turn

2 Likes

Are you using the Miro API or did you abandoned bubble as a solution for this problem?