Getting started example produces invalid mermaid diagram

[bmalinconico]

Hello,

I am experimenting with Structurizr and and looking to create Mermaid output. I am using the following getting started example:

workspace "Getting Started" "This is a model of my software system." {

    model {
        user = person "User" "A user of my software system."
        softwareSystem = softwareSystem "Software System" "My software system."

        user -> softwareSystem "Uses"
    }

    views {
        systemContext softwareSystem "SystemContext" "An example of a System Context diagram." {
            include *
            autoLayout
        }

        styles {
            element "Software System" {
                background #1168bd
                color #ffffff
            }
            element "Person" {
                shape person
                background #08427b
                color #ffffff
            }
        }
    }

}

When I convert to Mermaid I get the following output:

graph TB
  linkStyle default fill:#ffffff
  1["<div style='font-weight: bold'>User</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A user of my software system.</div>"]
  style 1 fill:#08427b,stroke:#052e56,color:#ffffff
  2["<div style='font-weight: bold'>Software System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>My software system.</div>"]
  style 2 fill:#1168bd,stroke:#0b4884,color:#ffffff
  1-. "<div>Uses</div><div style='font-size: 70%'></div>" .->2

However when I try to use this output with Mermaid 8.8.0 I get an error stating there is a syntax error in the Graph.

What version of Mermaid is expected to work with the Structurizr CLI?

[simonbrowndotje]

That Mermaid definition seems to work with the online editor, which is Mermaid 8.9.1:

I've certainly seen Mermaid break with different versions though, so I'd probably be tempted to upgrade your installation before anything else.

[bmalinconico]

Thank you for double checking me, I didn't think to try it there.

Based on that I can also see that the HTML shows up as the label, but I was able to remove that by setting securityLevel to antiscript. (edit: loose works too)

Are there any other required configs for mermaid runtime that you are aware of?

[bmalinconico]

I found the issue. We are using Mermaid in Hugo, which is using the following to style to render the graphs:

<div class="mermaid">
     graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
</div>

Since you are inserting DIV tags for the structure, and mermaid is using .innerHTML to get their content, your single quotes are getting transformed to double quotes and the parsing breaks.