diff --git a/Gopkg.lock b/Gopkg.lock
index f478101..977c48a 100644
--- a/Gopkg.lock
+++ b/Gopkg.lock
@@ -346,6 +346,14 @@
   revision = "5420a8b6744d3b0345ab293f6fcba19c978f1183"
   version = "v2.2.1"
 
+[[projects]]
+  branch = "master"
+  digest = "1:9132eacc44d9bd1e03145ea2e9d4888800da7773d6edebb401f8cd34c9fb8380"
+  name = "vbom.ml/util"
+  packages = ["sortorder"]
+  pruneopts = "UT"
+  revision = "efcd4e0f97874370259c7d93e12aad57911dea81"
+
 [solve-meta]
   analyzer-name = "dep"
   analyzer-version = 1
@@ -360,6 +368,7 @@
     "github.com/q3k/statusz",
     "golang.org/x/net/context",
     "google.golang.org/grpc",
+    "vbom.ml/util/sortorder",
   ]
   solver-name = "gps-cdcl"
   solver-version = 1
diff --git a/service.go b/service.go
index 05964fa..ccfd0bc 100644
--- a/service.go
+++ b/service.go
@@ -4,12 +4,14 @@
 	"context"
 	"fmt"
 	"net/http"
+	"sort"
 	"strings"
 
 	"code.hackerspace.pl/q3k/topo/graph"
 	"github.com/gobuffalo/packr"
 	"github.com/golang/glog"
 	"github.com/q3k/statusz"
+	"vbom.ml/util/sortorder"
 )
 
 type ServiceConfig struct {
@@ -42,7 +44,7 @@
         var dot = this.responseText;
         viz.renderSVGElement(dot)
         .then(function(element) {
-          document.body.appendChild(element);
+          document.getElementById("graph").appendChild(element);
         });
       }
     };
@@ -50,6 +52,7 @@
     xmlhttp.send();
 
   </script>
+  <div id="graph" style="text-align: center;"></div>
 `
 
 func (s *Service) Run() {
@@ -62,6 +65,8 @@
 
 	http.HandleFunc("/debug/graphviz", func(w http.ResponseWriter, r *http.Request) {
 		fmt.Fprintf(w, "graph G {\n")
+		fmt.Fprintf(w, "  ranksep = 2\n")
+		fmt.Fprintf(w, "  splines = polyline\n")
 		fmt.Fprintf(w, "  rankdir = LR\n")
 		for _, machine := range s.gr.Machines {
 			portNames := []string{}
@@ -74,7 +79,14 @@
 		}
 		for _, sw := range s.gr.Switches {
 			portNames := []string{}
+			portsOrdered := []*graph.SwitchPort{}
 			for _, port := range sw.Ports {
+				portsOrdered = append(portsOrdered, port)
+			}
+			sort.Slice(portsOrdered, func(i, j int) bool {
+				return sortorder.NaturalLess(portsOrdered[i].Name, portsOrdered[j].Name)
+			})
+			for _, port := range portsOrdered {
 				name := fmt.Sprintf("<%s> %s", port.Name, port.Name)
 				portNames = append(portNames, name)
 			}
@@ -86,7 +98,7 @@
 				if port.OtherEnd == nil {
 					continue
 				}
-				fmt.Fprintf(w, "  %s:%q -- %s:%q\n", machine.Name, port.Name, port.OtherEnd.Switch.Name, port.OtherEnd.Name)
+				fmt.Fprintf(w, "  %s:%q:e -- %s:%q:w\n", machine.Name, port.Name, port.OtherEnd.Switch.Name, port.OtherEnd.Name)
 			}
 		}
 		fmt.Fprintf(w, "}\n")