Skip to content

docs(mermaid): document the controls, fullscreen and align arguments #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
markdumay merged 1 commit into from
Jul 5, 2026
Merged

docs(mermaid): document the controls, fullscreen and align arguments #107

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion content/components/mermaid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -538,4 +538,23 @@ The `mermaid` shortcode supports dark mode and allows creation of a custom Merma

## Arguments

The shortcode does not support any arguments. Instead, use [Mermaid syntax](https://mermaid.js.org/intro/) to define your diagram or chart.
The shortcode supports the following optional arguments:

{{< args structure="mermaid" group="shortcode" >}}

For example, overlay pan-and-zoom controls and add a full-screen button — which opens the diagram in a lightbox overlay — handy for large, dense diagrams:

<!-- markdownlint-disable MD037 -->
{{< example lang="hugo" >}}

{{</* mermaid controls=true fullscreen=true */>}}
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
{{</* /mermaid */>}}

{{< /example >}}
<!-- markdownlint-enable MD037 -->

The diagram content itself uses standard [Mermaid syntax](https://mermaid.js.org/intro/).
Loading