如何为Graphviz生成的图中每个节点添加弹出框

Graphviz本身不直接提供交互弹窗能力，根据你最终导出的图格式、使用场景，可以选下面几种无额外复杂依赖的实现方式：

• 导出SVG格式（最适合做交互的方案，零第三方依赖即可实现基础弹窗）
  写dot源码时直接给节点配置tooltip属性，Graphviz导出SVG时会自动把这个属性转成SVG内置的<title>标签，用浏览器打开生成的SVG文件，鼠标悬停在对应节点上就会弹出系统默认样式的提示框，示例dot代码：

  digraph demo {
    node[shape=rect];
    服务入口[label="API网关", tooltip="核心入口节点：负责流量转发、鉴权校验，QPS上限10w"];
    订单服务[label="订单模块", tooltip="业务节点：处理订单创建、状态流转逻辑，关联库表order_main"];
    用户服务[label="用户模块", tooltip="业务节点：维护用户信息、权限等级数据"];
    服务入口 -> 订单服务;
    服务入口 -> 用户服务;
  }
  

  导出命令直接用原生Graphviz CLI即可：dot -Tsvg graph.dot -o interactive_graph.svg
  如果需要自定义弹窗样式（比如带格式、图片、操作按钮的浮层），不需要引入额外库：写dot时给节点加自定义data-*属性存储弹窗内容，导出SVG后嵌入几十行原生JS/CSS，监听节点的鼠标悬停/点击事件，动态生成绝对定位的浮层DOM即可，所有现代浏览器都原生支持。
• Web页面内嵌入渲染的场景
  如果是在前端项目里动态渲染Graphviz图，可以直接用对应渲染库的事件能力对接弹窗：
  • 用@hpcc-js/wasm（原viz.js的现行维护版本）渲染时，渲染完成后可以直接拿到生成的SVG DOM，后续自定义弹窗的逻辑和原生SVG方案完全一致
  • 用d3-graphviz渲染时，库本身提供了节点级别的事件绑定API，可以直接在渲染回调里给节点挂载悬停、点击触发逻辑，还能直接复用项目里已有的UI组件库弹窗（比如Ant Design、Element UI的Popover组件），样式和项目整体统一，适配成本极低
• 静态文件（PDF/PNG等）场景
  位图、PDF这类静态载体本身不支持悬停交互，你可以给节点配置href属性添加跳转链接，点击节点跳转到对应的说明文档页；部分PDF阅读器支持识别Graphviz导出时附带的注释标记，能实现悬停显示注释的效果，但跨阅读器兼容性较差，不推荐作为首选方案。

注意：不要使用已经停止维护多年的旧版viz.js，优先选择仍在迭代的渲染依赖，避免出现浏览器兼容、语法不支持的问题。

内容的提问来源于stack exchange，提问作者Anee go