Responsive Flowchart

Is it possible to bring in or make a flowchart in Blocs?

How would I be able to make a growing (animated would be nice but not necessary ) long arrow and add that to specific plays on the page?

Simple answer CSS. And I think for arrows that point to an element, will require javascript and some math to calculate on resize.

Hi @KBConcepts. There’s a nice one on Codepen which matches your request:

@Jerry reference is using this library… That may make it easier, but you would have to research it. Or just ask norm to add a tick box :upside_down_face: :angel:

1 Like

The easier route would probably be: designing in Keynote and exporting as HTML. @hendon52 did this a while ago

1 Like

Those tick-boxes are going to be the latest trend! :grin: :innocent: :rofl:

1 Like

Why not, its really easy, should be done by the afternoon.

1 Like

Thanks for the suggestions, I’m looking into those now.

I built the top row with 4 columns and painstakingly added the 4 arrows using KeyNote. Exported to HTML5. End results looks good, but it is not responsive.

So my question is can I insert this in a Bloc and then change the position and degree in the Bloc?

Just add something like:

.rotate {
transform: rotate(20deg);

1 Like

Nice, @Jerry, thanks you for that solution. I have 4 Columns that I need to add arrows to, so where do I insert this code? Remembering I need to control the position and degree of each one.
I appreciate your insight. :slight_smile:

Just add the code to the page footer and create a class for each arrow to set your preferred angle. i.e .rotate1, .rotate2 etc.

I sure would like to say this worked, but it did not.

Maybe, it’s because it is not an image, I decide to use the built in Symbols.

If I do use the symbols, how can I control the color, size and degree?

I made a class (rotate1) and applied it to the Column (there are 4)

I made a class (rotate1) and applied it to the Paragraph (there are 4)

How does the new class know to point to style in the footer?

Add a custom class.

Add a custom class and the CSS as mentioned above.

You’ll need to apply it to the image/icon.

I’m not following you.

Okay @Jerry, I added the code to the footer. I then inserted an arrow from the built into Blocs. Then I made a Custom Class (rotate1) and applied that class the the paragraph.

Apply to the image/icon

How does making a custom class point the symbol?
Does that class have a to be a specific name?

That’s what I did and I saw no results.

Here you go :spoon: :grin: :muscle::
Kapture 2021-09-23 at 06.12.02

Wow, yours’s worked! :slight_smile:
So cool of you to take the time to make this, Thank you.
I 'm going to follow exacted what you did and see if it works.

1 Like