18

I'd like to implement the following mockup with dot:

mockup to be implemented in dot

So far I've got this much:

digraph G {
graph [rankdir = LR, splines=ortho]

  unit [shape=box, width = 2, height = 10];

  more_different_unit [shape=box, height=4];
  other_unit [shape=box, height=4];


  unit -> other_unit [label = "foo"];
  unit -> other_unit [label = "bar"];
  unit -> other_unit [label = "bar"];
  unit -> other_unit [label = "bar"];
  unit -> other_unit [label = "bar"];
  unit -> other_unit [label = "bar"];
  unit -> more_different_unit [label = "bar"];
  unit -> more_different_unit [label = "bar"];
  unit -> more_different_unit [label = "bar"];
  unit -> more_different_unit [label = "bar"];
  unit -> more_different_unit [label = "bar"];
  unit -> more_different_unit [label = "bar"];
}

I compile it like so:

dot -Gsplines=none test.gv | neato -n -Gsplines=ortho -Tpng -otest.png

That gets me close, but there are a few things I'd like to know.

  1. How can I get blocks to the left and right of Foo, not just the right? I haven't been able to figure that out yet.

  2. Is it possible to put the edge labels consistently above or under the edge?

  3. How can I align the right-hand nodes left, and the left-hand nodes right? One possibility would be to make them the same width, which would be okay.

Thanks!!

UPDATE:

Based on the accepted answer, I am now doing the following which is precisely what I needed, again generated through dot piped to neato, as mentioned above:

digraph G {
    graph [rankdir = LR, splines=ortho];

    node[shape=record];
    Bar[label="Bar", height=2];
    Foo[label="Foo", height=4];

    Bew[label="Bew", height=2];
    Gate[label="Gate", height=2];

    Bar -> Foo [label="Bar2Foo"];
    Bar -> Foo [label="Bar2Foo"];
    Bar -> Foo [label="Bar2Foo"];

    Foo -> Bew [label="Foo2Bew"];
    Foo -> Bew [label="Foo2Bew"];
    Bew -> Foo [label="Bew2Foo"];


    Foo -> Gate [label="Foo2Gate"];
    Foo -> Gate [label="Foo2Gate"];
}
5
  • 3
    You know that there is specialized software to do this, not? Searching "circuit" in the Ubuntu Software Center yields 13 results, of which about 4 seem right for the job. Then there is inkscape, dia, Skencil, Xara Xtreme, in the more general Vector Drawings department; If you need to generate things dynamically, think about using python with pySVG and similar
    – sehe
    Commented Oct 28, 2011 at 6:57
  • I do have to do it dynamically, so dot was all that I was aware of. I will check out pySVG though and see if that does the trick! Thanks!
    – Christoph
    Commented Oct 28, 2011 at 13:54
  • Ok, we'll happily handle any other questions that might arise. I'd appreciate an upvote if my information ends up helping you in the end.
    – sehe
    Commented Oct 28, 2011 at 14:39
  • I upvoted yours because of pySVG. Don't think I'll need to use it, but good tip. Another one would be Tikz, it looks powerful.
    – Christoph
    Commented Oct 28, 2011 at 19:44
  • 1
    it report Warning: Orthogonal edges do not currently handle edge labels. Try using xlabels, what is this problem? thanks!
    – netawater
    Commented Jan 29, 2015 at 3:18

1 Answer 1

26

Does this get you started?

digraph G {
    graph [rankdir = LR];

    node[shape=record];
    Bar[label="{ \"Bar\"|{<p1>pin 1|<p2>     2|<p3>     3|<p4>     4|<p5>     5} }"];
    Foo[label="{ {<data0>data0|<data1>data1|<data2>data2|<data3>data3|<data4>data4}|\"Foo\" |{<out0>out0|<out1>out1|<out2>out2|<GND>gnd|<ex0>ex0|<hi>hi|<lo>lo} }"];

    Bew[label="{ {<clk>clk|<syn>syn|<mux0>mux0|<mux1>mux1|<signal>signal}|\"Bew\" |{<out0>out0|<out1>out1|<out2>out2} }"];
    Bar:p1 -> Foo:data0;
    Bar:p2 -> Foo:data1;
    Bar:p3 -> Foo:data2;
    Bar:p4 -> Foo:data3;
    Bar:p5 -> Foo:data4;

    Foo:out0 -> Bew:mux0;
    Foo:out1 -> Bew:mux1;
    Bew:clk -> Foo:ex0;

    Gate[label="{ {<a>a|<b>b}|OR|{<ab>a\|b} }"];

    Foo:hi -> Gate:a;
    Foo:lo -> Gate:b;
    Gate:ab -> Bew:signal;
}

enter image description here

Note that I used nonbreaking spaces as a cheeky way to get the alignment (I think, I did C-kSpaceSpace in vim, leading to Hex 00a0 char)

You can also employ HTML inside the label definitions, so you can use fonts, colors and create 'spacers': http://www.graphviz.org/doc/info/shapes.html#html

I suppose aligning labels would be easier with HTML nodes.

3
  • Hmm I'll play with it, thanks! It's really a lot more complex than I need, but could be an alternative. I guess it's no big deal to add another unit to the right of Foo?
    – Christoph
    Commented Oct 28, 2011 at 3:34
  • No big deal, added more 'IC's for demo
    – sehe
    Commented Oct 28, 2011 at 6:38
  • Accepted your answer, since it got me to what I wanted, though my end result is slightly different. I updated my question with the code. Thanks!
    – Christoph
    Commented Oct 28, 2011 at 19:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.