mermaid: refactor config to use mermaid_config.js include, only require mermaid.version in _config.yml (#909)

This PR has a bit of scope creep! This PR now:

- changes the mermaid opt-in logic to only check for the existence of a `mermaid` key instead of `mermaid != false`: this resolves the follow-up in #857
- changes the behaviour of mermaid configuration
    - instead of using `mermaid_init.html` with default settings, makes the include `mermaid_config.js`
    - the include is loaded directly into the contents of `mermaid_initialize`
    - by default, it is an empty object (i.e. `{}`), triggering the defaults
- updates docs
- adds an example to the markdown kitchen sink  

It does significantly change the interface provided in #857, and I apologize for the confusion. However, given the discussion in this PR, I think it's the best move forward!
This commit is contained in:
Matt Wang
2022-08-11 19:34:15 -07:00
committed by GitHub
parent 1d15ea3b84
commit e2f1546c61
8 changed files with 66 additions and 101 deletions

View File

@@ -91,9 +91,36 @@ To demonstrate front end code, sometimes it's useful to show a rendered example
## Mermaid diagram code blocks
[Mermaid](https://mermaid-js.github.io/mermaid/) allows you to add diagrams and visualizations using Markdown code blocks. You can turn on support for mermaid by adding `mermaid_enabled: true` to your \_config.yml.
[Mermaid](https://mermaid-js.github.io/mermaid/) allows you to add diagrams and visualizations using Markdown code blocks. You can turn on support for mermaid by adding a `mermaid` key to your `_config.yml`.
The markdown for a simple flowchart example might look like the following:
The minimum configuration requires a `version` key (matching a version in [jsDelivr](https://cdn.jsdelivr.net/npm/mermaid/)):
```yaml
mermaid:
# Version of mermaid library
# Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/
version: "9.1.3"
```
Additional configuration options are loaded through `_includes/mermaid_config.js`. By default, the contents of the file are the empty object:
```js
// _includes/mermaid_config.js
{}
```
This loads the default settings.
The contents of this object should follow [mermaid's configuration API](https://mermaid-js.github.io/mermaid/#/./Setup?id=configuration). For example, to override the theme, change `_includes/mermaid_config.js` to:
```js
// _includes/mermaid_config.js
{
theme: "forest"
}
```
Once mermaid is installed, it can be used in markdown files. The markdown for a simple flowchart example might look like the following:
{% highlight markdown %}
```mermaid