How to Create a Clickable Workflow Image with Drill-Down Functionality

[Daniel Lee]

I'm looking to create a large, high-level workflow image in Atlassian (Confluence), where each step in the image is clickable. When a user clicks on a step, it should direct them to a new page or section that provides more detailed information about that particular step.
Does anyone have experience implementing this type of interactive visual workflow in Atlassian?

As a rough example, the circle tiles in the image below should be clickable, and when a user clicks on it, it should direct them to a page with more detailed info about that specific step.

I’d appreciate any tips or suggestions on how to make this happen—whether it involves using a specific plugin, tool, or custom code. Thanks in advance!

[Tomislav Tobijas _Koios_]

Hi @Daniel Lee ,

There are apps that you could use - probably smt. like draw.io and Gliffy.

But, maybe you could also construct something like this with Confluence Whiteboards. Not sure if you can make a clickable image (would need to test this in detail), but you could have a clickable text that would open a web link. I think it's worth exploring + it's native Confluence functionality.

 

Not sure if that's what you're looking for, but IMO you can definitely make cool stuff with it (although, in some areas, Whiteboards are still quite 'basic').

Cheers,
Tobi

[Danno]

@Daniel Lee , @Tomislav Tobijas _Koios_ beat me to this one. I can confirm that you can do this in Draw.io. I have not tried Gliffy.

I would also say to experiment with the built in whiteboard. I know it can be done using Miro so I would hope our Atlassian overlords 🦹 have incorporated something similar.

[Justine MacLean - Gliffy Solutions]

Hello @Daniel Lee! @Tomislav Tobijas _Koios_ (Hi Tomislav!) made some great suggestions, and as a Solutions Engineer for Gliffy, I wanted to confirm that he is correct.  You could use Gliffy to make an interactive diagram so please feel free to check out this How to Create an Interactive Diagram With Gliffy example from our YouTube channel.  If you have any further questions, I'd be happy to help!

[Daniel Lee]

Thank you all so much for the suggestions. Looks like there may be a few options to explore. A friend of mine was saying Lucidchart as an option too yesterday. Have any of you had experimented with this and if it would also be an effective tool?

[Daniel Lee]

@Tomislav Tobijas _Koios_ @Danno @Justine MacLean - Gliffy Solutions 

Thank you all so much for the suggestions. Looks like there may be a few options to explore. A friend of mine was saying Lucidchart as an option too yesterday. Have any of you had experimented with this and if it would also be an effective tool?

[Justine MacLean - Gliffy Solutions]

@Daniel Lee 

It's great you're looking into the best diagramming solution for your team! Evaluating different tools can definitely be a process. While I'm most familiar with Gliffy, I can offer some general advice on evaluating diagramming tools.

A key consideration is how important seamless integration with Confluence and Jira is for your team's workflow. This can significantly reduce administrative overhead related to licensing and integration. Another vital factor is determining what specific diagramming features are essential for your team's projects. For example, some tools excel in real-time collaboration, while others offer advanced features for specific diagram types like UML or network diagrams.

I'd recommend taking advantage of free trials or demos to test out different tools and see which one best fits your team's needs. Factors like user interface, ease of use, and support options are also important to consider. If you're interested in exploring Gliffy further, feel free to reach out. Best of luck in finding the perfect solution!