Custom styling of diagrams

[ulfschneider]

Hi Remco, thank you for your package. I´m using it to render mermaid charts during the build process of a static blog. This is working pretty well. There is one issue I cannot get around, and that is custom styling. I do not see the slightest trace of the styles I´m putting into the transformation process within the resulting charts. I suppose I´m doing something wrong. Maybe you can help me with that.

I´m doing it so:

const renderOutput = await renderer([chartDefinition], {
      mermaidOptions: {  
          "theme": "base",
         "securityLevel": "loose",
         "themeVariables": {
            "fontSize": "16px",
            "fontFamily": "system-ui,sans-serif",
            "primaryColor": "#B3D7FF",
            "noteBkgColor": "#FFDD40",
            "noteTextColor": "#262626",
            "noteBorderColor": "#FFDD40"
            }
         },
       css: import.meta.resolve('./tmp/theme.css')
   });

The theme.css does exist and is valid, I´ve used it in a different context already. Even without the css, I would expect to see the setting for the primaryColor that comes out of the mermaidOptions in the charts, but it´s not there.

[remcohaszing]

The CSS is included while rendering the mermaid diagram to SVG. This affects dimensions of the various SVG elements. The CSS content is not included in the SVG output. You need to include tmp/theme.css on your blog yourself.

[ulfschneider]

Okay, I can do that. When I´m not using any custom CSS, and only provide the mermaidOptions with some different color settings, would you expect those colors to be reflected in the resulting charts? I´m asking because mermaid-cli behaves this way. Maybe you want that different. At least, I do not see the mermaidOptions colors in the charts.

[remcohaszing]

If you only provide mermaidOptions, Mermaid includes that style sheet in the SVG as far as I’m aware. So those styles should show up in your diagram. If that’s not the case, that’s a bug in mermaid-isomorphic.

[ulfschneider]

Thank you for your quick response. In deed I do not see the styles from mermaidOptions showing up in the diagram. But it´s not a big issue for now. I use the mermaid charts with the default styling as they come out of your package. In case you find an issue and have the time to fix it, I would use the mermaidOptions to refine the style.

[remcohaszing]

I would still appreciate a reproduction, meaning a diagram small diagram that shows the problem when rendered with the code you showed earlier.