流程图：交互与点击事件

简介 / Introduction

流程图不仅能展示静态的执行路径，还能嵌入超链接和点击事件，让读者在浏览器中直接点击节点跳转页面或触发提示框。本篇演示两种引擎分别如何实现这一效果。

PlantUML 版

PlantUML 通过 -> 前缀语法将节点声明为 HTML 超链接，并用 tooltip 属性附加提示文字：

1
2
3
4
5
6
7
8
9
10

@startsalt
{+
  <b>点击节点查看详情</b>
  #
  [首页]     -> "https://puml.online"
  [文档]     -> "https://puml.online/blog/"
  [编辑器]   -> "https://puml.online/editor/"
  [GitHub]   -> "https://github.com/plantuml/plantuml"
}
@endsalt

PlantUML 渲染为 HTML 时，-> 会生成 <a href="..."> 标签，点击即可打开目标链接。上例同时演示了 startsalt 渲染器下的简单表格布局，适合快速嵌入文档页面。

Mermaid 版

Mermaid 使用 click 指令为节点绑定事件，支持跳转链接和调用 JavaScript 函数两种模式：

1
2
3
4
5
6
7
8
9
10
11

flowchart TD
    A[首页] --> B{是否登录?}
    B -->|是| C[个人中心]
    B -->|否| D[登录页]
    C --> E[功能列表]
    D --> F[注册页] --> 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" "查看 GitHub"

click 节点 href "url" 使节点变为可点击的超链接；末尾的 "提示文字" 为可选的 tooltip。Mermaid 也支持 click 节点 callback 调用 JS 函数，实现自定义弹窗等交互。

对比 / Side-by-side

小结 / Wrap-up

两者都能将流程图变成可交互的导航图。Mermaid 的 click href 语法更直观，且支持 JS 回调；PlantUML 通过 -> 链接方式简洁，适合嵌入文档侧边栏或帮助页面。选择时优先考虑目标平台对 JS 的支持程度。