Demo to preview the settings
Introduction
Effortlessly integrate Advanced Textual Flowcharts into your Bubble app, empowering you to create dynamic, fully contextual flowcharts with ease. This plugin utilizes Mermaid.js syntax, enabling you to design flowcharts, sequence diagrams, and more, all through simple text commands. Perfect for enhancing visual data representation, Advanced Textual Flowcharts allows for quick updates and adjustments, making it a powerful tool for apps requiring adaptable charting.
With Advanced Textual Flowcharts, you can leverage text-based chart generation even in AI-driven models like GPT or Claude, enabling seamless flowchart creation in real-time. This flexible plugin supports a wide range of use cases, from process mapping to decision trees, providing an intuitive and highly customizable solution that enhances both user experience and content clarity in your app.
How to setup
- Install Advanced Textual Flowcharts plugin
- Place the Textual Flowchart element on the page
Plugin Element Properties
Title | Description | Type |
Data in Mermaid.js Format | The data needs to be formatted as stated in the Mermaid.js documentation. You can see examples on the demo page or ask AI to generate Mermaid.js-formatted data! | Text, Required |
------------ Zoom/Pan Options -------------- | ||
Enable Zoom | Enables Zoom | Checkbox |
Enable Pan | EnablesPan | Checkbox |
Show Zoom / Reset Icons | Displays Zoom / Reset Icons | Checkbox |
Zoom Scale Sensitivity | Zoom Scale Sensitivity | Number, Required |
Initial zoom level | Initial zoom level | Number, Required |
Minimum Zoom Level | Minimum Zoom Level | Number, Required |
Maximum Zoom Level | Maximum Zoom Level | Number, Required |
Panning Speed | Panning Speed | Number, Required |
Zoom / Reset button Color | Zoom / Reset button Color | Color |
Zoom / Reset button Opacity | Zoom / Reset button Opacity | Number, Required |
-------------------- Styling ------------------ | ||
Primary Color | Primary Color | Color |
Primary Text Color | Primary Text Color | Color |
primaryBorderColor | primaryBorderColor | Color |
Line Color | Line Color | Color |
Secondary Color | Secondary Color | Color |
Tertiary Color | Tertiary Color | Color |
Note BG Color | Note BG Color | Color |
Note Text Color | Note Text Color | Color |
Dark Mode | Affects how derived colors are calculated. Set value to true for dark mode. | Yes/No, Required |
Exposed states
Title | Description | Type |
Uploaded SVG URL | Indicates the url of the uploaded svg file | Text |
Element events
Title | Description |
SVG is Uploaded | Triggeres when an SVG file is Uploaded |
Element Actions
1) Save SVG to Bubble File Storage
2) Zoom In
3) Zoom Out
4) Reset Zoom
5) Pan Left
6) Pan Right
7) Pan Up
8) Pan Down
