mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-09-13 05:13:33 -06:00
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:
@@ -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
|
||||
|
Reference in New Issue
Block a user