Mermaid Diagrams in Dark Mode

[DavidKrassnig]

I noticed that mermaid diagrams don't render correctly in dark mode (or, at least, not really legibly). The dark colours should be switched to bright colours to contrast against the dark background..

Current look:

Very same mermaid diagram rendered by, e.g., jekyll-theme-chirpy, for comparison:

I assume that the style sheets need to be modified accordingly. Unfortunately, not my field of expertise at all.

[george-gca]

Just verified and mermaid support dark themes. It is a question of changing this when changing to dark mode, probably the same way it is done with other elements in assets/js/theme.js. If no one tackles this, maybe I can take a look, but not until next week.

[george-gca]

I might be wrong about this, but as I understood this can't be done so easily in our case.

We use jekyll-diagrams plugin which takes care of rendering the diagram as a svg. It generates the svg "offline" and embed it directly into the html. As a result, it doesn't make any include to the mermaid.js.

If you check the template you sent, it does include mermaid.min.js, so it can dinamically render the svg and change its properties. So it is possible in that template to change mermaid theme and tell it to re-render the svg.

What you guys think @alshedivat @pourmand1376? The best solution I could think here would be to drop this plugin and use mermaid as an include so we could dinamically change this.

[pourmand1376]

I agree too. It is better to have an online version so that we can dynamically generate mermaid diagrams on-the-flow.

How much is the size of this mermaid.mis.js?

Also, we should load it only if we have a mermaid diagram on that specific page. This could be tagged by some property like has_mermaid in page properties.

[george-gca]

Apparently mermaid.min.js is 2.78 MB.

The template @DavidKrassnig cited use mermaid this way, and it has a solution for theme changing.

[reinaldoacdc]

I'm not using jekyll-diagrams, I'm using mermaid this way:

First, In the page I want to load mermaid I declare on the top:
mermaid: true

So in the __includes/footer.html I import the mermaid script for this pages

{% if page.mermaid %}
  {% include scripts/mermaid.html %}
{% endif %}

And finally in my scripts/mermaid.html I detect the theme and use just like this

<script src="https://cdn.jsdelivr.net/npm/mermaid@10.3.0/dist/mermaid.min.js"></script>

<script>
  let giscusTheme = localStorage.getItem("theme")
  document.addEventListener('DOMContentLoaded', function () {
    mermaid.initialize({
      startOnLoad: true,
      theme: giscusTheme,
    })
    window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'))
  });

</script>

[reinaldoacdc]

Just a little update:

Doing this way, it is also possible to use D3 to Zoom in and out, and move the svg with the mouse throught the canvas.

Changing the code like this:
reinaldoacdc/reinaldoacdc.github.io@1fd84b8

And the result is like this:
https://reinaldoacdc.github.io/projects/1_project/

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.