[New Free Plugin] Air Database Diagram

[seanhoots]

Announcing a new plugin (a personal favorite), Air Database Diagram

This plugin allows you to visualize your bubble application data structures.
It creates a simple (scruffy) diagram of your Things and their relationships with other Things.
Fields that are references to other Things are clearly marked.
Here is an example showing an example of the output of the plugin for a shopping cart application.

Here the diagram shows that our application has the things User, Order, Orderline, Product, Tags.
A User has a cart which is an Order. A user also has a placed orders which is a list of Orders. So cart and placed orders are foreign keys in the User table indicated by ⚷ on the fields. Lists are indicated with * .
An order has a list of Orderlines and each Orderline is associated with a Product. Finally a Product has a list of Tags. Then there are all the other fields including the unique ids. There was not point indicating the unique id as the primary key since each table will have it.

Here is another example, showing an even bigger application. This time we’ve applied some random colors to the table. (The diagram is intentionally blurred here to hide details)

What are the use cases of this plugin

1. As a developer/freelancer to visualize my clients application data so that I can quickly start my development.
   Actually this is the reason i built this plugin. I often get clients who come with a template they want me to modify and add new features. I use this to quickly understand their data structures and relationships.
2. As a client to help my developer understand my data so that they can quickly start development saving me money and time.
   As you all know bubble consultation costs some money ($50 - $120)/hr. So imaging hiring someone to make some quick fixes in your application. They will have to spend some time understanding your data and this is time you have to pay for. With this plugin you can quickly create a diagram of your data to send along your application so that you save some time and money with your developer.
3. As a developer to document the application so that other third party stakeholders can understand our application data structure.
   No need explaining your data in text as i did with the shopping cart example above. Just install the plugin, create your application database diagram, and save the image so you can add to your documentation.
   For example if you’re hired to modify a template or an existing application. You can create a database diagram for the before and after your work so you can easily highlight changes you made to your clients data.

Since bubble is a visual language it was time we get a way to visualize our data too.

FAQ.

1. How much? Free forever.
2. Where is the image stored? The image is not stored anywhere. When you open the page with your diagram, a call is made to generate your diagram and displayed in your browser.
3. How do i save the image? Just right-click on the image in your browser and save. It’s just an image html element. Will be downloaded as a transparent png
4. Can you add feature A, B, and C? Yes if it is possible. For example i’m planning on adding a way to zoom in and out. Also in the next update i will add ability for you to hide the fields and show only the data relationships.
5. How do you get my application data to draw the diagram? This plugin works only if you’ve allowed your application to expose a data API. So the plugin simply just reads your applications public metadata (definition of your data). So even if you’re not exposing an data api you can just enable it to generate your diagram and disable it again. See instructions below.
6. Can i buy you a beer because i love this so much? Thanks. I don’t drink beer but will take coffee

Installation instruction:
As you may expect this plugin relies on the database metadata. Therefore will only work with applications that have enabled “This application exposes data API”.

1. If your application already exposes data API skip to step 4.
2. Go to the Settings page and on the API tab, check the option: “This app exposes a Data API”
3. Check the data types you want to display in your database diagram
4. In your bubble editor add the element, Air Database Diagram
5. Enter your application domain name (e.g. myapplication.bubbleapps.io or myapplication.com)
6. Choose which version of your application you want to use, live or development.
7. Choose the other options including the style, whether to use color, scale the diagram and the direction you want to diagram.
   
   
8. Preview your page. Might take a second or two depending on the size or your diagram.

Please note, for very large diagrams it may take about 3 seconds or so to generate the image. Once i add the ability to ignore the fields it will load a bit faster.

Enjoy and happy bubbling

[fayewatson]

This looks awesome!! Thank you @seanhoots!

[seanhoots]

Definitely you can create boring look and feel if you wish. Just choose boring in the element property. And you will get something like below. But yeah, some of us prefer scruffy diagrams.

[kylejsoutham]

Wow!!

[sridharan.s]

Can’t wait to try it out!! Been looking for something like this for many months!

[supernaturally]

Awesome! Excellent work @seanhoots.

It looks like your plugin appends a “www” to the domain name. I am using a custom domain name that does not utilize "www’ and am receiving the following alert:

“Hmm something went wrong accessing your application metadata at : www.http://example.com/”

[seanhoots]

@supernaturally, actually the www is not appended in the ajax call. it was just the alert display that i appended the www.
I’ve removed it.
So if your domain is example.com just type that without the www and it should work.

