This Graphviz code creates a directed graph representing a purchase funnel flow with multiple stages, including a landing site, trial flow, and purchase funnel. The graph consists of four main clusters with nodes (represented by shapes) and edges (lines) that indicate the flow of customers between stages, including decision points and conditional labels.
%%
dot
digraph
apply
{
label = 'Purchase funnel flow'
rankdir = TB;
fontname = Helvetica
node[fontname = Helvetica, width = 1.8, height = 0.8]
edge[fontname = Helvetica, fontsize = 12, fontcolor = blue, labeldistance = 1.8]
subgraph
cluster_landing_site
{
label = 'Landing Site'
start [href = 'Good%20UX%20Intro.ipynb#Layout', shape = box, style = rounded, label = 'Customer lands\non act.com']
{
rank = same
hasaccount[shape = 'diamond', label = 'Has an account?'];
upgrade[shape = 'diamond', label = 'Offer upgrade'];
}
highlight[shape = 'box', label = 'Highlight best\nsales options'];
start:s -> hasaccount
:
n
hasaccount:e -> upgrade
:
w[label = 'Yes']
hasaccount:s -> highlight
:
n[label = 'No']
}
subgraph
cluster_trial_flow
{
label = 'Trial Flow'
rankdir = TB;
rank = same
trialemail[shape = 'box', style = 'rounded', label = 'Send trial invite']
trialinfo[shape = 'box', label = 'Collect trial\ncustomer info']
trial[shape = 'diamond', label = 'Subscribe to trial?'];
highlight -> trial
trial -> trialinfo[label = 'Yes']
trialinfo -> trialemail
}
subgraph
cluster_purchase_funnel
{
label = 'Purchase Funnel'
upgrade:s -> funnel
:
n
trial:e -> funnel
:
n[label = 'No']
funnel[shape = 'box', label = 'Purchase funnel'];
subscribe [shape = box, label = 'Subscribe']
review [shape = box, label = 'Review Selection']
hasaccount2 [shape = diamond, label = 'Has An Account?']
skiptobilling [shape = box, label = 'Skip To Billing']
setupaccount [shape = box, label = 'Set Up Account']
funnel -> subscribe
subscribe -> review
review -> hasaccount2
hasaccount2 -> setupaccount [label = 'No']
hasaccount2 -> skiptobilling [label = 'Yes']
}
subgraph
cluster_billing
{
label = 'Billing'
setupaccount -> billing
skiptobilling -> billing
billing [shape = 'box', label = 'Billing']
{
rank = same;
hasaccount3 [shape = diamond, label = 'Has an account?']
autofill [shape = box, label = 'Auto-fill Zuora\nAccount Info']
}
collectpayment [shape = box, label = 'Collect Payment Info']
confirm [shape = box, label = 'Confirmation']
thanksemail [shape = box, style = rounded, label = 'Send Thank\nYou Email']
billing -> hasaccount3
hasaccount3 -> autofill [label = 'Yes']
autofill -> collectpayment
hasaccount3 -> collectpayment [label = 'No']
collectpayment -> confirm
confirm -> thanksemail
}
}digraph apply {
# General configuration
label = 'Purchase funnel flow'
rankdir = TB;
fontname = Helvetica
# Node configuration
node[fontname = Helvetica, width = 1.8, height = 0.8]
edge[fontname = Helvetica, fontsize = 12, fontcolor = blue, labeldistance = 1.8]
# Landing Site Cluster
subgraph cluster_landing_site {
label = 'Landing Site'
start [href = 'Good%20UX%20Intro.ipynb#Layout', shape = box, style = rounded, label = 'Customer lands\non act.com']
# Has Account Decision Node
hasaccount[shape = 'diamond', label = 'Has an account?']
upgrade[shape = 'diamond', label = 'Offer upgrade']
highlight[shape = 'box', label = 'Highlight best\nsales options']
# Decision Edge
start:s -> hasaccount
hasaccount:e -> upgrade
hasaccount:s -> highlight
# Yes/No Branching
hasaccount:e -> yes[label = 'Yes']
hasaccount:s -> no[label = 'No']
}
# Trial Flow Cluster
subgraph cluster_trial_flow {
label = 'Trial Flow'
rankdir = TB;
rank = same
trialemail[shape = 'box', style = 'rounded', label = 'Send trial invite']
trialinfo[shape = 'box', label = 'Collect trial\ncustomer info']
trial[shape = 'diamond', label = 'Subscribe to trial?']
# Decision Edge
highlight -> trial
# Yes/No Branching
trial:e -> trialinfo[label = 'Yes']
trialinfo -> trialemail
}
# Purchase Funnel Cluster
subgraph cluster_purchase_funnel {
label = 'Purchase Funnel'
# Upgrade Flow
upgrade:e -> funnel[label = 'Yes']
# Trial Flow
trial:e -> funnel[label = 'Yes']
funnel[shape = 'box', label = 'Purchase funnel'];
subscribe [shape = box, label = 'Subscribe']
review [shape = box, label = 'Review Selection']
hasaccount2 [shape = diamond, label = 'Has An Account?']
skiptobilling [shape = box, label = 'Skip To Billing']
setupaccount [shape = box, label = 'Set Up Account']
# Decision Edges
funnel -> subscribe
subscribe -> review
review -> hasaccount2
hasaccount2 -> setupaccount [label = 'No']
hasaccount2 -> skiptobilling [label = 'Yes']
}
# Billing Cluster
subgraph cluster_billing {
label = 'Billing'
# Setup Account Flow
setupaccount -> billing
# Skip to Billing Flow
skiptobilling -> billing
billing [shape = 'box', label = 'Billing']
{
rank = same;
hasaccount3 [shape = diamond, label = 'Has an account?']
autofill [shape = box, label = 'Auto-fill Zuora\nAccount Info']
}
collectpayment [shape = box, label = 'Collect Payment Info']
confirm [shape = box, label = 'Confirmation']
thanksemail [shape = box, style = rounded, label = 'Send Thank\nYou Email']
# Decision Edges
billing -> hasaccount3
hasaccount3 -> autofill [label = 'Yes']
hasaccount3 -> collectpayment [label = 'No']
collectpayment -> confirm
confirm -> thanksemail
}
}This code is written in Graphviz language, used to create directed graphs.
Here's a short breakdown:
cluster_landing_site: represents the landing site where customers first interact with the application.cluster_trial_flow: represents the trial flow, where customers can opt-in for a trial version of the application.cluster_purchase_funnel: represents the purchase funnel, where customers can make a purchase.The specific elements of the code include:
label = 'Purchase funnel flow': sets the title of the graph.rankdir = TB: sets the rank direction of the graph to top-to-bottom.node[fontname = Helvetica, width = 1.8, height = 0.8]: sets the properties of nodes in the graph.edge[fontname = Helvetica, fontsize = 12, fontcolor = blue, labeldistance = 1.8]: sets the properties of edges in the graph.subgraph cluster_name {... }: defines a subgraph with a given name.node shape = box, style = rounded, label = 'Customer lands on act.com': defines a node with a given shape, style, and label.start:s -> hasaccount: defines an edge from the start node to the hasaccount node.hasaccount:e -> upgrade: defines an edge from the hasaccount node to the upgrade node.