adds svg architeture diagram

Tapanito · Tapanito · commit 308d052dcec2 · 2026-02-24T18:00:34.000+01:00
diff --git a/XLS-0066-lending-protocol/README.md b/XLS-0066-lending-protocol/README.md
@@ -114,33 +114,7 @@ The lending protocol charges a number of fees that the Loan Broker can configure
 
 ### 2.6 System Diagram
 
-```
-+-----------------+                          +-----------------+                       +-----------------+
-|    Depositor    |                          |    LoanBroker   |                       |     Borrower    |
-|   AccountRoot   |                          |   AccountRoot   |                       |   AccountRoot   |
-|-----------------|                          |-----------------|                       |-----------------|
-| Owner Directory |                          | Owner Directory | <-----OwnerNode       | Owner Directory | <---------
-+-----------------+                          +-----------------+           |           +-----------------+          |
-      ^         |                                     |                    |                    |                   |
-      |       Reserve                  ____________Reserve____________     |                  Reserve               |
-   Account      |                     |                               |    |                    |                   |
-      |         V                     V                               V    |                    V                   |
-+-----------------+          +-----------------+          +-----------------+          +-----------------+          |
-|                 |          |                 |1        N|                 |1        N|                 |          |
-|     MPToken     |          |      Vault      |--------->|   LoanBroker    |--------->|       Loan      |-OwnerNode-
-|                 |          |                 |          |                 |          |                 |
-+-----------------+          +-----------------+          +-----------------+          +-----------------+
-         |                            ^                        |    ^                            |
-      Issuance                        |                        |    |                            |
-         |                         Account                     | Account                         |
-         V                            |              -VaultNode-    |                            |
-+-----------------+          +-----------------+     |    +-----------------+                    |
-|      Share      |          |  Pseudo-Account |     |    |  Pseudo-Account |                    |
-| MPTokenIssuance |<--Issuer-|   AccountRoot   |     |    |   AccountRoot   |                    |
-|                 |          |-----------------|     |    |-----------------|                    |
-+-----------------+          | Owner Directory | <----    | Owner Directory | <- LoanBrokerNode---
-                             +-----------------+          +-----------------+
-```
+![Architecture Graph](./architecture.svg)
 
 ## 3. Specification
 
