Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
knsv opened this issue Jan 27, 2021 · 2 comments · Fixed by #4825
Closed

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

knsv opened this issue Jan 27, 2021 · 2 comments · Fixed by #4825
Assignees
@dwhelan
Labels
Graph: Flow Status: Awaiting PR Status: In progress

Comments

@knsv
Copy link
Collaborator

knsv commented Jan 27, 2021

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:

image

<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>
@knsv knsv added Type: Bug / Error Something isn't working or is incorrect Status: Triage Needs to be verified, categorized, etc Status: Approved Is ready to be worked on Topic: Platform and removed Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Jan 27, 2021
@knsv knsv mentioned this issue Jan 27, 2021
Closed
@kamiazya kamiazya mentioned this issue Apr 6, 2022
Closed
This was referenced Sep 17, 2022
Open
Closed
Open
@dwhelan
Copy link

dwhelan commented Sep 27, 2022

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

image

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

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

dwhelan added a commit to dwhelan/mermaid that referenced this issue Sep 27, 2022
@dwhelan
examples of theme variables for mermaid-js#1871
3ff22b0
@dwhelan dwhelan mentioned this issue Oct 3, 2022
Closed
@bjarkih
Copy link

bjarkih commented Oct 7, 2022

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.

@aloisklink aloisklink mentioned this issue Oct 8, 2022
Closed
3 tasks
@lishid lishid mentioned this issue Jun 23, 2023
Closed
16 tasks
@chadfawcett chadfawcett mentioned this issue Sep 8, 2023
Merged
4 tasks
This was referenced Aug 22, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dwhelan dwhelan

Labels
Graph: Flow Status: Awaiting PR Status: In progress
Projects
None yet
Milestone
No milestone
6 participants
@dwhelan @jgreywolf @bjarkih @knsv @Yokozuna59 and others