diff --git a/README.md b/README.md
index bc4dc15..00c8ab4 100644
--- a/README.md
+++ b/README.md
@@ -37,48 +37,7 @@ Weatherproof Enclosure: [weatherproof-cover-for-outdoor-sensors](https://shop.pi
 
 _Note: I would not recommend buying from pimoroni from EU as shipping tax is huge!_
 
-```
-┌────────────────────────────────────────────┐
-│                   Node1                    │
-│                                            │
-│                                            │
-│ ┌────────────────────────┐     ┌─────────┐ │
-│ │                        │     │         │ │
-│ │         bme280         │     │ pms5003 │ │
-│ │                        │     │         │ │
-│ └────────────┬───────────┘     └────┬────┘ │
-│              │                      │      │
-│              │                      │      │
-│             i2c                     │      │
-│              │                    uart     │
-│              ▼                      │      │
-│ ┌────────────────────────┐          │      │
-│ │                        │          │      │
-│ │         rp2040         │◄─────────┘      │
-│ │                        │                 │
-│ └────────────┬───────────┘                 │
-│              │                             │
-└──────────────┼─────────────────────────────┘
-          Custom TCP                          
-               │                              
-               ▼                              
-  ┌────────────────────────┐                  
-  │                        │                  
-  │      Event Proxy       │                  
-  │                        │                  
-  └────────────┬───────────┘                  
-               │                              
-               │                              
-             mqtt                             
-               │                              
-               ▼                              
-  ┌────────────────────────┐                  
-  │                        │                  
-  │ Home Assistant Servier │                  
-  │                        │                  
-  └────────────────────────┘                  
-```
-
+![arch](diagrams/arch.svg)
 
 ## Helpful links
 
diff --git a/diagrams/arch.svg b/diagrams/arch.svg
new file mode 100644
index 0000000..927da42
--- /dev/null
+++ b/diagrams/arch.svg
@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.95 691" width="304.95" height="691" style="--bg:#FFFFFF;--fg:#27272A;background:var(--bg)">
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');
+  text { font-family: 'Inter', system-ui, sans-serif; }
+  svg {
+    /* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
+    --_text:          var(--fg);
+    --_text-sec:      var(--muted, color-mix(in srgb, var(--fg) 60%, var(--bg)));
+    --_text-muted:    var(--muted, color-mix(in srgb, var(--fg) 40%, var(--bg)));
+    --_text-faint:    color-mix(in srgb, var(--fg) 25%, var(--bg));
+    --_line:          var(--line, color-mix(in srgb, var(--fg) 30%, var(--bg)));
+    --_arrow:         var(--accent, color-mix(in srgb, var(--fg) 50%, var(--bg)));
+    --_node-fill:     var(--surface, color-mix(in srgb, var(--fg) 3%, var(--bg)));
+    --_node-stroke:   var(--border, color-mix(in srgb, var(--fg) 20%, var(--bg)));
+    --_group-fill:    var(--bg);
+    --_group-hdr:     color-mix(in srgb, var(--fg) 5%, var(--bg));
+    --_inner-stroke:  color-mix(in srgb, var(--fg) 12%, var(--bg));
+    --_key-badge:     color-mix(in srgb, var(--fg) 10%, var(--bg));
+  }
+</style>
+<defs>
+  <marker id="arrowhead" markerWidth="8" markerHeight="4.8" refX="8" refY="2.4" orient="auto">
+    <polygon points="0 0, 8 2.4, 0 4.8" fill="var(--_arrow)" />
+  </marker>
+  <marker id="arrowhead-start" markerWidth="8" markerHeight="4.8" refX="0" refY="2.4" orient="auto-start-reverse">
+    <polygon points="8 0, 0 2.4, 8 4.8" fill="var(--_arrow)" />
+  </marker>
+</defs>
+<rect x="40" y="40" width="224.95" height="285" rx="0" ry="0" fill="var(--_group-fill)" stroke="var(--_node-stroke)" stroke-width="1" />
+<rect x="40" y="40" width="224.95" height="28" rx="0" ry="0" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="1" />
+<text x="52" y="54" dy="0.35em" font-size="12" font-weight="600" fill="var(--_text-sec)">Node1</text>
+<polyline points="99.44999999999999,132 99.44999999999999,287 113.2375,287" fill="none" stroke="var(--_line)" stroke-width="0.75" marker-end="url(#arrowhead)" />
+<polyline points="201.925,132 201.925,287 188.1375,287" fill="none" stroke="var(--_line)" stroke-width="0.75" marker-end="url(#arrowhead)" />
+<polyline points="150.6875,305 150.6875,442" fill="none" stroke="var(--_line)" stroke-width="0.75" marker-end="url(#arrowhead)" />
+<polyline points="150.6875,478 150.6875,615" fill="none" stroke="var(--_line)" stroke-width="0.75" marker-end="url(#arrowhead)" />
+<rect x="82.86999999999999" y="187" width="33.16" height="27" rx="4" ry="4" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />
+<text x="99.44999999999999" y="200.5" text-anchor="middle" dy="0.35em" font-size="11" font-weight="400" fill="var(--_text-muted)">i2c</text>
+<rect x="182.485" y="187" width="38.88" height="27" rx="4" ry="4" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />
+<text x="201.925" y="200.5" text-anchor="middle" dy="0.35em" font-size="11" font-weight="400" fill="var(--_text-muted)">uart</text>
+<rect x="114.0875" y="360" width="73.2" height="27" rx="4" ry="4" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />
+<text x="150.6875" y="373.5" text-anchor="middle" dy="0.35em" font-size="11" font-weight="400" fill="var(--_text-muted)">Custom TCP</text>
+<rect x="131.2475" y="533" width="38.88" height="27" rx="4" ry="4" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />
+<text x="150.6875" y="546.5" text-anchor="middle" dy="0.35em" font-size="11" font-weight="400" fill="var(--_text-muted)">mqtt</text>
+<rect x="95.3625" y="442" width="110.65" height="36" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
+<rect x="56.037499999999994" y="615" width="189.3" height="36" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
+<rect x="61.999999999999986" y="96" width="74.9" height="36" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
+<rect x="113.2375" y="269" width="74.9" height="36" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
+<rect x="160.9" y="96" width="82.05000000000001" height="36" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
+<text x="150.6875" y="460" text-anchor="middle" dy="0.35em" font-size="13" font-weight="500" fill="var(--_text)">Event Proxy</text>
+<text x="150.6875" y="633" text-anchor="middle" dy="0.35em" font-size="13" font-weight="500" fill="var(--_text)">Home Assistant Servier</text>
+<text x="99.44999999999999" y="114" text-anchor="middle" dy="0.35em" font-size="13" font-weight="500" fill="var(--_text)">bme280</text>
+<text x="150.6875" y="287" text-anchor="middle" dy="0.35em" font-size="13" font-weight="500" fill="var(--_text)">rp2040</text>
+<text x="201.925" y="114" text-anchor="middle" dy="0.35em" font-size="13" font-weight="500" fill="var(--_text)">pms5003</text>
+</svg>
diff --git a/diagrams/index.ts b/diagrams/index.ts
index 3b22ee6..eb68de5 100644
--- a/diagrams/index.ts
+++ b/diagrams/index.ts
@@ -1,6 +1,6 @@
-import { renderMermaidAscii } from "beautiful-mermaid";
+import { renderMermaid } from "beautiful-mermaid";
 
-const ascii = renderMermaidAscii(`
+const diagram = await renderMermaid(`
   flowchart TD
       subgraph Node1
         bme280 -->|i2c| rp2040
@@ -10,4 +10,4 @@ const ascii = renderMermaidAscii(`
       proxy -->|mqtt| ha[Home Assistant Servier]
 
 `);
-console.log(ascii);
+console.log(diagram);