updated docs

docs/graphs/artery_hierarchy.dot

@@ -0,0 +1,45 @@
+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]
+}