Graphviz Dot中UML类图HTML标签换行缩进优化问询

使用Graphviz的Dot工具（版本7.0.5）生成UML类图时，基础渲染正常，但换行排版不符合预期。尝试用Dot的HTML标签优化，效果仍不理想（已知Dot手册说明其HTML功能有限）。

原节点代码 #

digraph "Class" {
  bgcolor="transparent";

  edge [fontname=Helvetica,fontsize=10,labelfontname=Helvetica,labelfontsize=10];
  node [fontname=Helvetica,fontsize=10,shape=record,height=0.2,width=0.8];

  Node2 [label="{FClass\n|# m_trackingEnabled\l|+ FClass()\l+ InsertRenderMaterial\lInsertRenderMaterial()\l+ InsertRenderMaterialDelete\lInsertMaterial()\l+ setTrackingEnabled()\l}",
    height=0.2,width=0.4,color="grey75", fillcolor="white", style="filled"];

  Node3 [label=<
    <TABLE CELLBORDER="0" BORDER="0">
      <TR><TD COLSPAN="2" CELLPADDING="1" CELLSPACING="0">FClass</TD></TR>
      <HR/>
      <TR><TD VALIGN="top" CELLPADDING="1" CELLSPACING="0">#</TD><TD VALIGN="top" ALIGN="left" CELLPADDING="1" CELLSPACING="0">m_trackingEnabled</TD></TR>
      <HR/>
      <TR><TD VALIGN="top" CELLPADDING="0" CELLSPACING="0">+</TD><TD VALIGN="top" ALIGN="left" CELLPADDING="0" CELLSPACING="0">FClass()</TD></TR>
      <TR><TD VALIGN="top"  CELLPADDING="0" CELLSPACING="0">+</TD><TD VALIGN="top" ALIGN="LEFT" CELLPADDING="0" CELLSPACING="0">InsertRenderMaterial<BR ALIGN="LEFT"/>InsertRenderMaterial()</TD></TR>
      <TR><TD VALIGN="top"  CELLPADDING="0" CELLSPACING="0">+</TD><TD VALIGN="top" ALIGN="left" CELLPADDING="0" CELLSPACING="0">InsertRenderMaterialDelete<BR ALIGN="LEFT"/>InsertMaterial()</TD></TR>
      <TR><TD VALIGN="top"  CELLPADDING="0" CELLSPACING="0">+</TD><TD VALIGN="top" ALIGN="left" CELLPADDING="0" CELLSPACING="0">setTrackingEnabled()</TD></TR>
    </TABLE>
   >,height=0.2,width=0.4,color="grey75", fillcolor="white", style="filled"];
}

现存问题 #

• 原节点（Node2）：换行内容（如第二、第三个Insert相关行）从头开始，排版杂乱不美观；
• 测试节点（Node3）：换行缩进随内容长度变化，且水平线未铺满节点框。

注意事项：字体可自定义，直接加空格无法适配不同字体；成员首字符为+、#、-、*、~之一。

优化方案 #

方案1：改进Record格式的换行对齐 #

在Record格式的换行内容前添加HTML非断空格 ，替代普通空格，避免因字体差异导致缩进失效，同时让换行内容统一对齐：

Node2 [label="{FClass\n|# m_trackingEnabled\l|+ FClass()\l+ InsertRenderMaterial\l    InsertRenderMaterial()\l+ InsertRenderMaterialDelete\l    InsertMaterial()\l+ setTrackingEnabled()\l}",
  color="grey75", fillcolor="white", style="filled"];

注：去掉固定的height和width属性，让Dot自动根据内容调整节点大小，避免内容挤压或截断。

方案2：完善HTML表格结构，解决水平线与缩进问题 #

调整HTML表格的布局参数，让水平线铺满节点，同时用非断空格实现固定缩进：

Node3 [label=<
  <TABLE CELLBORDER="0" BORDER="0" CELLSPACING="0" CELLPADDING="2" WIDTH="100%">
    <TR><TD COLSPAN="2" ALIGN="CENTER">FClass</TD></TR>
    <TR><TD COLSPAN="2"><HR/></TD></TR>
    <TR><TD VALIGN="TOP" WIDTH="12%">#</TD><TD VALIGN="TOP">m_trackingEnabled</TD></TR>
    <TR><TD COLSPAN="2"><HR/></TD></TR>
    <TR><TD VALIGN="TOP">+</TD><TD VALIGN="TOP">FClass()</TD></TR>
    <TR><TD VALIGN="TOP">+</TD><TD VALIGN="TOP">InsertRenderMaterial<BR/>
      &nbsp;&nbsp;&nbsp;&nbsp;InsertRenderMaterial()</TD></TR>
    <TR><TD VALIGN="TOP">+</TD><TD VALIGN="TOP">InsertRenderMaterialDelete<BR/>
      &nbsp;&nbsp;&nbsp;&nbsp;InsertMaterial()</TD></TR>
    <TR><TD VALIGN="TOP">+</TD><TD VALIGN="TOP">setTrackingEnabled()</TD></TR>
  </TABLE>
>, color="grey75", fillcolor="white", style="filled"];

• 设置WIDTH="100%"让表格铺满节点，确保<HR/>横向填充整个节点；
• 给访问修饰符列设置固定宽度WIDTH="12%"，避免因内容长度变化导致缩进偏移；
• 用 给换行内容添加固定缩进，适配不同字体。

方案3：使用嵌套表格实现更精准的布局 #

如果需要更严格的对齐，可在方法列中嵌套表格，将换行内容放在单独的单元格中，实现自动缩进：

<TR><TD VALIGN="TOP">+</TD><TD VALIGN="TOP">
  <TABLE CELLBORDER="0" BORDER="0" CELLSPACING="0">
    <TR><TD>InsertRenderMaterial</TD></TR>
    <TR><TD>&nbsp;&nbsp;&nbsp;&nbsp;InsertRenderMaterial()</TD></TR>
  </TABLE>
</TD></TR>

这种方式能确保换行内容的缩进完全受控，不受外层布局影响。

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