Graphviz从上到下,从左到右

Seb*_*ler 6 diagram uml graphviz

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

a   b   c   d
|   |   |   | 
|   |   |   |
Run Code Online (Sandbox Code Playgroud)

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

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

小智 10

有志者,事竟成!

这是一个关于如何使用 dot 执行此操作的示例:

digraph SEQ_DIAGRAM {
    graph [overlap=true, splines=line, nodesep=1.0, ordering=out];
    edge [arrowhead=none];
    node [shape=none, width=0, height=0, label=""];

    {
        rank=same;
        node[shape=rectangle, height=0.7, width=2];
        api_a[label="API A"];
        api_b[label="API B"];
        api_c[label="API C"];
    }
    // Draw vertical lines
    {
        edge [style=dashed, weight=6];
        api_a -> a1 -> a2 -> a3;
        a3 -> a4 [penwidth=5, style=solid];
        a4 -> a5;
    }
    {
        edge [style=dashed, weight=6];
        api_b -> b1 -> b2 -> b3 -> b4;
        b4 -> b5 [penwidth=5; style=solid];
    }
    {
        edge [style=dashed, weight=6];
        api_c -> c1;
        c1-> c2 [penwidth=5, style=solid];
        c2 -> c3 -> c4 -> c5;
    }
    // Draws activations
    { rank=same; a1 -> b1 [label="activate()"]; b1 -> c1 [arrowhead=normal]; }
    { rank=same; a2 -> b2 [style=invis]; b2 -> c2 [label="refund()", arrowhead=normal, dir=back]; }
    { rank=same; a3 -> b3 [arrowhead=normal, dir=back, label="place_order()"]; b3 -> c3; }
    { rank=same; a4 -> b4 [label="distribute()", arrowhead=normal]; }
    { rank=same; a5 -> b5 [style=invis]; b5 -> c5 [label="bill_order()", arrowhead=normal]; }
}
Run Code Online (Sandbox Code Playgroud)

渲染后,这将产生以下图像:

序列图

关于这是如何实现的,有一些重要的提示:

  • 每个组件都有一个没有形状、没有高度和宽度的节点列表。
  • 每条线必须处于同一等级,否则 DOT 将根据其自动排名对其进行定位。
  • 为了把事情弄直,所有的方向都是一样的:从a到b到c。如果你颠倒其中的一些,DOT 会弄得一团糟。在箭头上实现正确方向的技巧是使用 dir edge 属性。
  • 边缘的权重属性对于保持垂直线直线非常重要。他们的人数必须超过最大级别的人数。如果您需要创建一个等级高达 100 的图表,您的体重必须至少为 101,否则将不可能有一条直线的垂直虚线。
  • 为了获得一条直线水平线,您必须连接相同等级的每个节点。否则,DOT 会弯曲线。例如,将a1 连接到b1,将b1 连接到c1 来实现连接a1 到c1。


Dav*_*ebb 7

你所描述的似乎是dot默认的.

例如,此图表:

digraph SO {
  a -> a1 -> a2
  b -> b1 -> b2
  c -> c1 -> c2
  d -> d1 -> d2
} 
Run Code Online (Sandbox Code Playgroud)

像这样出来:

在此输入图像描述

如果您有更复杂的图形,则可以使用强制节点处于相同高度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
}
Run Code Online (Sandbox Code Playgroud)

像这样出来:

在此输入图像描述

但是,如果你想a,b,c并且d是在一个特定的顺序,我认为你将有你这样建议使用不可见边.该dot指南甚至建议:

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


小智 7

你可以试试mscgen(消息序列图生成器)

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

msc {

A,B;

--- [label ="开始",ID ="1"];

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

}

$:mscgen -T png -o example.png -i example.msc.

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

谢谢,Srikanth Kyatham