diff --git a/XLS-0066-lending-protocol/architecture.svg b/XLS-0066-lending-protocol/architecture.svg
@@ -0,0 +1,130 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 600" width="100%" height="100%">
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#333" />
+    </marker>
+  </defs>
+
+  <style>
+    .bg { fill: #ffffff; }
+    .node-bg { fill: #ffffff; stroke: #333; stroke-width: 2; rx: 6; }
+    line, polyline { stroke: #333; stroke-width: 2; fill: none; }
+    text { font-family: sans-serif; font-size: 14px; fill: #111; text-anchor: middle; }
+    .bold { font-weight: bold; }
+    .label { font-size: 12px; font-weight: bold; fill: #444; }
+    .divider { stroke: #333; stroke-width: 2; }
+  </style>
+
+  <rect class="bg" width="100%" height="100%" />
+
+  <polyline points="120,250 120,150" marker-end="url(#arrow)" />
+  <text x="110" y="205" class="label" text-anchor="end">Account</text>
+  <polyline points="160,150 160,250" marker-end="url(#arrow)" />
+  <text x="170" y="205" class="label" text-anchor="start">Reserve</text>
+
+  <polyline points="840,150 840,180 490,180 490,250" marker-end="url(#arrow)" />
+  <polyline points="840,180 840,250" marker-end="url(#arrow)" />
+  <text x="665" y="172" class="label">Reserve</text>
+
+  <polyline points="1190,150 1190,250" marker-end="url(#arrow)" />
+  <text x="1200" y="205" class="label" text-anchor="start">Reserve</text>
+
+  <polyline points="580,290 750,290" marker-end="url(#arrow)" />
+  <text x="595" y="282" class="label">1</text>
+  <text x="735" y="282" class="label">N</text>
+
+  <polyline points="930,290 1100,290" marker-end="url(#arrow)" />
+  <text x="945" y="282" class="label">1</text>
+  <text x="1085" y="282" class="label">N</text>
+
+  <polyline points="140,330 140,450" marker-end="url(#arrow)" />
+  <text x="150" y="395" class="label" text-anchor="start">Issuance</text>
+
+  <polyline points="490,450 490,330" marker-end="url(#arrow)" />
+  <text x="500" y="395" class="label" text-anchor="start">Account</text>
+
+  <polyline points="840,450 840,330" marker-end="url(#arrow)" />
+  <text x="850" y="395" class="label" text-anchor="start">Account</text>
+
+  <polyline points="400,490 230,490" marker-end="url(#arrow)" />
+  <text x="315" y="482" class="label">Issuer</text>
+
+  <polyline points="780,330 780,530 580,530" marker-end="url(#arrow)" />
+  <text x="680" y="522" class="label">VaultNode</text>
+
+  <polyline points="1130,330 1130,530 930,530" marker-end="url(#arrow)" />
+  <text x="1030" y="522" class="label">LoanBrokerNode</text>
+
+  <polyline points="931,270 1000,270 1000,100 930,100" marker-end="url(#arrow)" />
+  <text x="970" y="90" class="label">OwnerNode</text>
+
+  <polyline points="1280,310 1370,310 1370,130 1280,130" marker-end="url(#arrow)" />
+  <text x="1325" y="302" class="label">OwnerNode</text>
+
+
+  <g transform="translate(50, 50)">
+    <rect class="node-bg" width="180" height="100" />
+    <line x1="0" y1="60" x2="180" y2="60" class="divider" />
+    <text x="90" y="25" class="bold">Depositor</text>
+    <text x="90" y="45">AccountRoot</text>
+    <text x="90" y="85">Owner Directory</text>
+  </g>
+
+  <g transform="translate(750, 50)">
+    <rect class="node-bg" width="180" height="100" />
+    <line x1="0" y1="60" x2="180" y2="60" class="divider" />
+    <text x="90" y="25" class="bold">LoanBroker</text>
+    <text x="90" y="45">AccountRoot</text>
+    <text x="90" y="85">Owner Directory</text>
+  </g>
+
+  <g transform="translate(1100, 50)">
+    <rect class="node-bg" width="180" height="100" />
+    <line x1="0" y1="60" x2="180" y2="60" class="divider" />
+    <text x="90" y="25" class="bold">Borrower</text>
+    <text x="90" y="45">AccountRoot</text>
+    <text x="90" y="85">Owner Directory</text>
+  </g>
+
+  <g transform="translate(50, 250)">
+    <rect class="node-bg" width="180" height="80" />
+    <text x="90" y="45" class="bold">MPToken</text>
+  </g>
+
+  <g transform="translate(400, 250)">
+    <rect class="node-bg" width="180" height="80" />
+    <text x="90" y="45" class="bold">Vault</text>
+  </g>
+
+  <g transform="translate(750, 250)">
+    <rect class="node-bg" width="180" height="80" />
+    <text x="90" y="45" class="bold">LoanBroker</text>
+  </g>
+
+  <g transform="translate(1100, 250)">
+    <rect class="node-bg" width="180" height="80" />
+    <text x="90" y="45" class="bold">Loan</text>
+  </g>
+
+  <g transform="translate(50, 450)">
+    <rect class="node-bg" width="180" height="80" />
+    <text x="90" y="35" class="bold">Share</text>
+    <text x="90" y="55">MPTokenIssuance</text>
+  </g>
+
+  <g transform="translate(400, 450)">
+    <rect class="node-bg" width="180" height="100" />
+    <line x1="0" y1="60" x2="180" y2="60" class="divider" />
+    <text x="90" y="25" class="bold">Pseudo-Account</text>
+    <text x="90" y="45">AccountRoot</text>
+    <text x="90" y="85">Owner Directory</text>
+  </g>
+
+  <g transform="translate(750, 450)">
+    <rect class="node-bg" width="180" height="100" />
+    <line x1="0" y1="60" x2="180" y2="60" class="divider" />
+    <text x="90" y="25" class="bold">Pseudo-Account</text>
+    <text x="90" y="45">AccountRoot</text>
+    <text x="90" y="85">Owner Directory</text>
+  </g>
+</svg>
