digraph artery_hierarchy {
    bgcolor="#0a0a0a"
    rankdir=LR
    fontname="Helvetica"
    node [fontname="Helvetica" fontsize=11 style=filled color="#333" fontcolor="#e5e5e5" shape=box]
    edge [fontname="Helvetica" fontsize=9 fontcolor="#a3a3a3" color="#b91c1c"]

    label="Artery — Component Hierarchy"
    labelloc=t
    fontsize=14
    fontcolor="#fca5a5"

    vein [label="Vein\nstateless API connector" fillcolor="#1a1a1a"]
    pulse [label="Pulse\nVein + Room + Depot" fillcolor="#1a1a1a"]
    plexus [label="Plexus\nfull app: backend\n+ frontend + DB" fillcolor="#1a1a1a"]
    shunt [label="Shunt\nfake connector\nfor testing" fillcolor="#1a1a1a" color="#d4a574"]

    vein -> pulse [label="compose"]
    pulse -> plexus [label="extend"]
    shunt -> vein [label="replaces" style=dashed color="#d4a574" fontcolor="#d4a574"]

    // Examples
    subgraph cluster_examples {
        label="Live Veins"
        style=dashed
        color="#333"
        fontcolor="#666"

        jira [label="Jira" fillcolor="#1a1a1a" fontcolor="#15803d" fontsize=9]
        google [label="Google" fillcolor="#1a1a1a" fontcolor="#d4a574" fontsize=9]
        ia [label="IA" fillcolor="#1a1a1a" fontcolor="#15803d" fontsize=9]
    }

    subgraph cluster_shunts {
        label="Shunts"
        style=dashed
        color="#333"
        fontcolor="#666"

        mp [label="MercadoPago" fillcolor="#1a1a1a" fontcolor="#d4a574" fontsize=9]
    }

    jira -> vein [style=invis]
    mp -> shunt [style=invis]
}