C4 Container diagram: overlapping labels, text overflow, and crossing arrows causing layout issues

[EmnaBarbouch]

Description

Multiple rendering issues found in the **C4 container diagram relationship labels overlap node content, text overflows node boundaries, and excessive arrow crossings make the diagram unreadable.

Steps to reproduce

1. Scroll to Container diagram for Internet Banking System
2. Observe the area around "Single-Page App" node
3. Notice multiple labels overlapping the node and each other

Screenshots

Code Sample

C4Container
  title Container diagram for Internet Banking System

  Person(customer, "Customer", 
    "A customer of the bank, with personal bank accounts")
  
  System_Ext(mailSystem, "E-Mail System", 
    "The internal Microsoft Exchange system")
  System_Ext(mainframe, "Mainframe Banking System", 
    "Stores all of the core banking information")

  Container_Boundary(c1, "Internet Banking") {
    Container(spa, "Single-Page App", 
      "JavaScript, Angular", 
      "Provides all the Internet banking functionality")
    Container(webApp, "Web Application", 
      "Java, Spring MVC", 
      "Delivers the static content and the SPA")
    ContainerDb(db, "Database", 
      "SQL Database", 
      "Stores user registration information")
    Container_Ext(mobile, "Mobile App", 
      "C#, Xamarin", 
      "Provides a limited subset of functionality")
  }

  Rel(customer, spa, "Uses", "HTTPS")
  Rel(customer, mainframe, "Uses")
  Rel(spa, webApp, "Uses", "HTTPS")
  Rel(webApp, db, "Reads from and writes to", 
    "sync, JSON/HTTPS")
  Rel(webApp, mainframe, "Uses", 
    "sync/async, XML/HTTPS")
  Rel(mailSystem, customer, "Sends e-mails to")
  Rel(webApp, mailSystem, "Sends e-mails using", 
    "sync, SMTP")

Setup

• Mermaid version: 11.4.1
  - Browser: Microsoft Edge

Suggested Solutions

| Bug | File to check | What to fix |
|-----|--------------|-------------|
| Label overlapping nodes | c4Renderer.js | Offset edge labels away from node boundaries |
| Title/stereotype overlap | c4Renderer.js | Increase vertical padding between stereotype and title |
| Text overflow | c4.css | Add overflow: hidden + text-overflow: ellipsis |
| Inconsistent labels | c4Renderer.js | Ensure all Rel() metadata renders consistently |
| Arrow crossings | c4Renderer.js | Switch to orthogonal edge routing for container diagrams |

Additional Context

These issues occur because the automatic layout engine does not properly account for label size, node text padding, and wrapping of long descriptions.