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

revealjs + mermaidjs arrows are missing the ends on some diagrams #3433

Open
opensourceportfolio opened this issue Sep 8, 2022 · 1 comment
Open

revealjs + mermaidjs arrows are missing the ends on some diagrams #3433

opensourceportfolio opened this issue Sep 8, 2022 · 1 comment
Labels
Contributor needed Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@opensourceportfolio
Copy link

Describe the bug
I have a reveal.js slide with mermaid.js diagrams on each slide. The first three show up correctly but on the fourth one and beyond, the arrow heads are missing.

To Reproduce
Steps to reproduce the behavior:

Here's a simplifed html page

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.1.0/reveal.min.css"
    />
  </head>

  <body>
    <div class="reveal">
      <div class="slides">
        <section
          data-markdown="example.md"
          data-separator="^#######"
          data-separator-vertical="^-------"
        ></section>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.6/mermaid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/markdown/markdown.min.js"></script>

    <script>
      mermaid.initialize({ startOnLoad: false });
      Reveal.initialize({
        plugins: [RevealMarkdown],
      }).then(() => {
        function renderGraph(dom, id) {
          const mermaidGraph = dom.textContent;

          const svg = mermaid.mermaidAPI.render(`mermaid-${id}`, mermaidGraph);
          
          const mermaidSvg = document.createElement('div');
          mermaidSvg.classList.add('mermaid-svg');
          mermaidSvg.innerHTML = svg;

          dom.parentNode.after(mermaidSvg);
          dom.parentNode.remove();

          return mermaidSvg;
        }

        Reveal.on('slidechanged', () => {
          document.querySelectorAll('.mermaid').forEach(renderGraph);
        });
      });
    </script>
  </body>
</html>

and this is my mermaid configs

```mermaid
flowchart TD;
  Cat --> Animal
```

#######

```mermaid
flowchart TD;
  Cat --> Animal
```

#######

```mermaid
flowchart TD;
  Cat --> Animal
```

#######

```mermaid
flowchart TD;
  Cat --> Animal
```

Expected behavior
All flowcharts should have an arrow with a head

Screenshots
Screen Shot 2022-09-08 at 4 01 14 PM

Code Sample
https://jsfiddle.net/h78vfmn0/ if you go to the fourth slide you will notice there are no arrows

Desktop (please complete the following information):

  • OS: mac os
  • Browser I've tried on chrome and firefox
  • Version canary version for both
@opensourceportfolio opensourceportfolio added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Sep 8, 2022
@dwhelan
Copy link

dwhelan commented Sep 17, 2022

I am working on #1871 and found that the fix to it also fixed the issue you are seeing. It occurs with multiple mermaid diagrams on the same page.

@aloisklink aloisklink mentioned this issue Oct 8, 2022
Closed
3 tasks
@jgreywolf jgreywolf added Status: In progress Status: Awaiting PR and removed Status: Triage Needs to be verified, categorized, etc labels Jan 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Contributor needed Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix/1871 line color spill dwhelan/mermaid
4 participants
@dwhelan @jgreywolf @opensourceportfolio @nirname