digraph ArteryHierarchy {
    // Graph settings
    rankdir=LR;
    compound=true;
    fontname="Helvetica";
    node [fontname="Helvetica", fontsize=11];
    edge [fontname="Helvetica", fontsize=10];

    // Title
    labelloc="t";
    label="Artery - Connector Hierarchy";
    fontsize=16;

    // Styling
    node [shape=box, style="rounded,filled"];

    // Main hierarchy
    subgraph cluster_main {
        label="Evolution Path";
        style=filled;
        color="#E8F5E9";
        fillcolor="#E8F5E9";

        vein [label="Vein\n\nStateless API connector\ne.g., Jira, Slack, Google", fillcolor="#C8E6C9", width=2.5];
        pulse [label="Pulse\n\nVein + Room + Depot\ne.g., Jira for AMAR project", fillcolor="#A5D6A7", width=2.5];
        plexus [label="Plexus\n\nFull app: backend + frontend + DB\ne.g., WhatsApp with chat UI", fillcolor="#81C784", width=2.5];
    }

    // Mock path
    subgraph cluster_mock {
        label="Testing Path";
        style=filled;
        color="#FFF3E0";
        fillcolor="#FFF3E0";

        shunt [label="Shunt\n\nFake connector for testing\ne.g., mercadopago mock", fillcolor="#FFCC80", width=2.5];
    }

    // Connections
    vein -> pulse [label="+ Room\n+ Depot"];
    pulse -> plexus [label="+ Backend\n+ Frontend\n+ DB"];
    vein -> shunt [label="mock", style=dashed, constraint=false];

    // Properties table
    subgraph cluster_props {
        label="Properties";
        style=filled;
        color="#F5F5F5";
        fillcolor="#F5F5F5";

        props [shape=plaintext, label=<
            <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="8">
                <TR>
                    <TD BGCOLOR="#EEEEEE"><B>Type</B></TD>
                    <TD BGCOLOR="#EEEEEE"><B>State</B></TD>
                    <TD BGCOLOR="#EEEEEE"><B>Frontend</B></TD>
                    <TD BGCOLOR="#EEEEEE"><B>Deploy</B></TD>
                </TR>
                <TR>
                    <TD>Vein</TD>
                    <TD>None (or OAuth)</TD>
                    <TD>Optional test UI</TD>
                    <TD>With soleprint</TD>
                </TR>
                <TR>
                    <TD>Shunt</TD>
                    <TD>Configurable</TD>
                    <TD>Config UI</TD>
                    <TD>With soleprint</TD>
                </TR>
                <TR>
                    <TD>Pulse</TD>
                    <TD>Vein + config</TD>
                    <TD>Uses vein's</TD>
                    <TD>With soleprint</TD>
                </TR>
                <TR>
                    <TD>Plexus</TD>
                    <TD>Full app state</TD>
                    <TD>Required</TD>
                    <TD>Self-contained</TD>
                </TR>
            </TABLE>
        >];
    }
}