steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-19 01:22:23 -06:00
Code Issues Packages Projects Releases Wiki Activity

enables mermaid in docs (#935)

Browse Source 
Short and sweet PR that addresses the follow-up in #909: enabling `mermaid` on our docs site, but making it clear that users still need to opt-in to use it. I've also added an example in-action.

To test: [see the Netlify deploy](https://deploy-preview-935--just-the-docs.netlify.app/docs/ui-components/code/#mermaid-diagram-code-blocks).
This commit is contained in:
Matt Wang 2022-08-21 16:32:27 -07:00 committed by GitHub
parent 4d790e877b
commit 011f783fc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
_config.yml
View File

@ -51,14 +51,15 @@ search:
# Supports true or false (default) # Supports true or false (default)
button: false button: false
# To enable support for mermaid diagrams (https://mermaid-js.github.io/mermaid/), # To disable support for mermaid diagrams (https://mermaid-js.github.io/mermaid/),
# uncomment the `mermaid` and `version` keys below # comment out the `mermaid` and `version` keys below
# mermaid: # By default, consuming the theme as a gem leaves mermaid disabled; it is opt-in
# # Version of mermaid library mermaid:
# # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/ # Version of mermaid library
# version: "9.1.3" # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/
# # Put any additional configuration, such as setting the theme, in _includes/mermaid_config.js version: "9.1.6"
# # See also docs/ui-components/code # Put any additional configuration, such as setting the theme, in _includes/mermaid_config.js
# See also docs/ui-components/code
# Enable or disable heading anchors # Enable or disable heading anchors
heading_anchors: true heading_anchors: true

14
docs/ui-components/code.md
View File

@ -91,7 +91,7 @@ To demonstrate front end code, sometimes it's useful to show a rendered example
## Mermaid diagram code blocks ## 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 a `mermaid` key to your `_config.yml`. [Mermaid](https://mermaid-js.github.io/mermaid/) allows you to add diagrams and visualizations using Markdown code blocks. **It is disabled by default**. However, you can turn on support for mermaid by adding a `mermaid` key to your `_config.yml`.
The minimum configuration requires a `version` key (matching a version in [jsDelivr](https://cdn.jsdelivr.net/npm/mermaid/)): The minimum configuration requires a `version` key (matching a version in [jsDelivr](https://cdn.jsdelivr.net/npm/mermaid/)):
@ -131,3 +131,15 @@ graph TD;
C-->D; C-->D;
``` ```
{% endhighlight %} {% endhighlight %}
which renders:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
*Note: for demonstration purposes, we've enabled mermaid on this site. It is still disabled by default, and users need to opt-in to use it.*