Installation:
Go to the Plugins section in your Bubble editor.
Search for "FlowChart" and click "Install".


Adding a Chart to Your Page:

Drag and drop the FlowChart element onto your desired page.
Adjust the size and position of the element as needed.


Configuring the Chart:

In the element's properties panel, locate the "Chart Data" field.

Enter your Mermaid syntax code into this field. For example:

graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]



Customizing Appearance:

Use the color picker fields (e.g., Primary Color, Line Color) to adjust the chart's color scheme.


Setting Up Interactivity:

Enable zooming by setting Zoom Enabled to 'Yes'.
Allow panning by setting Pan Enabled to 'Yes'.
Adjust Zoom Scale Sensitivity and Panning Speed to fine-tune the interaction.


Changing Chart Direction:

Use the Chart Direction dropdown to select 'Top to Bottom', 'Left to Right', or 'Right to Left'.


Dynamic Charts:

To create dynamic charts, you can bind the Chart Data field to a text field or a database value.
Use Bubble's workflow editor to update the chart data based on user actions or data changes.


Remember to refer to the Mermaid.js documentation for detailed syntax guidelines and advanced diagram types. Happy charting!