mermaid-js-support-for-minimal-mistakes/

[utterances-bot]

Mermaid JS Support for Minimal Mistakes - Cloud Adventures

In the last 6 months I’ve started to use Mermaid JS to draft integration designs as well as document implemented integration applications. There is a lot of support for this tool, however, it’s not supported natively as part of GitHub Pages. In this post I’ll introduce what Mermaid is, some of the benefits and how to add support for GitHub Pages, specifically the Minimal Mistakes theme.

https://milkyware.github.io/mermaid-js-support-for-minimal-mistakes/

[steveschow]

Pretty cool and thanks for sharing but can you please comment about how I would need to modify mermaid.js in order to support the LIGHT minimal-mistakes them and more default mermaid appearance or perhaps the forest theme?

[steveschow]

Well I figured out I can change the skin var to "light" and that fixes for me, but somehow I think I need to have two array elements for the theme array, with one for dark and one for light...so that either skin can be used and the script will be ready, but I admit this js code is a little confusing to me as to how it works to do that.

[milkyware]

hi @steveschow, it is a bit of a manual setup currently yes. That table is intended as a dictionary of MM skins to MJS themes with effectively all of the MM skins mapped to either the default or dark MJS theme.

One thing I have done since writing this post is retrieve the MM skin from the _config.yaml using this modified script below. I'll update the post with it as well.

---
---
$(document).ready(function () {
    var mmSkin = "{{ site.minimal_mistakes_skin }}"
    var mjsTheme = {
      "air": "default",
      "aqua": "default",
      "contrast": "default",
      "dark": "dark",
      "default": "forest",
      "dirt": "default",
      "mint": "mint",
      "neon": "dark",
      "plum": "dark",
      "sunrise": "default"
    }[mmSkin]
    mermaid.initialize({
      startOnLoad: false,
      theme: mjsTheme
    })
    mermaid.init({
      theme: mjsTheme
    }, '.language-mermaid');
  });

Also, you could add a custom override to the _config.yml to specify the specific MJS theme to use. For now, you could alter the "default": "default", line to "default": "forest", and set the MM skin to default. Hope that helps

[steveschow]

Thanks for that! That definitely works better for a couple things.

[hahava]

So helpful thx!