-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
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
Can't render mindmap
mermaid diagrams
#9032
Comments
We use |
9.4 mentions mindmap needs renderAsync: https://github.com/mermaid-js/mermaid/releases/tag/v9.4.0 With v10.0 it seems that now Mermaid render always returns a promise (breaking chance) and renderAsync is deprecated or removed:
I guess we should upgrade to Mermaid v10 and handle the promise While upgrading we should probably also prevent concurrent mermaid rendering issues, cf my comment here: #8357 (comment) |
FYI, in my simple use case, this patch seems to do the trick. Basically, simply using diff --git a/lib/client/index.js b/lib/client/index.js
index 1c121a7adf027f62e1d57510f9d86eee62d313ea..9c0d384f2facfd36e50839c0c03d264243b4bded 100644
--- a/lib/client/index.js
+++ b/lib/client/index.js
@@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { useColorMode, useThemeConfig } from '@docusaurus/theme-common';
import mermaid from 'mermaid';
// Stable className to allow users to easily target with CSS
@@ -26,7 +26,8 @@ export function useMermaidSvg(txt, mermaidConfigParam) {
*/
const defaultMermaidConfig = useMermaidConfig();
const mermaidConfig = mermaidConfigParam ?? defaultMermaidConfig;
- return useMemo(() => {
+ const [svgResult, setSvgResult] = useState('');
+ useEffect(() => {
/*
Mermaid API is really weird :s
It is a big mutable singleton with multiple config levels
@@ -55,6 +56,11 @@ export function useMermaidSvg(txt, mermaidConfigParam) {
Not even documented: mermaid.render returns the svg string
Using the documented form is un-necessary
*/
- return mermaid.render(mermaidId, txt);
+ mermaid.render(mermaidId, txt)
+ .then((result) => {
+ setSvgResult(result.svg);
+ });
}, [txt, mermaidConfig]);
+
+ return svgResult;
}
diff --git a/src/client/index.ts b/src/client/index.ts
index f8302085c44155f693aa2c68f4a6d109c5228e4b..3e069146167e4a504e30e337e19ad076fa57a0fa 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
-import {useMemo} from 'react';
+import {useEffect,useMemo,useState } from 'react';
import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
import mermaid, {type MermaidConfig} from 'mermaid';
import type {ThemeConfig} from '@docusaurus/theme-mermaid';
@@ -40,8 +40,9 @@ export function useMermaidSvg(
*/
const defaultMermaidConfig = useMermaidConfig();
const mermaidConfig = mermaidConfigParam ?? defaultMermaidConfig;
+ const [svgResult, setSvgResult] = useState('');
- return useMemo(() => {
+ useEffect(() => {
/*
Mermaid API is really weird :s
It is a big mutable singleton with multiple config levels
@@ -72,6 +73,11 @@ export function useMermaidSvg(
Not even documented: mermaid.render returns the svg string
Using the documented form is un-necessary
*/
- return mermaid.render(mermaidId, txt);
+ mermaid.render(mermaidId, txt)
+ .then((result) => {
+ setSvgResult(result.svg);
+ });
}, [txt, mermaidConfig]);
+
+ return svgResult;
} |
Thanks @sharky98, that's a good solution yes, and indeed useMemo is not meant to read promises. A lightweight solution for that is my little package react-async-hook, but I'm hesitant to add it to Docusaurus just for this use-case. I assume you also upgraded to v10 right? |
Yes, I did add an overrides with The only issue I have (and I don't care in my use case), is that when loading a page, I have an error message while waiting for mermaid to build and provide the diagram to the component. Footnotes
|
@Acr0most I don't think it has anything to do with what text your diagram contains. It's because a |
@Josh-Cena For my diagram I'm facing exactly this issue und removing this text works. Think the error message doesn't match the reason behind. edit: you're right.. think changing some lines in diagram removed cache or it worked for some seconds.. weird. |
I have the same issue for the timeline diagram |
The same issue with quadrantChart diagram. After upgrading |
As part of the Mermaid v10 upgrade that I'd like to do for Docusaurus v3, we'll also get new features like Markdown support, requested here: #9296 |
New Mermaid 10.4 features will be supported as part of Docusaurus v3 thanks to this PR: #9305
|
@slorber I noticed that |
@Olshansk I don't use Mermaid much myself, so I don't really know. Is this a new Mermaid component? Can you show us a repro of a timeline not working? |
It was introduced in mermaid/releases/tag/v10.0.1 on
Rendered example: https://dev.poktroll.com/protocol/claim_and_proof_lifecycle#session-end Note: There is a screenshot next to the syntax as a workaround. I'm inserting a screenshot for reference. |
@Olshansk you shared your prod site source code, this is not a minimal repro. Here's a minimal repro proof that Docusaurus can support Mermaid timelines: If your site doesn't, then maybe you did something wrong, but I can't study it in depth to help you so a minimal repro is always preferable than a link to a large open source production site. |
You shouldn't use an uppercase character here @Olshansk |
I read That being said, thank you for actually looking into it because that small typo was indeed the issue and now everything is 👌 Thanks again!! 🙏 |
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.Description
It looks like the
mindmap
Mermaid diagram doesn't work with the current Docusaurus integrations. Other diagrams do work as expected.Reproducible demo
https://github.com/Quansight-Labs/cf-infra-docs
Steps to reproduce
I followed the instructions for Mermaid diagrams and modified my Docusaurus configuration accordingly (see this PR).
I would have expected the rendering to work out of the box after those changes, but it doesn't.
Expected behavior
Get the same diagram as available in mermaid.live
Actual behavior
You first see this warning:
Clicking on Try Again gets you to a rendered page with a faulty diagram:
Locally, you see this error message:
It sounds like this discussion, which led to this commit. I assume something similar is needed here? I am not an expert in anything JavaScript, sorry 😬
Your environment
Self-service
The text was updated successfully, but these errors were encountered: