Databases
StackOverflow2013
Postsdbo
POBlock diagram layout with dot/graphviz
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBlock diagram layout with dot/graphviz
    primarykey
    data
    text
    <p>I'd like to implement the following mockup with dot:</p> <p><img src="https://i.stack.imgur.com/cEsWD.png" alt="mockup to be implemented in dot"></p> <p>So far I've got this much:</p> <pre><code>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 -&gt; other_unit [label = "foo"]; unit -&gt; other_unit [label = "bar"]; unit -&gt; other_unit [label = "bar"]; unit -&gt; other_unit [label = "bar"]; unit -&gt; other_unit [label = "bar"]; unit -&gt; other_unit [label = "bar"]; unit -&gt; more_different_unit [label = "bar"]; unit -&gt; more_different_unit [label = "bar"]; unit -&gt; more_different_unit [label = "bar"]; unit -&gt; more_different_unit [label = "bar"]; unit -&gt; more_different_unit [label = "bar"]; unit -&gt; more_different_unit [label = "bar"]; } </code></pre> <p>I compile it like so:</p> <blockquote> <p>dot -Gsplines=none test.gv | neato -n -Gsplines=ortho -Tpng -otest.png</p> </blockquote> <p>That gets me close, but there are a few things I'd like to know.</p> <ol> <li><p>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.</p></li> <li><p>Is it possible to put the edge labels consistently above or under the edge?</p></li> <li><p>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.</p></li> </ol> <p>Thanks!!</p> <p>UPDATE:</p> <p>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:</p> <pre><code>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 -&gt; Foo [label="Bar2Foo"]; Bar -&gt; Foo [label="Bar2Foo"]; Bar -&gt; Foo [label="Bar2Foo"]; Foo -&gt; Bew [label="Foo2Bew"]; Foo -&gt; Bew [label="Foo2Bew"]; Bew -&gt; Foo [label="Bew2Foo"]; Foo -&gt; Gate [label="Foo2Gate"]; Foo -&gt; Gate [label="Foo2Gate"]; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USChristoph
    1. USChristoph
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBlock diagram layout with dot/graphviz
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POBlock diagram layout with dot/graphviz
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POBlock diagram layout with dot/graphviz
      1. USTaras Kalapun
      1. VTFavorite
    1. COYou 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](http://inkscape.org/screenshots/gallery/inkscape-0.43-diagrams.png), [dia](http://projects.gnome.org/dia/), [Skencil](http://www.skencil.org/index.html), [Xara Xtreme](http://www.xaraxtreme.org), in the more general Vector Drawings department; If you need to generate things dynamically, think about using python with [`pySVG`](http://codeboje.de/pysvg/) and similar
      singulars
      1. POBlock diagram layout with dot/graphviz
      1. USsehe
    2. COI 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!
      singulars
      1. POBlock diagram layout with dot/graphviz
      1. USChristoph
    3. COOk, 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.
      singulars
      1. POBlock diagram layout with dot/graphviz
      1. USsehe
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload