Drawing mud map

Question

I'm trying to draw map of some mud. I have used python and graphviz to get something like:

http://img23.imageshack.us/img23/5222/arrasz.png

As you can see we have some locations and going N/S/W/E/Up/Down we are going to other location.

Is it possible, with graphviz, to draw this map to have north locations up to south, and east locations on the right of west locations?

I mean like that:

some        --- E --->   some
location   <--- W ---    location 2
                            .
                           / \   |
                            |    |

                            N    S

                            |    |
                                \ /   
                                 `
                          some location 3

Or maybe there is some better tool to draw it automatically than graphviz?

Answer 1

You can use node rank to force the vertical level of each node. This would insure that things are in the correct order north by south. You would have to preprocess the MUD map to figure out the ranking. You label a group of nodes to be of the "same" rank. You would process the MUD map and determine what group of room nodes all lie at the same level in the North/South direction. Example:

R1    R2
|     |
R3 -- R4--R5  

For this map, you could have something like this:

digraph M {
    R1->R3;
    R2->R4;
    R3->R1;
    R3->R4;
    R4->R2;
    R4->R5;
    {rank=same;R1;R2}
    {rank=same;R3;R4;R5}
 }

I am not able to find a way to force the horizontal ordering. This would mean East/West would still possibly not line up correctly. It may work 90% of the time once you have the rank setup because the other rooms will help give it context.

Answer 2

I think the subgraphs (see dotguide page 23) and the rank property (see dotguide page 17) might be methods to better organize the graph

The following might be an alternative to Graphviz:

• http://gephi.org/ provides some python bindings the newer versions even supports python as a scripting language inside the app.

• http://ubietylab.net/ubigraph/index.html produces nice 3D graphs and can be controlled via python

Answer 3

People have asked about improving Graphviz layout before, but I think that Graphviz is overkill here.

If you have a standard MUD layout like this:

...then you've got some fairly strong constraints about where rooms are. Graphviz doesn't know about those constraints, so it won't do as good a job as a simple algorithm like:

1. Pick a starting location on the grid
2. Traverse through each room using e.g. a depth-first traversal
3. Move one unit to the N, S, E, or W for each new room

If you don't want to write visualization code, you could (perhaps) just do the above approach as a pre-processing step for Graphviz, using it as a way of assigning ranks to each room. Then (hopefully) Graphviz would produce the correct output.

Edit: for example, some pseudocode:

visit(initialRoom, 0, 0)

def visit(curRoom, curX, curY)
  if curRoom == null return

  print "in room " + curRoom + " at location " + curX + ", " + curY

  visit(curRoom.northNeighbor, curX,   curY-1)
  visit(curRoom.southNeighbor, curX,   curY+1)
  visit(curRoom.westNeighbor,  curX-1, curY)
  visit(curRoom.eastNeighbor,  curX+1, curY)

Answer 4

To build a map as a grid in graphviz, you can use the neato engine and absolute positioning nodes by coordinates nodename [pos="coordinateX,coordinateY"]. Graphviz code:

digraph Mud_Map {
    layout=neato
    splines=ortho
    node [label="" width=.5 height=.5 pin=true shape=box]
    "n0,0" [pos="0,0"]
    "n1,0" [pos="1,0"]
    "n1,-1" [pos="1,-1"]
   
    "n0,0" -> "n1,0" [xlabel="E"]
    "n1,0" -> "n0,0" [xlabel="W"]
    "n1,0" -> "n1,-1" [xlabel="S"]
    "n1,-1" -> "n1,0" [xlabel="N"]
}

Image:

Source

---

Or a more complex solution with dot engine:

digraph Mud_Map {
    layout=dot
    splines=ortho
    nodesep=.5
    
    // our custom grid
    node [shape=box]
    // arbitrary path on rigid grid
    A0 -> B0 [xlabel="E"]
    B0 -> A0 [xlabel="W"]
    B0 -> B1 
    B1 -> B0

    // main "underground" grid:
    edge [style=dashed color=dimgrey]
    // uncomment line below to hide the grid:
    //edge [style=invis]
    // uncomment line below to hide the A1 node:
    //A1 [shape=none label=""]
    A0 -> A1
    B0 -> B1
    rank=same {A0 -> B0 }
    rank=same {A1 -> B1 }
}

Image without uncomment lines:

Image with uncomment lines:

Reference