Theming of lineColor using directives spills over into subsequent diagrams

knsv commented 3 years ago

When setting the line color in a page this affects the styling of the arrowheads, the markers in svg. These ids are not properly contained within each svg. This results in the subsequent diagrams linking to the arrowhead definitions highest up in the page.

This can easily be reproduced by the example below:

<html>
  <head>
  </head>
  <body>
  <h1>Example</h1>
  <div class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
flowchart LR
subgraph red
A --> B
end
  </div>
  <div class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"blue"}}}%%
flowchart LR
subgraph black
A --> B
end
  </div>
  <script src="//cdn.jsdelivr.net/npm/mermaid@8.9.0/dist/mermaid.min.js"></script>
  <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
  <script>
      mermaid.initialize({
      });
      function callback(){alert('It worked');}
    </script>
</body>
</html>

dwhelan commented 1 year ago

@knsv I have a fix for this where the marker id is now prefixed with the id of its diagram svg element.

I think this is an important fix as there are three related issues as well as a new one from https://github.com/livebook-dev/livebook/issues/1440.

I would love to get this fix pushed ... but I am not a collaborator. What would you suggest for next steps?

bjarkih commented 1 year ago

I would also love to see a fix for this - happy to help review the pull request from @dwhelan for example. We're seeing the same issue in our Mermaid integration in our presentation app and it's a bit of a blocker at the moment.

mermaid-js / mermaid

Theming of lineColor using directives spills over into subsequent diagrams #1871