Flowcharts: click events and tooltips

简介 / Introduction

Flowcharts are not just static diagrams — they can embed hyperlinks and click events, letting readers click a node to jump to a page or trigger a tooltip. This post shows how both engines implement this.

PlantUML 版

PlantUML uses the -> prefix syntax to declare nodes as HTML hyperlinks and the tooltip attribute to add tooltip text:

1
2
3
4
5
6
7
8
9
10

@startsalt
{+
  <b>Click a node for details</b>
  #
  [Home]      -> "https://puml.online"
  [Docs]      -> "https://puml.online/blog/"
  [Editor]    -> "https://puml.online/editor/"
  [GitHub]    -> "https://github.com/plantuml/plantuml"
}
@endsalt

PlantUML’s -> syntax generates <a href="..."> tags when rendered as HTML, making nodes clickable. The startsalt renderer provides a simple table layout well suited for embedding doc-sidebars or help pages.

Mermaid 版

Mermaid uses the click directive to bind events to nodes, supporting both URL跳转 and JavaScript 函数调用:

1
2
3
4
5
6
7
8
9
10
11

flowchart TD
    A[Home] --> B{Logged in?}
    B -->|Yes| C[Dashboard]
    B -->|No| D[Login]
    C --> E[Features]
    D --> F[Sign up] --> E

    click A href "https://puml.online"
    click B href "https://puml.online/blog/"
    click C href "https://puml.online/editor/"
    click E href "https://github.com/plantuml/plantuml" "View on GitHub"

click node href "url" turns a node into a clickable hyperlink; the trailing "tooltip text" is an optional tooltip. Mermaid also supports click node callback to invoke JavaScript functions for custom popups and other interactions.

对比 / Side-by-side

小结 / Wrap-up

Both engines can turn flowcharts into interactive navigation maps. Mermaid’s click href syntax is more intuitive and also supports JS callbacks; PlantUML’s -> linking is compact and fits naturally in doc-sidebars or help pages. Prefer Mermaid when you need JS callbacks, and PlantUML for simple embedded links.