jsPlumb for Flowchart Arrows

Has anyone successfully implemented jsPlumb into their apps for flowchart arrows? I have some draggable elements that I’d like to connect with arrows (similar to funnel blocks with yes/no workflows). jsPlumb was mentioned in another thread and I wanted to see if anyone had implemented it or another solution.

Not jsPlumb but I am working on a flowchart plugin … still very much under development but you can have a play here …

https://flowchart-plugin.bubbleapps.io/version-test

6 Likes

This…is exceptional. The demand for flowcharts is palpable it seems. This should do quite well. Do you have an ETA?

1 Like

A week or so … it’s my weekend project :slight_smile: I just want to add color boxes, and a few more shapes.

I’m not trying to re-do Miro or that level of tool (you would just embed Miro if that is what you wanted) - just simple business style flow charts. Boxes with lines.

2 Likes

Hey @lindsay_knowcode - your example above seems to be broken at the moment, but this sounds promising based on the feedback above. I’d love to try it out and I’d also be happy to help you test it.

Cheers

2 Likes

Thanks for the encouragement @tmxl :slight_smile: and now fixed.

Just I got busy this weekend with this fun thing - Table of Contents …
https://table-of-contents-plugin-v2.bubbleapps.io/version-test

I needed that more urgently …

Flowchart - just want to be able to colour my shapes (symbols) and refine the shapes, take screenshot previews for saving. There is something funky going on with the connectors. Not a lot more than that - the idea is just good-looking, simple, business diagrams …

2 Likes

Thanks @lindsay_knowcode - Wow, your flowchart plugin looks awesome at first glance mate! It reminds me a lot of Blender nodes the way the IO sockets are set up.

Table of contents is very cool, I can see it being useful for training docs which I am currently building out. Nice.

I know you want to keep your flowchart plugin relatively simple - but I have a few ideas I will share here in case they might be useful for you as ideas for this release or a future update:

  1. Directional connectors with arrows on the end (a la Figjam) would be a great addition. Potentially as a mode that just points to a node instead of into a socket.

  2. Workflow actions for nodes, so on-click we could trigger a Bubble action

  3. Custom styles for nodes and connectors, clear and export buttons

  4. Snap to grid for nodes, to make it easier to align them and create neat flowcharts

  5. Flowchart from RG datasource, so we could generate a flowchart in a similar way to cells in a repeating group. This one’s a little crazy but it would be incredibly useful.

  6. As an addition to the above, nesting Bubble groups within nodes that could access this data would be quite powerful too.

Potentially you could offer the above as a ‘Pro’ version in the future. Food for thought!

Looking forward to the initial release.

2 Likes

@tmxl Those are good ideas that influence my thinking actually. :+1:
I think I’ll try to get something basic out the door sooner rather later and not try and make the “perfect” thing with 150 settings and config options no one ever uses. :slight_smile: and get feed back like this on what is actually useful.

3 Likes

You’ll be fine. Looking forward to it, @lindsay_knowcode!

1 Like

@lindsay_knowcode This looks great and exactly what i’m looking for at the moment. Any ETA on when you’ll have a version available?

3 Likes

Any ETA on this @lindsay_knowcode ? Eagerly waiting to play around with a version 1 :slight_smile:

2 Likes

I’ve finally finished off and submitted the Flowchart plugin for Bubble approval. <sigh of relief>

It’s basic, but it does what I want well enough! Saving, view & edit mode, some basic shapes with connectors.

Have a play here …

https://flowchart-plugin.bubbleapps.io/version-test

4 Likes

Way to go, @lindsay_knowcode!!!

1 Like

@lindsay_knowcode I finally got around to trying this out today, it’s definitely a cool little plugin, but sadly not really useful for me in its current state.

Maybe I expected too much… I was really hoping there would be at least a few ways in which I could incorporate this with my existing app’s data - but it seems it’s essentially just a non-responsive closed box to be dropped on the page and that’s it.

I like your philosophy of keeping it super simple, but I think maybe its a bit too simple to be useful.

Here’s a list of functions that I feel are needed as almost a bare minimum for this to be useful for me (and I assume quite a few others for the price you’re charging) from my previous post above:

All the best with it.
T

It exports json as a file to bubble - which you could externally inspect and edit.

But thinking about it why not make that json into bubble objects - that you could edit in workflows etc. :thinking::thinking::thinking:

For the chart symbols I am thinking of externalising that so folks can load their own symbols. (It’s just html)

But as you say - I like it simple for my simple use case.

1 Like

Is this an instruction to me or something you’re thinking of incorporating? It sounds like the right direction. :sweat_smile:

Yep that would really boost the value of this plugin :+1: