search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
72.33k stars 6.59k forks source link

Structurizr-generated mermaid diagram renders in live editor, but generates an error when I try to render it in an HTML file #1698

Closed malkav30 closed 1 year ago

malkav30 commented 4 years ago

Describe the bug Structurizr-generated mermaid diagram renders in live editor, but generates an error when I try to render it in an HTML file. specifically, Structurizr generates a lot of inner html divs with style attributes, and the mermaid parser does not behave correctly when escaping the style parts. What bugs me is that it works perfectly inside the mermaid live editor, so I assume that it should work correctly when using the js library inside my own page.

To Reproduce Steps to reproduce the behavior:

  1. take a generated Structurizr example in mermaid markup (see here)
  2. Go to Live editor
  3. see that it renders correctly
  4. put the same content in an html file (see index.zip)
  5. an error is generated in console

Expected behavior Same graph is rendered from index.zip

Screenshots console error : image

Desktop (please complete the following information):

trimmurrti commented 3 years ago

Seems, you are using old mmdc version.

if you run mmdc --version and it shows 0.5.1, then just do npm install -g --force @mermaid-js/mermaid-cli