如何在Graphviz流程图符号的文本中添加URL超链接？

开发者阿泽

2026-6-13

在Graphviz节点文本中添加内嵌超链接的实现方法

要给Graphviz节点文本中的特定内容添加可点击的超链接，你需要使用HTML格式的节点标签——Graphviz原生支持在label中嵌入HTML语法，这样就能用<a>标签实现文本片段的超链接。

修改后的示例代码

# Box Definition
start    [label="Start Here",            style=rounded]
step1    [label="Step1\n点击<a href='https://your-wiki-url/sql-code'>SQL CODE</a>查看详情"]  # 示例：给SQL CODE加链接
step2    [label="different fill",        fillcolor=cyan]
step3    [label=<<b>decision</b> <a href='https://your-wiki-url/shape' target='_blank'>shape</a>>, shape="diamond"]  # HTML格式标签
step3a   [label="sub-step3-A\n no fill", style=""]
step3b   [label="input shape",           shape="parallelogram"]
end      [style=rounded]

# Flow
start -> step1 -> step2 -> step3
step3 -> step3a [label=yes]
step3 -> step3b [label=no]
step3a -> end

# box ranking (ie, placed at same horizontal)
{ rank=same; step1 step2 step3}

关键说明

HTML标签语法：节点label需要用<< >>包裹HTML内容，比如label=<<a href="url">文本</a>>，这样才能识别内嵌的<a>标签。
超链接属性：可以添加target='_blank'让链接在新窗口打开，和普通HTML的<a>标签用法一致。
输出格式要求：只有生成SVG格式的图形才能保留超链接（PNG/JPG是位图，无法交互），使用以下命令生成：
```
dot -Tsvg your-flowchart.dot -o output.svg
```