Interactive diagrams

Interactive diagrams can enhance the understanding of complex information by allowing users to navigate through different parts of the diagram via hyperlinks. This guide will cover how to create interactive diagrams using two popular diagramming languages: Mermaid and PlantUML.

Excalidraw

Simply click on the link icon when an element is selected and add a hyperlink!

Mermaid

Mermaid is a simple and powerful diagramming tool that uses a markdown-like syntax to create diagrams. It supports various types of diagrams, including flowcharts, sequence diagrams, and more.

1. Create a Basic Diagram: Start by writing a simple Mermaid diagram. For example, a flowchart:

   MERMAID

   graph TD;
       A[Start] --> B{Decision};
       B -->|Yes| C[Result 1];
       B -->|No| D[Result 2];

2. Add Hyperlinks: You can add hyperlinks to nodes in your diagram using the following syntax:

   MERMAID

   graph TD;
       A[Start] --> B{Decision};
       B -->|Yes| C[Result 1];
       B -->|No| D[Result 2];
       C --> E[More Info](https://example.com/more-info);
       D --> F[Learn More](https://example.com/learn-more);

3. Render the Diagram: Ensure your markdown editor or web application is set up to render Mermaid diagrams. The hyperlinks will be clickable in the rendered output.

Example of an Interactive Mermaid Diagram

graph TD;
    A[Start] --> B{Decision};
    B -->|Yes| C[Result 1](https://example.com/result1);
    B -->|No| D[Result 2](https://example.com/result2);

PlantUML

PlantUML is another popular tool for creating diagrams from plain text descriptions. It supports a wide range of diagram types and can also include hyperlinks.

1. Create a Basic Diagram: Write a simple PlantUML diagram. For example, a sequence diagram:

   PLANTUML

   @startuml
   Alice -> Bob: Hello
   Bob -> Alice: Hi
   @enduml

2. Add Hyperlinks: You can add hyperlinks to elements in your diagram using the [[URL|Text]] syntax:

   PLANTUML

   @startuml
   Alice -> Bob: Hello
   Bob -> Alice: Hi
   note right of Bob: [[https://example.com|More Info]]
   @enduml

3. Render the Diagram: Use a PlantUML renderer to visualize your diagram. The hyperlinks will be clickable in the rendered output.

Example of an Interactive PlantUML Diagram

@startuml
Alice -> Bob: Hello
Bob -> Alice: Hi
note right of Bob: [[https://example.com|More Info]]
@enduml

Conclusion

Creating interactive diagrams using Mermaid and PlantUML is straightforward and enhances the usability of your diagrams. By incorporating hyperlinks, you can guide users to additional resources or related information, making your diagrams not only informative but also interactive. Whether you choose Mermaid for its simplicity or PlantUML for its versatility, both tools offer robust options for creating engaging diagrams.