🔗

Link to plugin page: https://zeroqode.com/plugin/mind-map-maker-plugin-for-bubble-1723562876157x500894566989655200

Demo to preview the settings

🔗

Bubble Editor: https://bubble.io/page?version=live&id=zeroqode-demo-34&name=mindmap_demo&tab=tabs-1

🔗

Live Demo: https://zeroqode-demo-34.bubbleapps.io/mindmap_demo

Introduction

The Mind Map Maker plugin for Bubble enables the creation and management of dynamic mind maps directly within your application. This plugin facilitates the visualization of hierarchical information, enhancing user experience through interactive and visually appealing diagrams.

Use the Mind Map Maker element to organize and display data in a structured, easy-to-understand format. The plugin actions and states provide essential tools for creating, editing, and managing mind maps in real-time, ensuring that users can dynamically update their visual data structures.

The plugin also offers states that reflect the current structure and content of the mind map, enabling efficient data management and utilization. Implement workflows based on mind map data conditions, improving app functionality and user engagement by responding to visually-driven data events.

How to setup

Install plugin Mind Map Maker Plugin

Place the Mind Map Maker Plugin element on page

Plugin Element Fields

Title	Description	Type
Map Type	Type of map, can be "mindmap" or "org”	Text, Required
Left Branches	Index of branches that will be on left side separated by a ',’	Text, Optional
Right Branches	Index of branches that will be on right side separated by a ',’	Text, Optional

Plugin Element Actions

1) Create New Branch

2) Delete Single Branch

3) Delete All Branches

4) Delete Main Nodes

5) Update Branch

6) Move Branch

7) Load JSON MindMap

Loads a JSON object that contains a mindmap Load mindmap FILE - loads a file that contains a mindmap

Title	Description	Type
JSON Mindmap	MindMap JSON	Text, Required

The JSON you pass must be like this format:

json
[
   {
      "id":"plugins",
      "text":"Some Zeroqode Plugins",
      "fill":"#11B3A5",
      "fontColor":"#FFFFFF",
      "stroke":"#11B3A5",
      "headerColor":"#607D8B",
      "fontWeight":"bold",
     },
   {
      "id":"plugin1",
      "text":"MindMap",
      "parent":"plugins"
      "fill":"#11B3A5",
      "fontColor":"#FFFFFF",
      "stroke":"#11B3A5",
      "headerColor":"#607D8B",
      "fontWeight":"bold",
    }
]

8) Download MindMap

9) Set Theme

10) Create Line

11) Add Shape

Creates new shape types

Title	Description	Type
Name	Shape Name	Text, Required
Template Values	Variables used inside HTML Code split by ',’	Text, Optional
HTML Code	HTML Code	Text, Required

Creating Custom Shapes

First of all you have to create a custom shape using the Add Shape action. To create a custom shape you need:

A name for the shape - will be used when creating a branch/block

Template values - this represents the dynamic variables used inside the HTML Code

HTML Code - the card of the branch/block in html. HTML Card Example:

javascript
<section className="dhx_diagram_template_d">
<span className="dhx_diagram_template_d__title">${text}</span>
<span className="dhx_diagram_template_d__text">${ip}</span>
</section>

Using Custom Shapes

Custom Shapes are used when creating a new branch/block using the “Create New Branch” action.

Inside the “Shape Type” field place the name of the custom created shape

Then, inside the Template Values you must place a JSON made of the variables from the “Template Values” field in “Add Shape” action with the value for each variable. JSON Template Values Example:

javascript
{
"text": "Alex1",
"ip": "Alex2"
}

Title	Description	Type
Branch ID	ID that other branches will attach to	Text, Required
Branch Name	Display text that will be shown on mindmap	Text, Required
Shape Type	Can be topic, card, img-card, rectangle, output, decision or create a custom shape using Add Shape action, and then refference the shape name here	Text, Optional
Image	Works only if Shape Type is image-card	File, Optional
Attach to a Parent	Enables attaching to a parent	Yes/No, Required
Branch Parent ID	Branch ID to attach new branch	Text, Optional
X Coordonate	X Coordonate	Number, Optional
Y Coordonate	Y Coordonate	Number, Optional
Branch Width	Width of the branch in px	Number, Optional
Branch Height	Height of the branch in px	Number, Optional
FontWeight
Background Color	Background Color	Color, Optional
Stroke Color	Stroke Color	Color, Optional
Header Color	Header Color	Color, Optional
Template Values	JSON object that contains the keys and values from Add Shape action. Example: { "text": "Alex1", "ip": "Alex2" }	Text, Optional

Title	Description	Type
Branch ID	Branch ID to update	Text, Required
Text	Updated Branch Name	Text, Optional
Text Color	Updated Branch Name Color	Color, Optional
FontWeight	Updated Branch FontWeight	Color, Optional
Background Color	Updated Branch Background Background Color	Color, Optional
Stroke Color	Updated Branch Stroke Color	Color, Optional
Header Color	Updated Branch Header Color	Color, Optional

Title	Description	Type
ID	Can be dark or light	Text, Required
From	ID of the branch it will start	Text, Required
To	ID of the branch it will attach	Text, Required
Type	Type of Line. Can be dash, line	Text, Required
Color	Line Color	Color, Optional
Width	Width of line	Number, Optional

Mind Map Maker