使用Graphviz绘制紧前关系图的节点实现问题求助

一、HTML表格方案的适用性 #

你尝试的HTML表格节点方案是可行的，能精准控制节点的布局与内容结构，完全可以实现目标中的节点样式。不过Graphviz自带的record形状也能高效实现类似布局，写法更简洁，无需编写复杂的HTML代码。

二、更优实现方式 #

1. 用Record形状快速实现基础节点 #

针对你需要的节点结构（编号、任务名称、工期D、最早开始GP、最晚结束FP），record形状可以轻松适配，示例代码如下：

digraph D {
    node [shape=record, style=filled, fillcolor=white, border=1];
    rankdir=LR;
    
    // 节点格式：{编号 | 任务名称} | {工期D | 最早开始GP | 最晚结束FP}
    1 [label="{1 | Planung} | {1 | 0 | 0}"];
    2 [label="{2 | Vorbereitung} | {1 | 0 | 0}"];
    3 [label="{3 | Geräte kaufen} | {1 | 0 | 0}"];
    4 [label="{4 | Geräte bestellen} | {1 | 0 | 0}"];
    5 [label="{5 | Geräte aufbauen} | {1 | 0 | 0}"];
    6 [label="{6 | Geräte prüfen} | {1 | 0 | 0}"];
    7 [label="{7 | Abnahme durch Kunden} | {1 | 0 | 0}"];
    
    // 定义紧前关系连线
    1 -> 2;
    2 -> {3,4};
    3 -> 6;
    4 -> {5,7};
    5 -> 6;
    6 -> 7;
}

2. 用HTML表格实现精细化样式 #

如果需要更细致的样式控制（比如自定义单元格边框、内边距、背景色），HTML表格方案依然是最优选择，示例代码如下：

digraph D {
    node [shape=none]; // 使用none形状配合HTML表格自定义样式
    rankdir=LR;
    
    1 [label=<
        <table border="1" cellpadding="3" bgcolor="white">
            <tr>
                <td colspan="1">1</td>
                <td colspan="2">Planung</td>
            </tr>
            <tr>
                <td>1</td>
                <td>0</td>
                <td>0</td>
            </tr>
        </table>
    >];
    
    2 [label=<
        <table border="1" cellpadding="3" bgcolor="white">
            <tr>
                <td colspan="1">2</td>
                <td colspan="2">Vorbereitung</td>
            </tr>
            <tr>
                <td>1</td>
                <td>0</td>
                <td>0</td>
            </tr>
        </table>
    >];
    
    // 定义紧前关系连线
    1 -> 2;
    // 其余节点与连线可按此格式扩展
}

三、Graphviz的现成紧前关系图配置说明 #

Graphviz本身没有专门针对紧前关系图（Netzplan/CPM图）的内置配置，但通过自定义节点样式、布局方向（如rankdir=LR设置横向布局）和连线规则，完全可以实现专业的紧前关系图效果。需要注意的是，Graphviz不支持自动计算关键路径等项目管理功能，这类逻辑需要借助外部工具计算后，再将结果导入Graphviz生成图形。

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