GraphvizFiddle
GraphvizFiddle
draws
DOT
language [directed] graphs, see
DOT
User's Guide
(on
http://graphviz.org/
).
It is an online code editor and playground for Graphviz
dot
layout tool, see
blog posting
for details.
DOT
input & control
canon
dot
fig
plain
ps
ps2
svg
new
/
ʍǝu
blog posting 2
initial
scalable
number
rho-221
(from Graphviz
Gallery
:
cluster
crazy
datastruct
fsm
hello
switch
)
// initial GraphvizFiddle demo // graph minimal_nonplanar_graphs { size="4,4" URL="http://en.wikipedia.org/wiki/Kuratowski_theorem#Kuratowski_subgraphs" tooltip="click for \"Kuratowski theorem\"" labelloc=t label="Minimal nonplanar graphs (9 edges / 5 nodes)" node [style=filled] subgraph cluster_0 { label="K_3,3" color=lightblue style=filled node [color=white] {A B C} -- {D E F} } subgraph cluster_1 { label=K_5 color=blue node [color=yellow shape=box] 1 -- {2 -- {3 -- {4 -- 5}}}} } }
// GraphvizFiddle scalable, other tools not // digraph G { node[style=solid]; rankdir=LR; "wdtool" [ label="http://api.graphviz.org/cgi-bin/webdot/http://...\n" +".../demo.dot.[dot|neato|...].[svg|png|...]" ]; "scalable" [ shape="diamond"]; "not scalable" [ label="not scalable" shape="diamond" URL="http://api.graphviz.org/webdot/basicpublic.html" ]; subgraph cluster_0 { style=filled; color=yellow; label = "Browser\ntool"; "Helper Tool" [shape="box"]; "GraphvizFiddle" [shape="box"]; } subgraph cluster_1 { style=filled; color=lightblue; label = "Execution\nenvironment"; node [style=filled color=yellow]; "server-side"; "client-side"; } "DOT" -> "viz.js" -> "GraphvizFiddle" -> "client-side" -> "scalable"; "DOT" -> "webdot" -> "wdtool" -> "server-side" -> "not scalable"; "DOT" -> "GViz" -> "Helper Tool" -> "server-side"; }
/* fsm for JSON "number" (http://tools.ietf.org/search/rfc4627#page-4) */ digraph G { size="12,12"; rankdir=LR; node[style=invis] A;B;C;D;E;F;G; node[style=solid]; { rank=same; "A"; "F"; "1"; } { rank=same; "E"; "G"; "11" } { rank=same; "B"; "2"; } { rank=same; "C"; "4"; } { rank=same; "D"; "7"; } "F" -> "G" [label="number\n(rfc4627)"]; "A" -> "B" [label="[minus]"]; "B" -> "C" [label="int"]; "C" -> "D" [label="[frac]"]; "D" -> "E" [label="[exp]"]; "1" -> "2" [label=""]; "1" -> "2" [label="%x2D"]; "2" -> "4" [label="%x30"]; "2" -> "3" [label="%x31-39"]; "3" -> "3" [label="%x30-39"]; "3" -> "4" [label=""]; "4" -> "7" [label=""]; "4" -> "5" [label="%x2E"]; "5" -> "6" [label="%x30-39"]; "6" -> "6" [label="%x30-39"]; "6" -> "7" [label=""]; "7" -> "11" [label=""]; "7" -> "8" [label="%x65"]; "7" -> "8" [label="%x45"]; "8" -> "9" [label=""]; "8" -> "9" [label="%x2B"]; "8" -> "9" [label="%x2D"]; "9" -> "10" [label="%x30-39"]; "10" -> "10" [label="%x30-39"]; "10" -> "11" [label=""]; }
// complete f(x)=x² mod 221 graph for Pollard's rho method digraph G { size="64,8";rankdir=BT; 0->0;1->1;2->4;3->9;4->16;5->25;6->36;7->49;8->64;9->81;10->100;11->121;15->4; 13->169;14->196;12->144;16->35;17->68;18->103;19->140;20->179;21->220;22->42; 23->87;24->134;25->183;26->13;27->66;28->121;29->178;30->16;31->77;32->140; 33->205;34->51;35->120;36->191;37->43;38->118;39->195;40->53;41->134;42->217; 43->81;44->168;45->36;46->127;47->220;48->94;49->191;50->69;51->170;52->52; 53->157;54->43;55->152;56->42;57->155;58->49;59->166;60->64;61->185;62->87; 63->212;64->118;65->26;66->157;67->69;68->204;69->120;70->38;71->179;72->101; 73->25;74->172;75->100;76->30;77->183;78->117;79->53;80->212;81->152;82->94; 83->38;84->205;85->153;86->103;87->55;88->9;89->186;90->144;91->104;92->66; 93->30;94->217;95->185;96->155;97->127;98->101;99->77;100->55;101->35;102->17; 103->1;104->208;105->196;106->186;107->178;108->172;109->168;110->166;111->166; 112->168;113->172;114->178;115->186;116->196;117->208;118->1;119->17;120->35; 121->55;122->77;123->101;124->127;125->155;126->185;127->217;128->30;129->66; 130->104;131->144;132->186;133->9;134->55;135->103;136->153;137->205;138->38; 139->94;140->152;141->212;142->53;143->117;144->183;145->30;146->100;147->172; 148->25;149->101;150->179;151->38;152->120;153->204;154->69;155->157;156->26; 157->118;158->212;159->87;160->185;161->64;162->166;163->49;164->155;165->42; 166->152;167->43;168->157;169->52;170->170;171->69;172->191;173->94;174->220; 175->127;176->36;177->168;178->81;179->217;180->134;181->53;182->195;183->118; 184->43;185->191;186->120;187->51;188->205;189->140;190->77;191->16;192->178; 193->121;194->66;195->13;196->183;197->134;198->87;199->42;200->220;201->179; 202->140;203->103;204->68;205->35;206->4;207->196;208->169;209->144;210->121; 211->100;212->81;213->64;214->49;215->36;216->25;217->16;218->9;219->4;220->1;}
digraph G { //rankdir=BT; subgraph cluster_0 { style=filled; color=lightgrey; node [style=filled,color=white]; a0 -> a1 -> a2 -> a3; label = "process #1"; } subgraph cluster_1 { node [style=filled]; b0 -> b1 -> b2 -> b3; label = "process #2"; color=blue } start -> a0; start -> b0; a1 -> b3; b2 -> a3; a3 -> a0; a3 -> end; b3 -> end; start [shape=Mdiamond]; end [shape=Msquare]; }
digraph "unix" { graph [ fontname = "Helvetica-Oblique", fontsize = 36, label = "\n\n\n\nObject Oriented Graphs\nStephen North, 3/19/93", size = "6,6" // size = "9,9" ]; node [ shape = polygon, sides = 4, distortion = "0.0", orientation = "0.0", skew = "0.0", color = white, style = filled, fontname = "Helvetica-Outline" ]; "5th Edition" [sides=9, distortion="0.936354", orientation=28, skew="-0.126818", color=salmon2]; "6th Edition" [sides=5, distortion="0.238792", orientation=11, skew="0.995935", color=deepskyblue]; "PWB 1.0" [sides=8, distortion="0.019636", orientation=79, skew="-0.440424", color=goldenrod2]; LSX [sides=9, distortion="-0.698271", orientation=22, skew="-0.195492", color=burlywood2]; "1 BSD" [sides=7, distortion="0.265084", orientation=26, skew="0.403659", color=gold1]; "Mini Unix" [distortion="0.039386", orientation=2, skew="-0.461120", color=greenyellow]; Wollongong [sides=5, distortion="0.228564", orientation=63, skew="-0.062846", color=darkseagreen]; Interdata [distortion="0.624013", orientation=56, skew="0.101396", color=dodgerblue1]; "Unix/TS 3.0" [sides=8, distortion="0.731383", orientation=43, skew="-0.824612", color=thistle2]; "PWB 2.0" [sides=6, distortion="0.592100", orientation=34, skew="-0.719269", color=darkolivegreen3]; "7th Edition" [sides=10, distortion="0.298417", orientation=65, skew="0.310367", color=chocolate]; "8th Edition" [distortion="-0.997093", orientation=50, skew="-0.061117", color=turquoise3]; "32V" [sides=7, distortion="0.878516", orientation=19, skew="0.592905", color=steelblue3]; V7M [sides=10, distortion="-0.960249", orientation=32, skew="0.460424", color=navy]; "Ultrix-11" [sides=10, distortion="-0.633186", orientation=10, skew="0.333125", color=darkseagreen4]; Xenix [sides=8, distortion="-0.337997", orientation=52, skew="-0.760726", color=coral]; "UniPlus+" [sides=7, distortion="0.788483", orientation=39, skew="-0.526284", color=darkolivegreen3]; "9th Edition" [sides=7, distortion="0.138690", orientation=55, skew="0.554049", color=coral3]; "2 BSD" [sides=7, distortion="-0.010661", orientation=84, skew="0.179249", color=blanchedalmond]; "2.8 BSD" [distortion="-0.239422", orientation=44, skew="0.053841", color=lightskyblue1]; "2.9 BSD" [distortion="-0.843381", orientation=70, skew="-0.601395", color=aquamarine2]; "3 BSD" [sides=10, distortion="0.251820", orientation=18, skew="-0.530618", color=lemonchiffon]; "4 BSD" [sides=5, distortion="-0.772300", orientation=24, skew="-0.028475", color=darkorange1]; "4.1 BSD" [distortion="-0.226170", orientation=38, skew="0.504053", color=lightyellow1]; "4.2 BSD" [sides=10, distortion="-0.807349", orientation=50, skew="-0.908842", color=darkorchid4]; "4.3 BSD" [sides=10, distortion="-0.030619", orientation=76, skew="0.985021", color=lemonchiffon2]; "Ultrix-32" [distortion="-0.644209", orientation=21, skew="0.307836", color=goldenrod3]; "PWB 1.2" [sides=7, distortion="0.640971", orientation=84, skew="-0.768455", color=cyan]; "USG 1.0" [distortion="0.758942", orientation=42, skew="0.039886", color=blue]; "CB Unix 1" [sides=9, distortion="-0.348692", orientation=42, skew="0.767058", color=firebrick]; "USG 2.0" [distortion="0.748625", orientation=74, skew="-0.647656", color=chartreuse4]; "CB Unix 2" [sides=10, distortion="0.851818", orientation=32, skew="-0.020120", color=greenyellow]; "CB Unix 3" [sides=10, distortion="0.992237", orientation=29, skew="0.256102", color=bisque4]; "Unix/TS++" [sides=6, distortion="0.545461", orientation=16, skew="0.313589", color=mistyrose2]; "PDP-11 Sys V" [sides=9, distortion="-0.267769", orientation=40, skew="0.271226", color=cadetblue1]; "USG 3.0" [distortion="-0.848455", orientation=44, skew="0.267152", color=bisque2]; "Unix/TS 1.0" [distortion="0.305594", orientation=75, skew="0.070516", color=orangered]; "TS 4.0" [sides=10, distortion="-0.641701", orientation=50, skew="-0.952502", color=crimson]; "System V.0" [sides=9, distortion="0.021556", orientation=26, skew="-0.729938", color=darkorange1]; "System V.2" [sides=6, distortion="0.985153", orientation=33, skew="-0.399752", color=darkolivegreen4]; "System V.3" [sides=7, distortion="-0.687574", orientation=58, skew="-0.180116", color=lightsteelblue1]; "5th Edition" -> "6th Edition"; "5th Edition" -> "PWB 1.0"; "6th Edition" -> LSX; "6th Edition" -> "1 BSD"; "6th Edition" -> "Mini Unix"; "6th Edition" -> Wollongong; "6th Edition" -> Interdata; Interdata -> "Unix/TS 3.0"; Interdata -> "PWB 2.0"; Interdata -> "7th Edition"; "7th Edition" -> "8th Edition"; "7th Edition" -> "32V"; "7th Edition" -> V7M; "7th Edition" -> "Ultrix-11"; "7th Edition" -> Xenix; "7th Edition" -> "UniPlus+"; V7M -> "Ultrix-11"; "8th Edition" -> "9th Edition"; "1 BSD" -> "2 BSD"; "2 BSD" -> "2.8 BSD"; "2.8 BSD" -> "Ultrix-11"; "2.8 BSD" -> "2.9 BSD"; "32V" -> "3 BSD"; "3 BSD" -> "4 BSD"; "4 BSD" -> "4.1 BSD"; "4.1 BSD" -> "4.2 BSD"; "4.1 BSD" -> "2.8 BSD"; "4.1 BSD" -> "8th Edition"; "4.2 BSD" -> "4.3 BSD"; "4.2 BSD" -> "Ultrix-32"; "PWB 1.0" -> "PWB 1.2"; "PWB 1.0" -> "USG 1.0"; "PWB 1.2" -> "PWB 2.0"; "USG 1.0" -> "CB Unix 1"; "USG 1.0" -> "USG 2.0"; "CB Unix 1" -> "CB Unix 2"; "CB Unix 2" -> "CB Unix 3"; "CB Unix 3" -> "Unix/TS++"; "CB Unix 3" -> "PDP-11 Sys V"; "USG 2.0" -> "USG 3.0"; "USG 3.0" -> "Unix/TS 3.0"; "PWB 2.0" -> "Unix/TS 3.0"; "Unix/TS 1.0" -> "Unix/TS 3.0"; "Unix/TS 3.0" -> "TS 4.0"; "Unix/TS++" -> "TS 4.0"; "CB Unix 3" -> "TS 4.0"; "TS 4.0" -> "System V.0"; "System V.0" -> "System V.2"; "System V.2" -> "System V.3"; }
digraph g { graph [ rankdir = "LR" //rankdir = "TB" ]; node [ fontsize = "16" shape = "ellipse" ]; edge [ ]; "node0" [ label = "<f0> 0x10ba8| <f1>" shape = "record" ]; "node1" [ label = "<f0> 0xf7fc4380| <f1> | <f2> |-1" shape = "record" ]; "node2" [ label = "<f0> 0xf7fc44b8| | |2" shape = "record" ]; "node3" [ label = "<f0> 3.43322790286038071e-06|44.79998779296875|0" shape = "record" ]; "node4" [ label = "<f0> 0xf7fc4380| <f1> | <f2> |2" shape = "record" ]; "node5" [ label = "<f0> (nil)| | |-1" shape = "record" ]; "node6" [ label = "<f0> 0xf7fc4380| <f1> | <f2> |1" shape = "record" ]; "node7" [ label = "<f0> 0xf7fc4380| <f1> | <f2> |2" shape = "record" ]; "node8" [ label = "<f0> (nil)| | |-1" shape = "record" ]; "node9" [ label = "<f0> (nil)| | |-1" shape = "record" ]; "node10" [ label = "<f0> (nil)| <f1> | <f2> |-1" shape = "record" ]; "node11" [ label = "<f0> (nil)| <f1> | <f2> |-1" shape = "record" ]; "node12" [ label = "<f0> 0xf7fc43e0| | |1" shape = "record" ]; "node0":f0 -> "node1":f0 [ id = 0 ]; "node0":f1 -> "node2":f0 [ id = 1 ]; "node1":f0 -> "node3":f0 [ id = 2 ]; "node1":f1 -> "node4":f0 [ id = 3 ]; "node1":f2 -> "node5":f0 [ id = 4 ]; "node4":f0 -> "node3":f0 [ id = 5 ]; "node4":f1 -> "node6":f0 [ id = 6 ]; "node4":f2 -> "node10":f0 [ id = 7 ]; "node6":f0 -> "node3":f0 [ id = 8 ]; "node6":f1 -> "node7":f0 [ id = 9 ]; "node6":f2 -> "node9":f0 [ id = 10 ]; "node7":f0 -> "node3":f0 [ id = 11 ]; "node7":f1 -> "node1":f0 [ id = 12 ]; "node7":f2 -> "node8":f0 [ id = 13 ]; "node10":f1 -> "node11":f0 [ id = 14 ]; "node10":f2 -> "node12":f0 [ id = 15 ]; "node11":f2 -> "node1":f0 [ id = 16 ]; }
digraph finite_state_machine { rankdir=LR; // rankdir=RL; size="8,5" node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8; node [shape = circle]; LR_0 -> LR_2 [ label = "SS(B)" ]; LR_0 -> LR_1 [ label = "SS(S)" ]; LR_1 -> LR_3 [ label = "S($end)" ]; LR_2 -> LR_6 [ label = "SS(b)" ]; LR_2 -> LR_5 [ label = "SS(a)" ]; LR_2 -> LR_4 [ label = "S(A)" ]; LR_5 -> LR_7 [ label = "S(b)" ]; LR_5 -> LR_5 [ label = "S(a)" ]; LR_6 -> LR_6 [ label = "S(b)" ]; LR_6 -> LR_5 [ label = "S(a)" ]; LR_7 -> LR_8 [ label = "S(b)" ]; LR_7 -> LR_5 [ label = "S(a)" ]; LR_8 -> LR_6 [ label = "S(b)" ]; LR_8 -> LR_5 [ label = "S(a)" ]; }
digraph G {Hello->World}
digraph G { graph [center=1 rankdir=LR bgcolor="#808080"] edge [dir=none] node [width=0.3 height=0.3 label=""] { node [shape=circle style=invis] 1 2 3 4 5 6 7 8 10 20 30 40 50 60 70 80 } { node [shape=circle] a b c d e f g h i j k l m n o p q r s t u v w x } { node [shape=diamond] A B C D E F G H I J K L M N O P Q R S T U V W X } 1 -> a -> {A B} [color="#0000ff"] // 1 -> a -> {A B} [color="#c0c0ff"] 2 -> b -> {B A} [color="#ff0000"] 3 -> c -> {C D} [color="#ffff00"] 4 -> d -> {D C} [color="#00ff00"] 5 -> e -> {E F} [color="#000000"] 6 -> f -> {F E} [color="#00ffff"] 7 -> g -> {G H} [color="#ffffff"] 8 -> h -> {H G} [color="#ff00ff"] { edge [color="#ff0000:#0000ff"] A -> i -> {I K} B -> j -> {J L} } { edge [color="#00ff00:#ffff00"] C -> k -> {K I} D -> l -> {L J} } { edge [color="#00ffff:#000000"] E -> m -> {M O} F -> n -> {N P} } { edge [color="#ff00ff:#ffffff"] G -> o -> {O M} H -> p -> {P N} } { edge [color="#00ff00:#ffff00:#ff0000:#0000ff"] I -> q -> {Q U} J -> r -> {R V} K -> s -> {S W} L -> t -> {T X} } { edge [color="#ff00ff:#ffffff:#00ffff:#000000"] M -> u -> {U Q} N -> v -> {V R} O -> w -> {W S} P -> x -> {X T} } { edge [color="#ff00ff:#ffffff:#00ffff:#000000:#00ff00:#ffff00:#ff0000:#0000ff"] Q -> 10 R -> 20 S -> 30 T -> 40 U -> 50 V -> 60 W -> 70 X -> 80 } }