Replies: 1 comment 4 replies
-
Hey I'm not a mermaid expert althoughI built the Docusaurus integration. As far as I understand, you can modify mermaid diagrams by using init directives. https://docusaurus.io/tests/pages/diagrams#sequence-diagram-forest-theme-directive You can also swizzle the Mermaid renderer component and use any Mermaid option here: I am able to change the To be honest I'm not 100% sure the way we merge default theme/options in user-provided options is correct, this would require investigating a bit more but maybe the spread is not in the correct place here? 🤷♂️ export function useMermaidConfig(): MermaidConfig {
const {colorMode} = useColorMode();
const mermaidThemeConfig = useMermaidThemeConfig();
const theme = mermaidThemeConfig.theme[colorMode];
const {options} = mermaidThemeConfig;
return useMemo(
() => ({startOnLoad: false, ...options, theme}), // Bad merge ???
[theme, options],
);
}
export function useMermaidSvg(
txt: string,
mermaidConfigParam?: MermaidConfig,
): string {
const defaultMermaidConfig = useMermaidConfig();
const mermaidConfig = mermaidConfigParam ?? defaultMermaidConfig; // no merge ???
// ...
} Try to change this locally maybe and tell us what works best? |
Beta Was this translation helpful? Give feedback.
4 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I spent a good few hours trying to modify the global CSS that gets applied to the Mermaid diagrams on my Docusaurus website, to no avoid.
Here's what I want do:
I added the following CSS in
src/css/custom.css
:I tried to provide a
themeVariables
object, like this:That failed with this error:
I tried specifying the
fontSize
, like this:That has no effect on the rendered diagrams (note: I have tried setting the theme to "base", as per their indications in the docs).
What am I missing? Is it not possible to do what I want with the current Docusaurus integration of Mermaid.js?
Here's an example that works for a particular diagram:
But having to repeat this styling for every single note in every single diagram would be quite a chore.
Beta Was this translation helpful? Give feedback.
All reactions