Interactive Diagrams with Draw.io

[@anirudhsharma2877]

Great work

[@colinjcodesalot]

Thank you!

[@TheSaruVerse]

just exactly what i needed for upcoming Architecture Design Meeting

[@colinjcodesalot]

I’m glad it helped and I hope the meeting goes well!

[@gauravverma3165]

excellent stuff. bookmarking this video.

[@colinjcodesalot]

Thank you, I’m glad you like it 😊

[@steelbak-customs]

That is really cool. Thank you so much! I'm digging into a network install and this will be super valuable for me and the client. What a time to be alive, honestly.

[@colinjcodesalot]

I'm glad you found it useful! :D

[@shibumigo]

That's a great tip, thank you Colin!

[@colinjcodesalot]

I’m glad you enjoyed!

[@encrioIIo]

Incredible!

[@colinjcodesalot]

Thank you!

[@jansiekierski2762]

Woah, this is amazing! Thanks Colin!

[@colinjcodesalot]

Glad you liked it! 😁👍

[@RavipongCH]

This is gold!

[@colinjcodesalot]

Thank you 😊

[@dineshsukhija4367]

That was pretty cool.

[@colinjcodesalot]

Thanks! 😊

[@bdanuw]

Love this !! Thanks

[@colinjcodesalot]

😁👍

[@MrSrajs81]

That's pretty cool .

[@colinjcodesalot]

Thanks! I'm glad you liked it 😁

[@CesarGonzalezRFMonk]

Colin this is great mate! thanks so much. Could you like mouseover to highlight shapes? instead of clicking another shape linked to the tags?

[@colinjcodesalot]

I'm glad you like it! Unfortunately I don't think mouseover or hover will work. The reason being the action handler is considered a link target. Draw.io treats it like a hyperlink and instead of navigating to a destination on click, it interprets the handler JSON and applies the rules that it finds. I don't know of any way to handle other interactions like mouseover. Sorry!

[@CesarGonzalezRFMonk]

@ thanks 🙏

[@tinkuk4350]

Can we download the steps as gif

[@colinjcodesalot]

I've never tried that, but it should be doable. This video by my friend Alexis shows how she makes animated gifs out of her draw.io diagrams: www.linkedin.com/posts/alexisbertholf_how-i-animate-my-network-diagrams-steal-activity-7237087336059035649-FbQV? I hope this helps.

[@RayGarza-sr3zj]

Hmm, interesting. Maybe I can incorporate it in a swim diagram that I created.

[@colinjcodesalot]

Sounds great! It should work for any type of diagram as long as there’s an object to attach the link data to.

[@shramar]

Hi Colin , How the list with check box is created ? Let me know if there is any other video.

[@colinjcodesalot]

The list is made of individual text blocks that have click actions set on each block. When a user clicks on a text block, it not only shows the components in the diagram that correspond to that block, it also replaces the empty circle next to the text block with a checked circle. The "View All" replaces all of the empty circles with checked circles. Those empty and checked circles follow the same tagging approach that's described in the video - that is, each checked circle is a graphic that's tagged with a generic tag, and a tag that ties it to a step. When the action on a text block is triggered, it hides all of the checked circles that have the generic tag (so, all of them) and shows the one that has the tag matching the action in the step. Clicking "View All" shows all of the checked circles that have the generic tag. I hope that helps. Please let me know if you have more questions.

[@shramar]

@@colinjcodesalot Thanks , do you have more details / video as how the layer works as I cant get the same view as yours. May be something not correct on layer.

[@colinjcodesalot]

@@shramar You can access the layers tab by going to View > Layers in the top menu, or Cmd+Shift+L on a Mac (which I'm guessing means Ctl+Shift+L on a PC). From there you can show/hide, lock, and even move things around the different layers. I can put a video together about how that works. Great suggestion!

[@aswathyrjn]

Can I use an interactive diagram for each item in the list? And also can I highlight the item which is selected based on the radio buttons selected?

[@colinjcodesalot]

Yes to both. You can show/hide anything using the target tags. One thing I’ve done is show a bolder version of the selected text when the user clicks on it and hide the normal version. Then when they click on a different text block, I hid the current bold text, showed the normal version again, and then showed the bold version of the new selected text. You can also have each item show its own interactive diagram, for example, if you’re creating a diagram that has sub-steps within each step. Each top-level step can show its own list of sub-steps, and those can be interactive as well.

[@antonpaloka]

Where does one find that shirt?

[@colinjcodesalot]

I picked it up at Cisco Live in 2019

[@colinjcodesalot]

I just checked the online store and it looks like they don’t sell it there 😖