diff --git a/docs/docs/assets/splits/mermaid-connection.png b/docs/docs/assets/splits/mermaid-connection.png
new file mode 100644
index 00000000..0087ed48
Binary files /dev/null and b/docs/docs/assets/splits/mermaid-connection.png differ
diff --git a/docs/docs/assets/splits/mermaid-connection.svg b/docs/docs/assets/splits/mermaid-connection.svg
deleted file mode 100644
index 877ddb64..00000000
--- a/docs/docs/assets/splits/mermaid-connection.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg aria-roledescription="flowchart-v2" role="graphics-document document" style="overflow: hidden; max-width: 100%;" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-div" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"><style>@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");'</style><g id="viewport-20240804091833901" class="svg-pan-zoom_viewport" transform="matrix(3.8842716485735926,0,0,3.8842716485735926,31.074173188588702,109.83400656399897)" style="transform: matrix(3.88427, 0, 0, 3.88427, 31.0742, 109.834);"><style>#graph-div{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;fill:#333;}#graph-div .error-icon{fill:hsl(60, 90%, 100%);}#graph-div .error-text{fill:rgb(0, 0, 0);stroke:rgb(0, 0, 0);}#graph-div .edge-thickness-normal{stroke-width:2px;}#graph-div .edge-thickness-thick{stroke-width:3.5px;}#graph-div .edge-pattern-solid{stroke-dasharray:0;}#graph-div .edge-pattern-dashed{stroke-dasharray:3;}#graph-div .edge-pattern-dotted{stroke-dasharray:2;}#graph-div .marker{fill:#0b0b0b;stroke:#0b0b0b;}#graph-div .marker.cross{stroke:#0b0b0b;}#graph-div svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;}#graph-div .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#graph-div .cluster-label text{fill:rgb(0, 0, 0);}#graph-div .cluster-label span,#graph-div p{color:rgb(0, 0, 0);}#graph-div .label text,#graph-div span,#graph-div p{fill:#333;color:#333;}#graph-div .node rect,#graph-div .node circle,#graph-div .node ellipse,#graph-div .node polygon,#graph-div .node path{fill:#ECECFE;stroke:#BCBCFB;stroke-width:1px;}#graph-div .flowchart-label text{text-anchor:middle;}#graph-div .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#graph-div .node .label{text-align:center;}#graph-div .node.clickable{cursor:pointer;}#graph-div .arrowheadPath{fill:#0b0b0b;}#graph-div .edgePath .path{stroke:#0b0b0b;stroke-width:2.0px;}#graph-div .flowchart-link{stroke:#0b0b0b;fill:none;}#graph-div .edgeLabel{background-color:#E9E9F1;text-align:center;}#graph-div .edgeLabel rect{opacity:0.5;background-color:#E9E9F1;fill:#E9E9F1;}#graph-div .labelBkg{background-color:rgba(233, 233, 241, 0.5);}#graph-div .cluster rect{fill:hsl(60, 90%, 100%);stroke:hsl(60, 50%, 90%);stroke-width:1px;}#graph-div .cluster text{fill:rgb(0, 0, 0);}#graph-div .cluster span,#graph-div p{color:rgb(0, 0, 0);}#graph-div div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(60, 90%, 100%);border:1px solid hsl(60, 50%, 90%);border-radius:2px;pointer-events:none;z-index:100;}#graph-div .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#graph-div :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><style media="screen" class="darkreader darkreader--sync"></style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="graph-div_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="graph-div_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="graph-div_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="graph-div_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="graph-div_flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="graph-div_flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-A LE-DONGLE" data-edge="true" id="L-A-DONGLE-0" d="M144.73,44.3L144.73,49.583C144.73,54.867,144.73,65.433,144.73,76C144.73,86.567,144.73,97.133,144.73,102.417L144.73,107.7"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" style="fill: none; stroke-width: 2px; stroke-dasharray: 3; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-dotted flowchart-link LS-DONGLE LE-LEFT" data-edge="true" id="L-DONGLE-LEFT-0" d="M115.096,152L105.725,158.167C96.353,164.333,77.61,176.667,68.239,188.117C58.867,199.567,58.867,210.133,58.867,215.417L58.867,220.7"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" style="fill: none; stroke-width: 2px; stroke-dasharray: 3; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-dotted flowchart-link LS-DONGLE LE-RIGHT" data-edge="true" id="L-DONGLE-RIGHT-0" d="M174.365,152L183.736,158.167C193.108,164.333,211.851,176.667,221.222,188.117C230.594,199.567,230.594,210.133,230.594,215.417L230.594,220.7"></path></g><g class="edgeLabels"><g transform="translate(144.73046875, 76)" class="edgeLabel"><g transform="translate(-25.3515625, -12)" data-id="L-A-DONGLE-0" class="label"><foreignObject height="24" width="50.703125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">USB/BLE</span></div></foreignObject></g></g><g transform="translate(58.8671875, 189)" class="edgeLabel"><g transform="translate(-11.34375, -12)" data-id="L-DONGLE-LEFT-0" class="label"><foreignObject height="24" width="22.6875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">BLE</span></div></foreignObject></g></g><g transform="translate(230.59375, 189)" class="edgeLabel"><g transform="translate(-11.34375, -12)" data-id="L-DONGLE-RIGHT-0" class="label"><foreignObject height="24" width="22.6875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">BLE</span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(144.73046875, 19.5)" data-id="A" data-node="true" id="flowchart-A-118" class="node default default flowchart-label"><rect height="39" width="135.71875" y="-19.5" x="-67.859375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-60.359375, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="120.71875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Computer/Host Device</span></div></foreignObject></g></g><g transform="translate(144.73046875, 132.5)" data-id="DONGLE" data-node="true" id="flowchart-DONGLE-119" class="node default default flowchart-label"><rect height="39" width="95.046875" y="-19.5" x="-47.5234375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-40.0234375, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="80.046875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Dongle/Central</span></div></foreignObject></g></g><g transform="translate(58.8671875, 245.5)" data-id="LEFT" data-node="true" id="flowchart-LEFT-121" class="node default default flowchart-label"><rect height="39" width="117.734375" y="-19.5" x="-58.8671875" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-51.3671875, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="102.734375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Left Half/Peripheral</span></div></foreignObject></g></g><g transform="translate(230.59375, 245.5)" data-id="RIGHT" data-node="true" id="flowchart-RIGHT-123" class="node default default flowchart-label"><rect height="39" width="125.71875" y="-19.5" x="-62.859375" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-55.359375, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="110.71875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Right Half/Peripheral</span></div></foreignObject></g></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/features/splits.mdx b/docs/docs/features/splits.mdx
index a4bc68cc..ed7e6806 100644
--- a/docs/docs/features/splits.mdx
+++ b/docs/docs/features/splits.mdx
@@ -19,13 +19,13 @@ Dongles are usually connected to the host device using USB. This way the central
 and the peripheral halves can be powered by their own batteries. This setup allows both halves of the keyboard to have a longer battery life.
 
 
-![Mermaid Connection](../assets/splits/mermaid-connection.svg)
+![Mermaid Connection](../assets/splits/mermaid-connection.png)
 
 {/* Here is an example diagram of a split keyboard with a dongle:
 
 ```mermaid
 graph TD;
-    A[Computer/Host Device] <-- USB/BLE --> DONGLE[Dongle/Central];
+    A[Computer/Host Device] <-- USB or BLE --> DONGLE[Dongle/Central];
     DONGLE -. BLE .-> LEFT[Left Half/Peripheral];
     DONGLE -. BLE .-> RIGHT[Right Half/Peripheral];
 ```