如何在DOT图的SVG/PDF输出中显示自定义节点属性

问题场景 #

现有如下DOT代码，希望将节点j0的name和weight自定义属性值显示在节点名称下方，最终效果类似手动将节点名改为带换行的字符串（如"j0\nname=asd\nweight=2"），但希望保留原节点标识符以便边的引用：

strict digraph G {
  start -> a0;
  a0 -> a3;
  j0[name=asd, weight=2];
  a3 -> j0;
  j0 -> end;
}

解决方案 #

无需修改节点标识符，直接通过DOT的label属性即可实现需求，以下是几种常用方法：

1. 手动拼接label内容

直接在节点定义中指定label，用\n实现换行，同时保留原节点标识符：

strict digraph G {
  start -> a0;
  a0 -> a3;
  // 用label定义显示内容，节点标识符仍为j0
  j0[label="j0\nname=asd\nweight=2"];
  a3 -> j0;
  j0 -> end;
}

2. 自动引用节点属性值（Graphviz支持）

利用Graphviz的属性引用语法，自动提取节点的自定义属性值生成label，适合批量处理节点：

strict digraph G {
  // 给需要显示属性的节点设置label模板：\N代表节点名，\N.xxx引用对应属性
  j0[label="\N\nname=\N.name\nweight=\N.weight", name=asd, weight=2];
  
  start -> a0;
  a0 -> a3;
  a3 -> j0;
  j0 -> end;
  
  // 其他节点保持原有显示
  start[label="start"];
  a0[label="a0"];
  a3[label="a3"];
  end[label="end"];
}

如果需要给所有节点统一应用该格式，可以全局设置node[label="\N\nname=\N.name\nweight=\N.weight"];，再给不需要的节点单独覆盖label。

3. HTML标签实现精细化排版

如果需要更灵活的排版（比如文字左对齐、调整间距），可以用HTML标签作为label：

strict digraph G {
  start -> a0;
  a0 -> a3;
  j0[label=<<TABLE BORDER="0" CELLBORDER="0">
        <TR><TD>j0</TD></TR>
        <TR><TD ALIGN="LEFT">name=asd</TD></TR>
        <TR><TD ALIGN="LEFT">weight=2</TD></TR>
      </TABLE>>, name=asd, weight=2];
  a3 -> j0;
  j0 -> end;
}

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