The code represents an e-commerce Angular portal as a directed graph, including clusters for customers, purchases, and products, with various nodes and edges styling and invisible connections. The graph is configured to display the different stages of the purchase process, including billing information, confirmation, and progress tracking, within a "Purchase Funnel" subgraph.
%%
dot
digraph
apply
{
label = 'Ecommerce Angular Portal'
rankdir = LR;
fontname = Helvetica
node[fontname = Helvetica, width = 1.8, height = 0.8]
edge[fontname = Helvetica, fontsize = 12, fontcolor = blue, labeldistance = 1.8]
rank = same
{
ranksep = equally
partner2[style = invis]
shared2[style = invis]
customer2[style = invis]
partner2 -> shared2 -> customer2[style = 'invis']
}
subgraph
cluster_customer
{
label = 'Customer'
customerAnchor[style = invis]
customer2 -> customerAnchor[style = 'invis'
constraint = false
]
subgraph
cluster_purchase
{
label = 'Purchase'
subgraph
cluster_funnel
{
label = 'Purchase Funnel'
billing[shape = box, label = 'Billing Information']
confirm[shape = box, label = 'Confirmation']
funnelFooter[shape = box, label = 'Footer']
subtotal[shape = box, label = 'Subtotal']
tracker[shape = box, label = 'Progress Tracker']
{
rank = same
billing
confirm
funnelFooter
}
->
{
rank = same
subtotal
tracker
}
[style = invis]
}
productDescription[shape = box, label = 'Product Description']
productSummary[shape = box, label = 'Product Summary']
productTile[shape = box, label = 'Product Tile']
productTiles[shape = box, label = 'Product Tiles']
{
rank = same
productDescription
productSummary
}
->
{
rank = same
productTile
productTiles
}
[style = invis]
}
subgraph
cluster_pages
{
label = 'Pages'
contact[shape = box, label = 'Contact']
demo[shape = box, label = 'Confirmation']
home[shape = box, label = 'Home']
trial[shape = box, label = 'Trial']
{
rank = same
contact
demo
}
->
{
rank = same
home
trial
}
[style = invis]
}
}
subgraph
cluster_partner
{
label = 'Partner'
customers[shape = box, label = 'Customers']
subscriptions[shape = box, label = 'Subscriptions']
invoices[shape = box, label = 'Invoices']
billingOptions[shape = box, label = 'Billing']
partnerAnchor[style = invis]
partner2 -> partnerAnchor[style = 'invis'
constraint = false
]
}
subgraph
cluster_shared
{
label = 'Shared Components'
sharedAnchor[style = invis]
shared2 -> sharedAnchor[style = 'invis'
constraint = false
]
subgraph
cluster_auth
{
label = 'Auth'
forgot[shape = box, label = 'Forgot Password']
login[shape = box, label = 'Login']
logout[shape = box, label = 'Logout']
register[shape = box, label = 'Register']
reset[shape = box, label = 'Reset Password']
{
rank = same
forgot
login
logout
}
->
{
rank = same
register
reset
}
[style = invis]
}
subgraph
cluster_layout
{
label = 'Layout'
accountLinks[shape = box, label = 'Account Login']
footer[shape = box, label = 'Footer']
language[shape = box, label = 'Language Select']
menu[shape = box, label = 'Main Menu']
support[shape = box, label = 'Support Menu']
toolbar[shape = box, label = 'Toolbar']
{
rank = same
accountLinks
footer
language
}
->
{
rank = same
menu
support
toolbar
}
[style = invis]
}
subgraph
cluster_subscription
{
label = 'Subscription'
actTiles[shape = box, label = 'Tiles']
actemarketing[shape = box, label = 'EMarketing']
actpremium[shape = box, label = 'Act Premium']
actpremiumcloud[shape = box, label = 'Act Premium Cloud']
actpro[shape = box, label = 'Act Pro']
handheld[shape = box, label = 'Handheld Contact']
subscription[shape = box, label = 'Subscription']
support[shape = box, label = 'Support']
{
rank = same
actTiles
actemarketing
actpremium
actpremiumcloud
}
->
{
rank = same
actpro
handheld
subscription
support
}
[style = invis]
}
}
partnerAnchor -> sharedAnchor -> customerAnchor[style = 'invis'
minlen = 3
]
}
digraph EcommercePortal {
# Node styles
node[shape=box, style=filled, fontname=Helvetica, width=1.8, height=0.8]
# Edge styles
edge[fontname=Helvetica, fontsize=12, fontcolor=blue, labeldistance=1.8]
# Node positions
rankdir=LR
# Node labels
label="Ecommerce Angular Portal"
fontname=Helvetica
# Cluster definitions
subgraph cluster_customer {
label="Customer"
}
subgraph cluster_partner {
label="Partner"
}
subgraph cluster_shared {
label="Shared Components"
}
# Node definitions
customer_anchor[label="", style=invis, width=0]
shared_anchor[label="", style=invis, width=0]
partner_anchor[label="", style=invis, width=0]
customer[label="Customer"]
partner[label="Partner"]
shared[label="Shared Components"]
product_tile[label="Product Tile", shape=box]
product_tiles[label="Product Tiles", shape=box]
product_description[label="Product Description", shape=box]
product_summary[label="Product Summary", shape=box]
billing[label="Billing Information", shape=box]
confirm[label="Confirmation", shape=box]
funnel_footer[label="Footer", shape=box]
subtotal[label="Subtotal", shape=box]
tracker[label="Progress Tracker", shape=box]
# Subcluster definitions
subgraph cluster_purchase {
label="Purchase"
}
subgraph cluster_pages {
label="Pages"
}
subgraph cluster_auth {
label="Auth"
}
subgraph cluster_layout {
label="Layout"
}
subgraph cluster_subscription {
label="Subscription"
}
# Edge definitions
partner -> shared -> customer[label=""]
shared -> product_tile[label=""]
shared -> product_tiles[label=""]
customer -> billing[label=""]
customer -> confirm[label=""]
customer -> funnel_footer[label=""]
customer -> subtotal[label=""]
customer -> tracker[label=""]
shared -> product_description[label=""]
shared -> product_summary[label=""]
product_tile -> product_tiles[label=""]
product_description -> product_summary[label=""]
customer -> product_tile[label=""]
customer -> product_tiles[label=""]
shared -> billing[label=""]
shared -> confirm[label=""]
# Subedge definitions
subgraph cluster_purchase {
billing -> confirm[label=""]
confirm -> funnel_footer[label=""]
funnel_footer -> subtotal[label=""]
subtotal -> tracker[label=""]
}
subgraph cluster_pages {
contact -> demo[label=""]
demo -> home[label=""]
home -> trial[label=""]
}
subgraph cluster_auth {
forgot -> login[label=""]
login -> logout[label=""]
logout -> register[label=""]
register -> reset[label=""]
}
subgraph cluster_layout {
account_links -> footer[label=""]
footer -> language[label=""]
language -> menu[label=""]
menu -> support[label=""]
support -> toolbar[label=""]
}
subgraph cluster_subscription {
act_tiles -> actemarketing[label=""]
actemarketing -> actpremium[label=""]
actpremium -> actpremiumcloud[label=""]
actpremiumcloud -> actpro[label=""]
actpro -> handheld[label=""]
handheld -> subscription[label=""]
subscription -> support[label=""]
}
# Invisible edges to connect clusters
partner_anchor -> shared_anchor[label="", style=invis]
shared_anchor -> customer_anchor[label="", style=invis]
}This is a Graphviz DOT file that represents an e-commerce Angular portal as a directed graph.
digraph specifies that the graph is directed.apply is not used here, it seems to be a leftover or a placeholder.label sets the title of the graph to "Ecommerce Angular Portal".rankdir sets the direction of the graph to left-to-right (LR).fontname sets the font to Helvetica.node and edge specify the styling for nodes and edges, respectively.fontname and fontsize are set to match the graph title.fontcolor is set to blue.labeldistance is set to 1.8.partner2, shared2, and customer2 nodes.customerAnchor is created to serve as an anchor for the customer2 node.customer2 is assigned to this cluster.