🔗 Link to plugin page: https://zeroqode.com/plugin/advanced-textual-flowcharts-plugin-1728460242536x982599881714727700
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
Changelogs
Update 10.10.24 Version 1.1.0
- Acquired by Zeroqode
Update 24.07.24 Version 1.0.4
- Added better handling of empty data
Update 23.07.24 Version 1.0.3
- Improvements for resizing
Update 23.07.24 Version 1.0.2
- Improvements
Update 23.07.24 Version 1.0.1
- Improvements for dynamic data
Update 23.07.24 Version 1.0.0
- Launch
Update 21.07.24 Version 0.0.8
- Fixed error in console
Update 21.07.24 Version 0.0.7
- Fix for panning workflow actions
Update 21.07.24 Version 0.0.6
- Update for reset action
Update 21.07.24 Version 0.0.5
- Update
Update 21.07.24 Version 0.0.4
- Fix for multiple charts on one page
Update 21.07.24 Version 0.0.3
- Updated in editor design
Update 21.07.24 Version 0.0.2
- Improvements
Update 21.07.24 Version 0.0.1
- Pre-launch