Mermaid
<time datetime="2023-06-17 00:00:00 +0000 UTC">June 17 2023</time><span class="px-2 text-primary-500">·</span><time datetime="2024-02-20 16:00:25 -0600 CST">Updated: February 20 2024</time><span class="px-2 text-primary-500">·</span><span>98 words</span><span class="px-2 text-primary-500">·</span><span title="Reading time">1 min</span>
Blowfish
Shortcodes
Mermaid
blowfish shortcodes - This article is part of a series.
🐡 Shortcodes
mermaid draw detailed diagrams and visualisations using text.
mermaid allows you to draw detailed diagrams and visualisations using text.
It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.
Simply write your Mermaid syntax within the mermaid shortcode and let the plugin do the rest.
Refer to the official Mermaid docs for details on syntax and supported diagram types.
Example:
{{< mermaid >}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
{{< /mermaid >}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
You can see some additional Mermaid examples on the diagrams and flowcharts samples page.