@asokolsky thanks for the PR! Unfortunately, Jekyll doesn't pick up your default settings from _config.yml when I use your branch as a remote theme. For building my test site, I have this in my _config.yml:

remote_theme: asokolsky/just-the-docs@issue825

For building locally, I have also this in my Gemfile:

gem "just-the-docs", github: "asokolsky/just-the-docs", branch: "issue825"

I haven't added any mermaid settings in _config.yml. The Javascript console reports:

Failed to load resource: the server responded with a status of 404 ()
https://cdnjs.cloudflare.com/ajax/libs/mermaid//mermaid.min.js

Also the variable mermaid wasn't found, and the graph in my test file doesn't appear.

I'm not sure how Jekyll determines just which settings from the theme's _config.yml to use. (For the search feature, it's enabled by default, but all further settings for it are optional, so it's irrelevant whether they have default settings.)

Unless any of the other @just-the-docs/maintainers have better suggestions, you should probably make mermaid_enabled false by default. That would also have the benefit of not loading the Mermaid JS on sites that don't use Mermaid.

you should probably make mermaid_enabled false by default. That would also have the benefit of not loading the Mermaid JS on sites that don't use Mermaid.

Agreed - let's not ship a change like this to be on by default. This should be consciously toggled on by users.

Definitely agree to keep it off by default. Could we also add a bit more to the documentation to explain what Mermaid is, and how to enable it / various configuration options?

This would be great functionality to add - let me know if there's any help needed 👍

This might be my fault, but when testing this locally it looks like we'd need to make the pre tag styling hidden by default otherwise there's a grey box that appears beneath the mermaid diagram:

Edit: Looks like it's the code block which has the styling by default:

Potentially we could just add an extra rule to override the theme for mermaid diagrams:

code.language-mermaid {
  padding: 0;
  background-color: inherit;
  border: none
}

That combined with changing the theme to default would give:

For now, closing this in favour of #857. Feel free to reopen!