diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 3e391797eb..dc38cf5b4c 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -205,4 +205,5 @@ disableHugoGeneratorInject = true
# graphs; you usually will not need it and you should remove this for
# security reasons
mermaidInitialize = "{ \"securityLevel\": \"loose\" }"
+ mermaidZoom = true
additionalContentLanguage = [ "en" ]
diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 1692435b01..4b004d9fb7 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -28,6 +28,10 @@ This document shows you what's new in the latest release. For a detailed list of
````
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} [Mermaid]({{% relref "shortcodes/mermaid#parameter" %}}) diagrams can now be configured for pan and zoom on site and project level as individually for each graph.
+
+ The default setting of `on`, in effect since 1.1.0, changed back to `off` as there was interference with scrolling on mobile and big pages.
+
- {{% badge style="note" title=" " %}}Change{{% /badge %}} The theme is now capable to visually [adapt to your OS's light/dark mode setting]({{%relref "basics/customization/#adjust-to-os-settings" %}}).
This is also the new default setting if you haven't configured `themeVariant` in your `config.toml`.
@@ -459,6 +463,8 @@ This document shows you what's new in the latest release. For a detailed list of
## 1.1.0 (2021-07-02)
+- {{% badge style="warning" title=" " %}}Breaking{{% /badge %}} [Mermaid]({{% relref "shortcodes/mermaid" %}}) diagrams can now be panned and zoomed. This isn't configurable yet.
+
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} [`Mermaid`]({{% relref "shortcodes/mermaid#configuration" %}}) config options can be set in `config.toml`.
---
diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md
index 9b71632760..972e34f5f3 100644
--- a/exampleSite/content/shortcodes/mermaid.en.md
+++ b/exampleSite/content/shortcodes/mermaid.en.md
@@ -5,7 +5,7 @@ title = "Mermaid"
The `mermaid` shortcode generates diagrams and flowcharts from text, in a similar manner as Markdown using the [Mermaid](https://mermaidjs.github.io/) library.
-{{< mermaid align="center" >}}
+{{< mermaid align="center">}}
graph LR;
If --> Then
Then --> Else
@@ -33,7 +33,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl
{{% tab name="codefence" %}}
````md
-```mermaid { align="center" }
+```mermaid { align="center" zoom="true" }
graph LR;
If --> Then
Then --> Else
@@ -44,7 +44,7 @@ graph LR;
{{% tab name="shortcode" %}}
````go
-{{* mermaid align="center" */>}}
+{{* mermaid align="center" zoom="true" */>}}
graph LR;
If --> Then
Then --> Else
@@ -59,6 +59,7 @@ graph LR;
"context" .
"content" "graph LR;\nIf --> Then\nThen --> Else"
"align" "center"
+ "zoom" "true"
)}}
````
@@ -73,6 +74,7 @@ The generated graphs can be be panned by dragging them and zoomed by using the m
| Name | Default | Notes |
|:----------------------|:-----------------|:------------|
| **align** | `center` | Allowed values are `left`, `center` or `right`. |
+| **zoom** | see notes | Whether the graph is pan- and zoomable.
If not set the value is determined by the `mermaidZoom` setting of the [site](#global-configuration-file) or the [pages frontmatter](#pages-frontmatter) or `false` if not set at all.
- `false`: no pan or zoom
- `true`: pan and zoom active |
| _**<content>**_ | _<empty>_ | Your Mermaid graph. |
## Configuration
@@ -94,6 +96,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl
````toml
[params]
mermaidInitialize = "{ \"theme\": \"dark\" }"
+ mermaidZoom = true
[markup]
[markup.highlight]
@@ -108,6 +111,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl
````toml
+++
mermaidInitialize = "{ \"theme\": \"dark\" }"
+mermaidZoom = true
+++
````
@@ -339,10 +343,10 @@ gantt
Add to Mermaid :1d
{{< /mermaid >}}
-### Pie Chart
+### Pie Chart without Zoom
````go
-{{* mermaid */>}}
+{{* mermaid zoom="false" */>}}
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
@@ -350,7 +354,7 @@ pie title Pets adopted by volunteers
{{* /mermaid */>}}
````
-{{< mermaid >}}
+{{< mermaid zoom="false" >}}
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
diff --git a/layouts/partials/shortcodes/mermaid.html b/layouts/partials/shortcodes/mermaid.html
index 6dded3f2a1..f23124bff3 100644
--- a/layouts/partials/shortcodes/mermaid.html
+++ b/layouts/partials/shortcodes/mermaid.html
@@ -1,8 +1,21 @@
{{- $context := .context }}
{{- $content := .content }}
{{- $align := .align | default "center" }}
+{{- $zoom := $context.Site.Params.mermaidZoom | default false }}
+{{- with $context.Page.Params.mermaidZoom }}
+ {{- $zoom = . }}
+ {{- if eq (printf "%T" .) "string" }}
+ {{- $zoom = (eq . "true") }}
+ {{- end }}
+{{- end }}
+{{- with .zoom }}
+ {{- $zoom = . }}
+ {{- if eq (printf "%T" .) "string" }}
+ {{- $zoom = (eq . "true") }}
+ {{- end }}
+{{- end }}
{{- with $context }}
-