From 6244dd4d0f4041e5bc8b05872667012c19b748ca Mon Sep 17 00:00:00 2001
From: Shautvast <shautvast@gmail.com>
Date: Sun, 26 Jan 2025 17:54:53 +0100
Subject: [PATCH] added sample output

---
 README.md                           | 40 ++++---------
 examples/bank_architecture/bank.svg | 89 +++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 29 deletions(-)
 create mode 100644 examples/bank_architecture/bank.svg

diff --git a/README.md b/README.md
index 310ed62..461c74c 100644
--- a/README.md
+++ b/README.md
@@ -4,12 +4,10 @@
 
 _It is Dutch for fish_
 
-### NB I just started, needs a lot of work
-
 sample vis file:
 
 ```
-markup {
+structure {
   lanes {
     functions {
       calc: "Calculation"
@@ -32,39 +30,23 @@ markup {
       interest_engine: "InterestEngine"
     }
   }
-  bank-->calc
-  bank_scripts--<>bank_db
-  bank_motor--<>bank_db
-  interest_engine-->calc
+  bank==>calc
+  bank_scripts==<>bank_db
+  bank_motor==<>bank_db
+  interest_engine==>calc
 }
 
 styles {
   lanes(group) {
     type: textnode
-    orientation: horizontal
+    orientation: vertical
     shape: rectangle
-    font-family: arial
-    border-width: 1px
-    border-color: gray
-  }
-  functions(group) {
-    background-color: yellow
-    font-family: arial
-    border-radius: 20px
-    border-width: 1px
-    border-color: gray
-  }
-  systems(group) {
-    background-color: lightblue
-  }
-  tag1: "⚭" { // how will this work?
-    right:0px
-    top:0px
-  }
-  tag2: {
-    itchy: scratchy
   }
+  functions(group) {orientation: horizontal}
+  systems(group) {orientation: horizontal}
 }
 ```
 
-Will have to be turned into an architecture diagram... we'll see how it goes!
+#### Output (work in progress):
+
+![sample_bank](examples/bank_architecture/bank.svg)
\ No newline at end of file
diff --git a/examples/bank_architecture/bank.svg b/examples/bank_architecture/bank.svg
new file mode 100644
index 0000000..56ce2d0
--- /dev/null
+++ b/examples/bank_architecture/bank.svg
@@ -0,0 +1,89 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200" viewBox="0 0 980 255">
+    <style>svg {
+        background-color: gray;
+        }
+
+        .node {
+        border: 1px solid black;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 1em;
+        font-size: 10px;
+        font-family: sans-serif;
+        }
+    </style>
+    <rect id="calc" x="60" y="60" width="61" height="15" stroke="white" fill="none"/>
+    <text x="90" y="60" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="90" dy="10">Calculation</tspan>
+    </text>
+    <rect id="acc_interest_calc" x="136" y="60" width="145" height="15" stroke="white" fill="none"/>
+    <text x="208" y="60" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="208" dy="10">Account interest Calculation</tspan>
+    </text>
+    <rect id="interest_rates" x="296" y="60" width="76" height="15" stroke="white" fill="none"/>
+    <text x="334" y="60" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="334" dy="10">Interest Rates</tspan>
+    </text>
+    <rect id="config" x="387" y="60" width="71" height="15" stroke="white" fill="none"/>
+    <text x="422" y="60" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="422" dy="10">Configuration</tspan>
+    </text>
+    <rect id="nob_execution" x="488" y="75" width="71" height="15" stroke="white" fill="none"/>
+    <text x="523" y="75" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="523" dy="10">NoB Execution</tspan>
+    </text>
+    <rect id="coll_reinst_inst" x="574" y="75" width="204" height="15" stroke="white" fill="none"/>
+    <text x="676" y="75" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="676" dy="10">Collection of Reinstatement instructions</tspan>
+    </text>
+    <rect id="nob" x="473" y="60" width="320" height="45" stroke="white" fill="none"/>
+    <text x="633" y="60" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="633" dy="10">NoB</tspan>
+    </text>
+    <rect id="reporting" x="808" y="60" width="52" height="15" stroke="white" fill="none"/>
+    <text x="834" y="60" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="834" dy="10">Reporting</tspan>
+    </text>
+    <rect id="functions" x="45" y="45" width="830" height="75" stroke="white" fill="none"/>
+    <text x="460" y="45" fill="white" text-anchor="middle" stroke-width="1" class="node"></text>
+    <rect id="bank_motor" x="75" y="165" width="57" height="15" stroke="white" fill="none"/>
+    <text x="103" y="165" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="103" dy="10">Bank Motor</tspan>
+    </text>
+    <rect id="bank_scripts" x="147" y="165" width="66" height="15" stroke="white" fill="none"/>
+    <text x="180" y="165" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="180" dy="10">Bank Scripts</tspan>
+    </text>
+    <rect id="bank_client" x="228" y="165" width="61" height="15" stroke="white" fill="none"/>
+    <text x="258" y="165" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="258" dy="10">Bank Client</tspan>
+    </text>
+    <rect id="bank_db" x="304" y="165" width="42" height="15" stroke="white" fill="none"/>
+    <text x="325" y="165" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="325" dy="10">Bank DB</tspan>
+    </text>
+    <rect id="bank" x="60" y="150" width="301" height="45" stroke="white" fill="none"/>
+    <text x="210" y="150" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="210" dy="10">Bank</tspan>
+    </text>
+    <rect id="interest_engine" x="376" y="150" width="76" height="15" stroke="white" fill="none"/>
+    <text x="414" y="150" fill="white" text-anchor="middle" stroke-width="1" class="node">
+        <tspan x="414" dy="10">InterestEngine</tspan>
+    </text>
+    <rect id="systems" x="45" y="135" width="422" height="75" stroke="white" fill="none"/>
+    <text x="256" y="45" fill="white" text-anchor="middle" stroke-width="1" class="node"></text>
+    <rect id="lanes" x="30" y="30" width="860" height="195" stroke="white" fill="none"/>
+    <text x="460" y="30" fill="white" text-anchor="middle" stroke-width="1" class="node"></text>
+    <rect id="bank" x="905" y="30" width="0" height="0" stroke="white" fill="none"/>
+    <text x="905" y="30" fill="white" text-anchor="middle" stroke-width="1" class="node"></text>
+    <rect id="bank_scripts" x="920" y="30" width="0" height="0" stroke="white" fill="none"/>
+    <text x="920" y="30" fill="white" text-anchor="middle" stroke-width="1" class="node"></text>
+    <rect id="bank_motor" x="935" y="30" width="0" height="0" stroke="white" fill="none"/>
+    <text x="935" y="30" fill="white" text-anchor="middle" stroke-width="1" class="node"></text>
+    <rect id="interest_engine" x="950" y="30" width="0" height="0" stroke="white" fill="none"/>
+    <text x="950" y="30" fill="white" text-anchor="middle" stroke-width="1" class="node"></text>
+    <rect id="structure" x="15" y="15" width="950" height="225" stroke="white" fill="none"/>
+    <text x="490" y="15" fill="white" text-anchor="middle" stroke-width="1" class="node"></text>
+</svg>
\ No newline at end of file