Loading...
digraph ladder { ranksep=".2";
# Define the defaults
graph [fontname="'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif"] ;
node [shape=point, width=0 color="#8699a3", fontsize=10 fontname="'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif"]
edge [dir=none fontsize=10 fontname="'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif", fontcolor="#34495e", arrowsize=0.7]
# Column labels
user [shape=rect, width=1 style="rounded,filled", fillcolor="#3ab882", color="#3ab882", fontcolor="#FFFFFF", label=":User"]
browserserver [style="inivis"]
browser [shape=rect, width=1 style="rounded,filled", fillcolor="#8e7cc3", color="#8e7cc3", fontcolor="#FFFFFF", label=":Browser" ]
server [shape=rect, width=1 style="rounded,filled", fillcolor="#fcb738", color="#fcb738", fontcolor="#FFFFFF", label=":Server"]
serverserver [style="inivis"]
Auser [shape=note, width=1 style="rounded,filled", fillcolor="#3ab882", color="#8699a3", fontcolor="#FFFFFF", label="User \ninteraction"]
Abrowserserver [style="invis" shape=note]
Abrowser [shape=note, width=1 style="rounded,filled", fillcolor="#8e7cc3", color="#8699a3", fontcolor="#FFFFFF", label="Client side\nexecution" ]
Aserver [shape=note, width=1 style="rounded,filled", fillcolor="#fcb738", color="#8699a3", fontcolor="#FFFFFF", label="Server side\nexecution"]
Aserverserver [style="invis"]
#DOTS IN COLUMNS
u1 [width=0.05]
b1 [width=0.05]
b2 [width=0.05]
b4 [width=0.05]
b6 [width=0.05]
s3 [width=0.05]
b12 [width=0.05]
b14 [width=0.05]
# Draw the 4 column headings, no line
{ rank=same; edge[style=invis] user -> browser -> browserserver -> server -> serverserver }
# Draw vertical columns
user -> u0 [weight=1000, color="#8699a3" style="dotted"]
u1 -> u2 -> u3 -> u4 -> u5 -> u6 -> u7 -> u8 -> u9 -> u10 -> u11 -> u12 -> u13 -> u14 [weight=1000, color="#8699a3" ]
browser -> b0 [weight=1000, color="#8699a3" style="dotted"]
b1 -> b2 -> b3 -> b4 -> b5 -> b6 -> b7 -> b8 -> b9 -> b10 -> b11 -> b12 -> b13 -> b14 [weight=1000, color="#8699a3"]
browserserver -> ub1 [weight=1000, color="#8699a3" style="invis"]
ub1 -> ub2 -> ub3 -> ub4 -> ub5 -> ub6 -> ub7 -> ub8 -> ub9 -> ub10 -> ub11 -> ub12 -> ub13 -> ub14 [weight=1000, color="#8699a3", style="invis"]
server -> s0 [weight=1000, color="#8699a3" style="dotted"]
s3 -> s4 -> s5 -> s6 ->s7 -> s8 -> s9 -> s10 -> s11 -> s12 -> s13 -> s14 [weight=1000, color="#8699a3" style="dotted"]
serverserver -> ss1 [weight=1000, color="#8699a3" style="invis"]
ss1-> ss2 -> ss3 -> ss4 -> ss5 -> ss6 -> ss7 -> ss8 -> ss9 -> ss10 -> ss11 -> ss12 -> ss13 -> ss14 [weight=1000, color="#8699a3", style="invis"]
Auser -> user [style=invis]
Abrowser -> browser [style=invis]
Abrowserserver -> browserserver [style=invis]
Aserver -> server [style=invis]
Aserverserver -> serverserver [style=invis]
#VERTICAL DOTTED LINES
u0-> u1 [weight=1000, color="#8699a3", style="dotted"]
b0 -> b1 [weight=1000, color="#8699a3", style="dotted"]
ub0 -> ub1 [weight=1000, color="#8699a3", style="invis"]
s0 -> s2 [weight=1000, color="#8699a3", style="dotted"]
ss0 -> ss1 [weight=1000, color="#8699a3", style="invis"]
u14-> u15 [weight=1000, color="#8699a3", style="dotted"]
b14 -> b15 [weight=1000, color="#8699a3", style="dotted"]
ub14 -> ub15 [weight=1000, color="#8699a3", style="invis"]
s14 -> s15 [weight=1000, color="#8699a3", style="dotted"]
ss14 -> ss15 [weight=1000, color="#8699a3", style="invis"]
#VERTICAL NOT DOTED LINES
s2 -> s3 [weight=1000, color="#8699a3" ]
# Now each step in the ladder
{ rank=same;
u1 -> b1 [dir=forward label="type in some field" color="#3ab882" ] }
{ rank=same;
b2 -> ub2 [dir=forward arrowhead="none" label="" color="#3ab882" ]
ub2 -> s2 [dir=forward label="1. Execute SoftReference Validation Statement " color="#3ab882" ] }
{ rank=same;
ub3 -> s3 [dir=back arrowtail="none" label="Return map of related values" color="#3ab882" ]
b3 -> ub3 [dir=back color="#3ab882" ]
}
{ rank=same;
b4 -> ub4 [dir=forward arrowhead="none" label=" "color="#3ab882" ] }
ub5 -> ub4 [color="#3ab882" arrowhead="none" label=" 2. Eval columnOptions reactive expression"]
{ rank=same;
b5 -> ub5 [color="#3ab882" dir=back arrowhead="none" ] }
{ rank=same;
b6 -> ub6 [dir=forward arrowhead="none" label=" "color="#3ab882" ] }
ub7 -> ub6 [color="#3ab882" arrowhead="none" label=" 3. Eval column validation expression"]
{ rank=same;
b7 -> ub7 [color="#3ab882" dir=back arrowhead="none" ] }
{ rank=same;
b8 -> ub8 [dir=forward arrowhead="none" label=" "color="#3ab882" ] }
ub9 -> ub8 [color="#3ab882" arrowhead="none" label=" 4. Eval columnOptions nullable expression"]
{ rank=same;
b9 -> ub9 [color="#3ab882" dir=back arrowhead="none" ] }
{ rank=same;
b10 -> ub10 [dir=forward arrowhead="none" label=" "color="#3ab882" ] }
ub11 -> ub10 [color="#3ab882" arrowhead="none" label=" 5. Eval columnOptions editable expression"]
{ rank=same;
b11 -> ub11 [color="#3ab882" dir=back arrowhead="none" ] }
{ rank=same;
b12 -> ub12 [dir=forward arrowhead="none" label=" "color="#3ab882" ] }
ub13 -> ub12 [color="#3ab882" arrowhead="none" label=" 6. Execute field onchange event"]
{ rank=same;
b13 -> ub13 [color="#3ab882" dir=back arrowhead="none" ] }
{ rank=same;
u14 -> b14 [dir=back label="Update fields with related values" color="#3ab882" ]
}
}