-
Notifications
You must be signed in to change notification settings - Fork 331
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.
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
Various mermaid rendering issues #5416
Comments
Additional questions:
|
Thanks for this pretty comprehensive report, it will help a lot. No worries, if needed, it's easy for maintainers to turn this list items into list of issues, which would turn this one into an "epic". |
Thanks for the report, @rcannood . I hate to do this to you, but could you please check these issues on the latest 1.4 version? We just upgraded to mermaid 10 and I expect a number of these problems as well. The issue is that I don't know what you expect the output to be (since I'm not a mermaid user), so I could use help there: https://github.com/quarto-dev/quarto-cli/releases/tag/v1.4.36 |
I added a CI script, regenerated the
That's why I copied the diagrams that are already part of mermaid.js.org. That way, you can compare the output of the same figures rendered using quarto 1.4.36 and the official mermaid.js documentation side by side. For each of the items listed above and below, I provided a link to the section rendered by quarto where the issue occurs, and the expected output as rendered at mermaid.js.org. Quarto 1.4.34Some problems seem to have been fixed, others still persist: Flow charts:
Sequence diagrams:
State diagram: |
TBH most of the remaining issues are nice-to-haves, except for the backgrounds of subgraphs in flow charts (and the concurrency view in the state diagrams) are quite. If the background issue could be fixed in quarto 1.3, that'd be fantastic, because it is something that used to work in quarto 1.2 and earlier |
This comment was marked as outdated.
This comment was marked as outdated.
The reason why it'd be fantastic if the fix for the subgraph background fills could still be included in v1.3 is because it used to work fine with Quarto v1.2. We just updated one of our sites (openproblems-bio/website) to Quarto v1.3 to get access to some other bug fixes, but it seems some diagrams were broken in the process. We can always add a workaround to our CSS, but I can imagine other people might also encounter the same issue when upgrading from v1.2 to v1.3. At any rate, I'm already happy if we do manage to find a bug fix, even if it's included in v1.4 only. |
At least one of these issues was not present 3 months ago, specifically:
I have a revealjs slide deck rendered by quarto (https://github.com/davidwilby/ResearchSoftwareMethods) in which FontAwesome icons were rendered correctly in a mermaidjs flowchart. The slides were rendered on GitHub actions using quarto but unfortunately I don't know exactly which version as the runner logs have expired, but this shows that this feature was working correctly in a previous version of quarto. |
We are aware, that's why this issue is open.
You can inspect the generated HTML output's |
Rendering of mermaid diagrams from Quarto notebooks into the For example, the following mermaid code chunk renders nicely when I click render from the RStudio IDE.
However, when I navigate to my github markdown document, the following error message is displayed instead of a diagram. It is possible that GitHub is already aware of this issue as their help page contains the statement:
My Quarto notebook global code chunk options are also listed below.
|
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as off-topic.
This comment was marked as off-topic.
@rcannood We'll just hide the comments as "off topic". |
I'm not using any formatting or additional config/theming files or anything of the sort. When I write my Mermaid Diagram, Quarto renders it like that, instead of correctly rendering it like the following. flowchart LR
subgraph A [Layer 1]
direction LR
id1[Affine Function] --> id2[ReLU]
end
subgraph B [Layer 2]
direction LR
id2 --> id3[Affine Function]
end
subgraph C [Loss Function]
direction LR
id3 --> id4[MSE]
end
Let me know if you would like any other piece of information in particular that would help narrow down the issue. |
Just to verify, I updated the test website containing all mermaidjs documentation to quarto 1.4.322, and I can still reproduce each of the previously mentioned issues. I hope that each of the issues become apparent by clicking 'Example' and comparing to 'Expected'. Please let me know if something is not clear. Quarto 1.4.322Flow charts:
Sequence diagrams:
State diagram: |
In case anyone comes across this trying to change the dark background in a subgraph, here's a fix. Modify the variable
In case it helps anyone debug this, this line sets the subgraph background color to |
@catanzaromj We'd have to test that with a number of mermaid charts to be sure, but I think you're right and it was a typo when I wrote that. Can you open a new issue? Thanks. |
Hi, not sure if this is the right issue, but before opening a new one I try here. Last week I noticed that in a Reaveal.js presentations written in Quarto, the Mermaid diagrams rendered correctly while on browser, but when generating a PDF with Decktape the boxes had a wrong size and the text overlapped with the border: Initially I though that the problem was on the Decktape side, and I opened astefanutti/decktape#328, but after that I discovered that the same problem happens with RStudio: I'm using Quarto 1.4.553 with RStudio 26.2.4 See https://github.com/NiccoMlt/quarto-mermaid-decktape-issue-demo for a working example of the problem |
I imagine that if you use decktape and revealjs outside of quarto you'll see the same problem (so this isn't something Quarto can do. And while we try not to break decktape, it's not something we officially support either.) The problem is likely that decktape is confusing mermaid's window size determination code. You'll need to generate the mermaid graphics at rendering time: https://quarto.org/docs/authoring/diagrams.html#mermaid-formats |
Yes, initially I assumed it was something decktape-related because it worked like a charm in any browser, but when I also saw the problem on RStudio's own preview I thought it might be something related to the code that was output by Quarto. Thank you for your suggestion by the way, I'll give it a try tonight and see if it can serve as a workaround |
I confirm that using Sadly, using SVG format (instead of PNG) still presents some problems: in this case, the problem can be experienced even with browser and not only inside RStudio o with decktape: It seems to be rendered too widely, because adding a magic comment to force the figure to use the 100% of the available width ( |
While rendering the mermaid diagram (i.e. timeline) in html is possible, previewing results in error: "undefined" Tested with Quarto v1.4.554 in VS Code on Windows (see ### context for more info)
Rendering in html produces:ContextQuarto v1.4.554 on Windows 11 VS Code
Google Chrome
|
Hi @cscheid ! First of all, I'd like to apologize. I didn't intend for this GitHub issue to become a catch-all for any mermaid-related issues in quarto. I just updated the demo website ( https://mermaid-demos-in-quarto.netlify.app/ ) to quarto 1.5.54 and mermaid 10.2.4. In comparison to my original post, a lot of problems have been fixed, and some still persist. Would it make sense to close this GitHub issue and for me to create issues for each of the (smaller) remaining issues? In this way, the issue itself is less daunting and other (unrelated) issues do not get added onto this one. No offence to anyone who added other issues to this one, I just think that your issue will get solved quicker if you create a separate issue for it. Let me know what you think :) |
Yes, please. Two features of good issues are:
Both of these make it easy for us to get to the bottom of it. |
Sounds good! I added a comment or created new issues for the most important problems.
When these are fixed, I'll update the mermaid-demos-in-quarto page and cross-check for additional issues. Happy for this issue to be closed in favour of #9178, #10303 and #10304! |
Bug description
Throughout the different releases, there have been various rendering issues with Mermaid in Quarto. I understand that there's a lot of moving parts to keep track of, so no judgement there.
I just noticed a new one with Quarto 1.3, so I thought I'd do a more thorough investigation. I created this repo which gets rendered to this site, which should be a mirror of the mermaidjs syntax documentation.
Since Quarto 1.3 uses mermaid 9.1.1, I went back to the earliest version of mermaid js which had the syntax examples in the docs, which happened to be version 9.3.0. I used this script to translate the md files in the mermaid repository to qmd files in my repository.
Issues in Quarto v1.3
(See comment below for issues in Quarto v1.4, since some issues have already been fixed by upgrading to mermaid 10)
Update: issues that have already been solved in Quarto v1.4 have been ticked!
Flow charts:
Sequence diagrams:
Class diagrams:
This was all rendered with quarto 1.3.340.
Output of quarto check
Checklist
quarto check
so we know which version of quarto and its dependencies you're running.The text was updated successfully, but these errors were encountered: