Mermaid render error when description contains (

[sinon]

Description

A view description containing ( character generates mermaid file that will not render. Seems to affect any of the graphs that leverage subgraph in mermaid. (SystemLandscape is not affected for example).

Steps to reproduce

1. Create a sample .dsl with view description containing (

workspace "test" {

    model {
        customer = person "Customer"
        onlineBookStore = softwareSystem "Online book store" {
            webapp = container "Web Application"
            database = container "Database"
        }

        customer -> webapp "Browses and makes purchases using"
        webapp -> database "Reads from and writes to"
    }

    views {
        
        systemcontext onlineBookStore {
            title "Request past orders feature (TEST)"
            include *
            autoLayout lr
        }
    }
    
}

2. Copy above into: https://structurizr.com/dsl
3. Render as mermaid and receive:

graph LR
  linkStyle default fill:#ffffff

  subgraph diagram [Request past orders feature (TEST)]
    style diagram fill:#ffffff,stroke:#ffffff

    1["<div style='font-weight: bold'>Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div>"]
    style 1 fill:#dddddd,stroke:#9a9a9a,color:#000000
    2["<div style='font-weight: bold'>Online book store</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>"]
    style 2 fill:#dddddd,stroke:#9a9a9a,color:#000000

    1-. "<div>Browses and makes purchases<br />using</div><div style='font-size: 70%'></div>" .->2
  end

Loading

4. Github or the render function on https://structurizr.com/dsl fail to render the outputted mermaid graph data
5. Expected output should probably look like

graph LR
  linkStyle default fill:#ffffff

  subgraph diagram ["Request past orders feature (TEST)"]
    style diagram fill:#ffffff,stroke:#ffffff

    subgraph 2 [Online book store]
      style 2 fill:#ffffff,stroke:#9a9a9a,color:#9a9a9a

      3["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container]</div>"]
      style 3 fill:#dddddd,stroke:#9a9a9a,color:#000000
      4["<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container]</div>"]
      style 4 fill:#dddddd,stroke:#9a9a9a,color:#000000
    end

    1["<div style='font-weight: bold'>Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div>"]
    style 1 fill:#dddddd,stroke:#9a9a9a,color:#000000

    1-. "<div>1. Requests past orders from</div><div style='font-size: 70%'></div>" .->3
    3-. "<div>2. Queries for orders using</div><div style='font-size: 70%'></div>" .->4
  end

Loading

Note the diagram title is wrapped in ""

Screenshot

No response

Code sample

No response

Configuration

 ✗ structurizr.sh version
structurizr-cli: 1.33.1
structurizr-java: 1.26.1
structurizr-dsl: 1.32.0
structurizr-export: 1.16.1
structurizr-import: v1.5.0
Java: 17.0.7/Eclipse Adoptium (/Users/<UserName>/.sdkman/candidates/java/17.0.7-tem)
OS: Mac OS X 13.4 (aarch64)

Severity

Minor

Priority

Low

Resolution

I have no budget and there's no rush, please fix this for free

More information

No response

[sinon]

⚡ - thanks @simonbrowndotje