Flowchart building blocks in Bootstrap style

As I am mostly backend developer, I tend to use Twitter Bootstrap in my projects for a modern look with responsive features without having to dig too much into CSS and browser-specific features. Also my "styling creativity" is not very convincing.

I just migrated a big project from Bootstrap 3 to Bootstrap 4 - happy to see the refreshing look - and was wondering if I could give the flowchart app a new look. That is a frontend-heavy part of the website where Bootstrap just manages the wrapping container.

All the wiring, dragging and dropping works and has (imo) good UX, but the blocks themselves are simple SVGs and look super boring. Almost like the ones on Wikipedia (where I got the theory from): https://en.wikipedia.org/wiki/Flowchart#Building_blocks

I added some background colors, but thats it:

enter image description here

It would be nice if the blocks would fit the other components of Bootstrap 4, regarding colors, borders, flatliness etc.

I tried to get inspiration at JavaScript flowchart frameworks like Flowchart.js, but they honestly look also a lot like the Wikipedia shapes with background colors.

I found one example where the author used Bootstrap buttons as flowchart blocks. Is that the way to go? Or do you have other approaches?

Tags: