Is there a way to draw B-Trees on Graphviz?

Question

I am trying to generate something similar to this:

https://upload.wikimedia.org/wikipedia/commons/6/65/B-tree.svg

From a btree in memory... is there any way to generate a graph like that on Graphviz, so that I can generate the *.dot file?

Thanks.

Arjuna

Upvote and accept? Did I miss something? – Seato

Answer 1

Go to http://ysangkok.github.io/js-clrs-btree/btree.html and press "init simple". In the textarea you see Graphviz code for the tree shown above. The algorithm is simple, as you can see.

Gettogether

This is exactly what I was trying to do. Thanks. :) – Arjuna

Answer 2

Producing the same effect in Graphviz is a challenge, but not impossible.

digraph "tree test" {
 splines=false
 node [shape=rect style="rounded,filled" fillcolor=lightblue] 
    {rank=same              
        a [label=<
    <table border="0" cellspacing="0" cellborder="1">
          <tr>
        <td border="0" ></td>
        <td style="rounded" bgcolor="lightcyan">11</td>
        <td border="0" ></td>
        <td style="rounded" bgcolor="lightcyan">12</td>
        <td border="0" ></td>
        <td  style="rounded" bgcolor="lightcyan">13</td>
        <td border="0" ></td>
        <td  style="invis" bgcolor="lightcyan">xx</td>
        <td border="0" ></td>
      </tr>
          <tr>
        <td  port="p1" border="0" width="5" height="5"  fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p2" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p3" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p4" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p5" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="invis"></td>
      </tr>
          </table>>]
        }
    {rank=same
        b [label=<
    <table border="0" cellspacing="0" cellborder="1">
          <tr>
        <td border="0" ></td>
        <td style="rounded" bgcolor="lightcyan">21</td>
        <td border="0" ></td>
        <td style="rounded" bgcolor="lightcyan">22</td>
        <td border="0" ></td>
        <td  style="rounded" bgcolor="lightcyan">23</td>
        <td border="0" ></td>
        <td  style="rounded" bgcolor="lightcyan">24</td>
        <td border="0" ></td>
      </tr>
          <tr>
        <td  port="p1" border="0" width="5" height="5"  fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p2" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p3" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p4" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p5" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="rounded"></td>
      </tr>
          </table>>]
       c [label=<
    <table border="0" cellspacing="0" cellborder="1">
          <tr>
        <td border="0" ></td>
        <td style="rounded" bgcolor="lightcyan">31</td>
        <td border="0" ></td>
        <td style="rounded" bgcolor="lightcyan">32</td>
        <td border="0" ></td>
        <td  style="invis" bgcolor="lightcyan">33</td>
        <td border="0" ></td>
        <td  style="invis" bgcolor="lightcyan">34</td>
        <td border="0" ></td>
      </tr>
          <tr>
        <td  port="p1" border="0" width="5" height="5"  fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p2" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p3" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="rounded"></td>
        <td border="0"></td>
        <td  port="p4" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="invis"></td>
        <td border="0"></td>
        <td  port="p5" border="0" width="5" height="5"   fixedsize="true" bgcolor="red" style="invis"></td>
      </tr>
          </table>>]
  }

a:p1:c -> b
a:p2:c -> c
}

Gives:

Seeress

Answer 3

If you want to produce the same effect as the quoted picture, it is impossible. You can check the source of the link and indicate that it was produced by Inkscape.

Noxious

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Belloc

Answer 4

Yes

You can use rankdir and such to set the direction it lays stuff out in.

If you have a directed graph (digraph) that forms a tree (no cycles if direction is ignored) it'll pick up on this for you, you can change the dir of individual nodes using A -> B [dir="backwards"].

That creates a link from A to B but displayed as fro B to A

If you just have "forward links" (not sure on name of graph) where there are no cycles if direction is considered but there can be if direction is ignored (A->B->C and A->D->C is an example of this) it'll still put it in layers for you.

Once again: yes.

Seato

My problem actually is in order to render each node, the numbers side by side, and the conectors in the middle of the node itself. – Arjuna

@PauloTorrens in Graphviz you can change everything, everything you can imagine. It can be done. – Seato

Could you please give me an example which renders to something similar to that image? – Arjuna