Let me know if you find any issues. Thanks

[supernaturally]

@seanhoots

Let me know if you find any issues.

Thanks, it works fine now on smaller applications, but when I applied on a larger/more complex application (15+tables, some with 30 or more entries), I am getting the following error:

[seanhoots]

Yeah that’s a shortcoming with the api the plugin is built on. The api expects all the the metadata to be sent as a uri.
I’m still trying to figure out what the limit is.
Since the main use case I see here is to understand relationships between tables I’m working on an option to ignore the fields especially the non foreign key ones. This will greatly reduce the length of the URI and allow large number of tables to be displayed.
Should push an update by tomorrow.
Thanks

[seanhoots]

Hi @supernaturally, i’ve just updated the plugin with the option to hide the fields. This will tremendously decrease the size of the uri being sent to the api for drawing the image.
See the examples below.
The first diagram shows the full database with all fields and the second only show the table relationships. The labels on the arrows are the field names in the foreign table.

Hiding fields and showing only relationships

There is about 75% reduction in the size of the uri for this particular case.

I’ve also identified some areas in my code i can optimize further to reduce the uri size about an additional half if the fields are not to be shown.

Please try the new update with your large applications by unchecking the “Show fields” and lets see if it can handle it.

I also have a plan for a version two that will allow users to select the tables and fields they want to include/exclude in the diagram. It’s still early days but there are many opportunities to improve this plugin.

[StevenM]

Hi @seanhoots I am getting the popup.

"Hmm something went wrong accessing your application metadata at : "

Followed the instructions, the database is 21 tables, is this too big.

Which version should I be seeing?

[seanhoots]

Hi @StevenM, the latest version with the option to hide fields is version 1.1.0.
I just pushed it so may take some few minutes.

With regards to that error, it means the plugin couldn’t pull your database meta data. There might be several reasons, including entering wrong domain name.
Check your console, the specific error returned by the ajax call should be output there.
Let me know the error and maybe we could figure out what the issue is.

@StevenM

Followed the instructions, the database is 21 tables, is this too big.

In principle there is no limit to the number of tables. But there is a limit (set in the server) to the size of the URI. The api expects all the data for drawing the table to be sent in a GET call. Unfortunately i’m not able to send it in a POST because the api drawing the diagram doesn’t support such calls.
I’m planning on contacting the api developers to discuss with them ways for handling huge data.

[StevenM]

Got the latest version and the simple version working. Now got the detailed version with selected tables.

Cool! I can see this being a handy tool to see if you can clean up the database.

Nice work!

[seanhoots]

Great. Happy it worked.

Yes it is a handy little tool. I’ve been using it for a while but wasn’t in a plugin form. Had written some script to parse my application data and draw from it and thought i could turn it into a plugin for the community.

I’m still looking more into ways to handle huge tables.

[projectvisionhealth]

This is awesome!

I’ve run into two issues:

1. My custom domain uses https only. I get the message: “Hmm something went wrong accessing your application metadata at : https://app.goprimalred.com” when running this

2. when I run just as app.goprimalred.com, I just get a blank page. I let it sit for several minutes (as my database is quite large), but nothing gets returned

[seanhoots]

Hi @projectvisionhealth, the second one is the right way. you don’t need to include the https://

Make sure you have the version 1.1.0 of the plugin and uncheck the option “Show fields”.
If it is able to show your table relationships then it means there were too much fields for it to handle.
As i mentioned above i’m working on ways to allow it handle huge databases.

[supernaturally]

The latest version works great on larger apps when I disable the fields, well done!

[seanhoots]

Great, i’m working on optimizing the code that should reduce the data size even further.
I’ve also contacted the api owners to consider accepting POST requests.

My goal is that it should eventually be able to handle any database size even with all the fields showing.

I’ve also added ability to view the image in a viewer with zoom-in, zoom-out and pan functionality so that even if your diagram is huge you can still zoom and out and view everything. This will be available in the next update.

If i may ask how many tables did you have and approximately how many links were there. I’m trying to gauge the current limits.

[vincent56]

awesome, not displaying the fields did the trick for me.

Now I can compare this with my own mindmap I’ve been drafting each time. Such a time saver to have it update automatically!

So where do I buy you that ‘coffee’ again?

[vascolucci]

Brilliant stuff.

Big fan of your plugins @seanhoots