Graphviz从上到下，从左到右

Question

您好我想要一个带点语言的uml序列图，现在我有以下问题我希望布局如下，a，b，c和d在顶部的一条直线但是直线到达底部。我怎样才能做到这一点？

a   b   c   d
|   |   |   | 
|   |   |   |

也许我可以实现a，b，c和d及其所属的边缘是集群，我为集群设置了不同的rankdir？

编辑刚刚通过在a，b，c和d之间添加不可见的边缘而不是任何其他解决方案找到了解决方案？

Answer 1

你所描述的似乎是dot默认做的。

例如，此图表：

digraph SO {
  a -> a1 -> a2
  b -> b1 -> b2
  c -> c1 -> c2
  d -> d1 -> d2
} 

像这样出来：

如果你有一个更复杂的图形，你可以使用rank=same强制节点处于相同的高度。例如：

digraph SO {
  { rank = same
    a b c d
  }

  a -> a1 -> a2 
  b -> b1 -> b2 -> b3 -> b4
  c -> c1 
  d -> d1 -> d2 -> d3
  d2 -> a2
}

像这样出来：

但是，如果你想要a，b，c和d按特定顺序排列，我认为你将不得不像你建议的那样使用隐形边缘。 dot指南甚至建议：

当节点被约束到相同的等级时，边缘权重也起作用。在这些节点之间具有非零权重的边缘尽可能地在相同方向上（从左到右，或从上到下在旋转图中）跨越等级。可以通过在需要的地方放置不可见边（style="invis"）来利用这一事实来调整节点排序。

Answer 2

你可以试试mscgen（消息序列图生成器）

一个简单的图表就是example.msc

msc {

A,B;

--- [label="Start", ID="1"];

A->B [label="signal"];
A<-B [label="signal"];

}

$：mscgen -T png -o example.png -i example.msc。

多数民众赞成它生成了很好的序列图。

谢谢，Srikanth Kyatham

Answer 3

Suggestion #1 - PlantUML

PlantUML使用Graphviz，因此一种选择就是简单地使用PlantUML。例如，在PlantUML这...

@startuml
Bob -> Alice : hello
@enduml

......呈现为......

上图是在http://plantuml.com/plantuml/...上呈现的，您可以阅读PlantUML序列图in the documentation。此外，PlantUML也可以用于the command line和PlantUML plugins are available for many popular IDEs。

Suggestion #2 - NEATO

您也可以使用Graphviz和NEATO（PDF）。例如，这个有向图...

digraph sequenceDiagramExample {
  bobHead [ label="Bob" pos="0,1.5!" shape="record" ];
  bobPoint0 [ pos="0,0.75!" shape="point" width="0" ]
  bobFoot [ label="Bob" pos="0,0!" shape="record" ];
  aliceHead [ label="Alice" pos="1,1.5!" shape="record" ];
  alicePoint0 [ pos="1,0.75!" shape="point" width="0" ]
  aliceFoot [ label="Alice" pos="1,0!" shape="record" ];
  bobHead -> bobPoint0 -> bobFoot [ dir="none" style="dashed" ]
  aliceHead -> alicePoint0 -> aliceFoot [ dir="none" style="dashed" ]
  bobPoint0 -> alicePoint0 [ label="hello" labelloc="c" style="solid" ]
}

并从命令行通过NEATO（与Graphviz一起安装）呈现它...

......呈现为......

要使用NEATO渲染上面的图像，请执行以下操作：

1. 安装Graphviz附带的NEATO（至少在使用$ brew install graphviz # requires Homebrew时在Mac上安装）
2. 将上面的digraph sequenceDiagramExample {...}代码放在名为sequenceDiagramExample.dot的文本文件中
3. 从命令行运行$ neato -Tpng sequenceDiagramExample.dot -o sequenceDiagramExample.png，它将生成一个名为sequenceDiagramExample.png的PNG文件
4. 查看PNG :)

Pro-tip - Don't confuse the neato with dot executables

• neato可能就是你想要使用粒度控制元素定位的方式（欢迎评论中的备用视点！）
• 不要将渲染与neato混淆与使用dot渲染（这也包含在Graphviz中）
• 例如，使用dot（例如$ dot -Tpng sequenceDiagramExample.dot -o sequenceDiagramExample.png）从Suggestion＃2渲染有向图将产生这个......