Skip to content

Commit

Permalink
Auto-activation of mermaid diagrams: adapt documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
deining committed Oct 21, 2022
1 parent 8107dab commit ea0860e
Showing 1 changed file with 18 additions and 40 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -269,27 +269,33 @@ For example, the following defines a simple flowchart:

````
```mermaid
graph LR
Start --> Need{"Do I need diagrams"}
Need -- No --> Off["Set params.mermaid.enable = false"]
Need -- Yes --> HaveFun["Great! Enjoy!"]
graph TD
Start --> Need{"Hugo version >= 0.93.0"}
Need -- No --> Off["Set params.mermaid.enable = true"]
Off --> Author
Need -- Yes --> Author[Insert mermaid codeblock]
```
````

Automatically renders to:

```mermaid
graph LR
Start --> Need{"Do I need diagrams"}
Need -- No --> Off["Set params.mermaid.enable = false"]
Need -- Yes --> HaveFun["Great! Enjoy!"]
graph TD
Start --> Need{"Hugo version >= 0.93.0"}
Need -- No --> Off["Set params.mermaid.enable = true"]
Off --> Author
Need -- Yes --> Author[Insert mermaid codeblock]
```

To enable/disable Mermaid, update `config.toml`/`config.yaml`/`config.json`:
With hugo version 0.93 or higher, support of Mermaid diagrams is automatically enabled as soon as you use a `mermaid` code block on your page.

{{% alert title="Warning" color="warning" %}}
If you are using hugo version 0.92 or lower, you need to enable Mermaid manually by updating your `config.toml`/`config.yaml`/`config.json`:

{{% /alert %}}

{{< tabpane persistLang=false >}}
{{< tab header="Configuration file:" disabled=true />}}
{{< tab header="Hugo version <= 0.92 only:" disabled=true />}}
{{< tab header="config.toml" lang="toml" >}}
[params.mermaid]
enable = true
Expand All @@ -310,38 +316,12 @@ params:
{{< /tab >}}
{{< /tabpane >}}

You also need to disable the `guessSyntax` from markup highlighting in `config.toml`/`config.yaml`/`config.json` for Mermaid to work:

{{< tabpane persistLang=false >}}
{{< tab header="Configuration file:" disabled=true />}}
{{< tab header="config.toml" lang="toml" >}}
[markup]
[markup.highlight]
guessSyntax = false
{{< /tab >}}
{{< tab header="config.yaml" lang="yaml" >}}
markup:
highlight:
guessSyntax: false
{{< /tab >}}
{{< tab header="config.json" lang="json" >}}
{
"markup": {
"highlight": {
"guessSyntax": false
}
}
}
{{< /tab >}}
{{< /tabpane >}}

You can also update settings for Mermaid, such as themes, padding, etc:
If needed, you can define custom settings for your diagrams, such as themes, padding in your `config.toml`/`config.yaml`/`config.json`.

{{< tabpane persistLang=false >}}
{{< tab header="Configuration file:" disabled=true />}}
{{< tab header="config.toml" lang="toml" >}}
[params.mermaid]
enable = true
theme = "neutral"

[params.mermaid.flowchart]
Expand All @@ -350,7 +330,6 @@ diagramPadding = 6
{{< tab header="config.yaml" lang="yaml" >}}
params:
mermaid:
enable: true
theme: neutral
flowchart:
diagramPadding: 6
Expand All @@ -359,7 +338,6 @@ params:
{
"params": {
"mermaid": {
"enable": true,
"theme": "neutral",
"flowchart": {
"diagramPadding": 6
Expand Down

0 comments on commit ea0860e

Please sign in to comment.