Graphviz image nodes

It is possible for graphviz nodes to be rendered using images or svg's. However on OSX this ability has been removed by default an you will need to recompile graphviz from source to enable this.

Here are some experiments with the About Graphiviz Plugin:

digraph { Test [image="http://proto.institute/assets/daves_protip.png"] }

The plugin should probably work if we recompile graphiviz from source and then export to wasm using emscripten again:

digraph { rankdir=LR edge [dir=none] subgraph cluster_G2 { node [shape=box style=filled, width = 2.5, height = .5] G2 [fillcolor=yellow, label="Guardian"] R2 [fillcolor=green, label="Journal"] M2 [fillcolor=lightblue label="Members"] A2 [fillcolor=red label="", shape=square, width = .5, height = .5] D2 [fillcolor=darkgreen label="", shape=square, width = .5, height = .5] P2 [fillcolor=blue label="", shape=square, width = .5, height = .5] G2 -> A2 R2 -> D2 M2 -> P2 P2 -> D2 -> A2 subgraph cluster_A2 { label="Governance" { rank=same G2 R2 M2 } } subgraph cluster_P2 { label="Platform" { rank=same A2 D2 P2 } } } subgraph cluster_G1 { width=0.1 node [shape=box style=filled, width = 2.5, height = .5] G1 [fillcolor=yellow, label="Leader"] R1 [fillcolor=green, label="Journal"] M1 [fillcolor=lightblue label="Members"] A1 [fillcolor=red label="", shape=square, width = .5, height = .5] D1 [fillcolor=darkgreen label="", shape=square, width = .5, height = .5] P1 [fillcolor=blue label="", shape=square, width = .5, height = .5] G1 -> A1 R1 -> D1 M1 -> P1 P1 -> D1 -> A1 subgraph cluster_A1 { label="Governance" { rank=same G1 R1 M1 } } subgraph cluster_P1 { label="Platform" { rank=same A1 D1 P1 } } } G1 -> G2 [ltail=cluster_G2 lhead=cluster_G1]; }

# How to connect subgraphs?

Take a look at the example below - stackoverflow

digraph G { graph [fontsize=10 fontname="Verdana" compound=true]; node [shape=record fontsize=10 fontname="Verdana"]; subgraph cluster_0 { node [style=filled]; "Item 1" "Item 2"; label = "Container A"; color=blue; } subgraph cluster_1 { node [style=filled]; "Item 3" "Item 4"; label = "Container B"; color=blue; } subgraph cluster_2 { node [style=filled]; "Item 5" "Item 6"; label = "Container C"; color=blue; } // Edges between nodes render fine "Item 1" -> "Item 2"; "Item 2" -> "Item 3"; // Edges that directly connect one cluster to another "Item 1" -> "Item 3" [ltail=cluster_0 lhead=cluster_1]; "Item 1" -> "Item 5" [ltail=cluster_0 lhead=cluster_2]; }

# Pagefold

WHERE FOLD from LINKS NODE -> HERE

You'd put the name of your page fold instead of from