diff --git a/docs/source/planning/design.drawio b/docs/source/planning/design.drawio
index 2a7d064835c06d626fab33dbf8baa34809db780c..297de3a7958ecc841e8176b1e72d0a4adf262c89 100644
--- a/docs/source/planning/design.drawio
+++ b/docs/source/planning/design.drawio
@@ -1,4 +1,4 @@
-<mxfile host="Electron" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/26.0.9 Chrome/128.0.6613.186 Electron/32.2.5 Safari/537.36" version="26.0.9" pages="2">
+<mxfile host="Electron" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/26.0.9 Chrome/128.0.6613.186 Electron/32.2.5 Safari/537.36" version="26.0.9" pages="3">
   <diagram name="hl-arch" id="52Qc7nEq3IphXZwXqFKS">
     <mxGraphModel dx="1841" dy="664" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
       <root>
@@ -227,4 +227,40 @@
       </root>
     </mxGraphModel>
   </diagram>
+  <diagram id="Sg8FFZnVH_nSFxczj_8h" name="svg-class-schematic">
+    <mxGraphModel dx="1014" dy="664" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="6I3-yhUzZdZ5X9dP0GwG-2" value="" style="whiteSpace=wrap;html=1;shape=mxgraph.basic.document" vertex="1" parent="1">
+          <mxGeometry x="364" width="436" height="440" as="geometry" />
+        </mxCell>
+        <mxCell id="6I3-yhUzZdZ5X9dP0GwG-1" value="&lt;pre lang=&quot;xml&quot; class=&quot;code highlight&quot;&gt;&amp;lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; ...&amp;gt;&lt;br&gt;  &amp;lt;defs&amp;gt;&lt;br&gt;    &amp;lt;style&amp;gt;&lt;br&gt;      .up {&lt;br&gt;        fill: #00ff00;&lt;br&gt;      }&lt;br&gt;      .down {&lt;br&gt;        fill: #ff0000;&lt;br&gt;      }&lt;br&gt;      .router {&lt;br&gt;        fill: #0000ff;&lt;br&gt;      }&lt;br&gt;    &amp;lt;/style&amp;gt;&lt;br&gt; &amp;lt;/defs&amp;gt;&lt;br&gt;  &amp;lt;g id=&quot;Trunks&quot;&amp;gt;&lt;br&gt;    &amp;lt;path id=&quot;BRU-CAM&quot; class=&quot;up&quot; d=&quot;...&quot;/&amp;gt;&lt;br&gt;    &amp;lt;path id=&quot;CAM-PAR&quot; class=&quot;up&quot; d=&quot;....&quot;/&amp;gt;&lt;br&gt;    &amp;lt;path id=&quot;PAR-AMS&quot; class=&quot;down&quot; d=&quot;...&quot;/&amp;gt;&lt;br&gt;    &amp;lt;path id=&quot;AMS-LON&quot; class=&quot;down&quot; d=&quot;...&quot;/&amp;gt;&lt;br&gt;  &amp;lt;/g&amp;gt;&lt;br&gt;  &amp;lt;g id=&quot;Routers&quot;&amp;gt;&lt;br&gt;    &amp;lt;circle id=&quot;AMS&quot; class=&quot;router&quot; cx .. cy .. r ../&amp;gt;&lt;br&gt;    &amp;lt;circle id=&quot;PAR&quot; class=&quot;router&quot; cx .. cy .. r ../&amp;gt;&lt;br&gt;    &amp;lt;circle id=&quot;CAM&quot; class=&quot;router&quot; cx .. cy .. r ../&amp;gt;&lt;br&gt;    &amp;lt;circle id=&quot;BRU&quot; class=&quot;router&quot; cx .. cy .. r ../&amp;gt;&lt;br&gt;    &amp;lt;circle id=&quot;LON&quot; class=&quot;router&quot; cx .. cy .. r ../&amp;gt;&lt;br&gt;  &amp;lt;/g&amp;gt;&lt;br&gt;&amp;lt;/svg&amp;gt;&lt;br&gt;&lt;/pre&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="380" y="10" width="410" height="430" as="geometry" />
+        </mxCell>
+        <mxCell id="6I3-yhUzZdZ5X9dP0GwG-7" value="" style="whiteSpace=wrap;html=1;shape=mxgraph.basic.document;verticalAlign=bottom;strokeColor=#0000CC;" vertex="1" parent="1">
+          <mxGeometry x="100" y="80" width="180" height="110" as="geometry" />
+        </mxCell>
+        <mxCell id="6I3-yhUzZdZ5X9dP0GwG-9" value="&lt;font style=&quot;font-size: 24px; color: rgb(0, 0, 204);&quot;&gt;&amp;lt;script .. / &amp;gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="120" y="110" width="140" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="6I3-yhUzZdZ5X9dP0GwG-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1" source="6I3-yhUzZdZ5X9dP0GwG-7" target="6I3-yhUzZdZ5X9dP0GwG-7">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="6I3-yhUzZdZ5X9dP0GwG-12" value="" style="endArrow=classic;startArrow=none;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;startFill=0;strokeColor=#0000CC;" edge="1" parent="1" source="6I3-yhUzZdZ5X9dP0GwG-9" target="6I3-yhUzZdZ5X9dP0GwG-13">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="440" y="310" as="sourcePoint" />
+            <mxPoint x="210" y="430" as="targetPoint" />
+            <Array as="points">
+              <mxPoint x="190" y="310" />
+              <mxPoint x="615" y="310" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="6I3-yhUzZdZ5X9dP0GwG-13" value="" style="ellipse;whiteSpace=wrap;html=1;strokeColor=#b85450;fillColor=#f8cecc;opacity=30;" vertex="1" parent="1">
+          <mxGeometry x="590" y="273" width="50" height="20" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
 </mxfile>
diff --git a/docs/source/planning/hld.rst b/docs/source/planning/hld.rst
index 8b64c3e4033605504e3e66af906c31198550f25b..89470d2eafdcf7e0d206a63a5f4b8f52858cc2d5 100644
--- a/docs/source/planning/hld.rst
+++ b/docs/source/planning/hld.rst
@@ -43,6 +43,16 @@ Updated High-Level Architecture
    .. drawio-image:: design.drawio
       :page-name: ml-arch
 
+
+Schematic of SVG Element Management
+-------------------------------------
+
+.. only:: drawio
+
+   .. drawio-image:: design.drawio
+      :page-name: svg-class-schematic
+
+
 High-Level Architecture
 -------------------------