Fix overlapping labels

.gitignore

@@ -59,6 +59,7 @@ vite.config.ts.timestamp-*
 
 # autogenereated by langium-cli
 generated/
+7492.bundle
 
 # generated type declarations from pnpm prepare
 packages/examples/src/**/*.d.ts

demos/c4context.html

@@ -64,45 +64,45 @@ <h1>C4 context diagram demos</h1>
       UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
     </pre>
     <hr />
-
     <pre class="mermaid">
-    C4Container
-    title Container diagram for Internet Banking System
+C4Container
+title Container diagram for Internet Banking System
 
-    System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
-    Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
+Person(customer, "Customer", "A bank user")
 
-    Container_Boundary(c1, "Internet Banking") {
-        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
-        Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
-        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
-        ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
-        ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
+System_Ext(email_system, "E-Mail System", "Exchange")
+System_Ext(banking_system, "Mainframe Banking System", "Core banking")
 
-    }
+Container_Boundary(c1, "Internet Banking") {
+
+    Container(web_app, "Web Application", "Java, Spring MVC", "Delivers SPA")
+
+    Container(spa, "Single-Page App", "Angular", "Browser UI")
+
+    Container(mobile_app, "Mobile App", "Xamarin", "Mobile access")
+
+    Container(api, "API Application", "Java, Docker", "Backend logic")
+
+    ContainerDb(db, "Database", "SQL", "Stores data")
+}
+
+Rel(customer, web_app, "Uses")
+Rel(customer, spa, "Uses")
+Rel(customer, mobile_app, "Uses")
+
+Rel(web_app, spa, "Delivers")
+
+Rel(spa, api, "Calls API")
+Rel(mobile_app, api, "Calls API")
+
+Rel(api, db, "Reads/Writes")
+
+Rel(api, banking_system, "Uses")
+Rel(api, email_system, "Sends emails")
+Rel(email_system, customer, "Emails user")
+</pre
+    >
 
-    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-    Rel(customer, web_app, "Uses", "HTTPS")
-    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")     
-    Rel(customer, spa, "Uses", "HTTPS")
-    UpdateRelStyle(customer, spa, $offsetY="-40")    
-    Rel(customer, mobile_app, "Uses")
-    UpdateRelStyle(customer, mobile_app, $offsetY="-30") 
-
-    Rel(web_app, spa, "Delivers")
-    UpdateRelStyle(web_app, spa, $offsetX="130") 
-    Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
-    Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
-    Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
-
-    Rel(email_system, customer, "Sends e-mails to")
-    UpdateRelStyle(email_system, customer, $offsetX="-45")    
-    Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
-    UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
-    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
-    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
-    </pre>
     <hr />
 
     <pre class="mermaid">