Auto-activation of mermaid diagrams: adapt documentation

google · Oct 27, 2022 · 0020bb2 · 0020bb2
1 parent 7789b40
commit 0020bb2
Showing 1 changed file with 18 additions and 40 deletions.
diff --git a/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md b/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md
@@ -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
@@ -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]
@@ -350,7 +330,6 @@ diagramPadding = 6
 {{< tab header="config.yaml" lang="yaml" >}}
 params:
   mermaid:
-    enable: true
     theme: neutral
     flowchart:
       diagramPadding: 6
@@ -359,7 +338,6 @@ params:
 {
   "params": {
     "mermaid": {
-      "enable": true,
       "theme": "neutral",
       "flowchart": {
         "diagramPadding": 6