diff --git a/exampleSite/content/basics/generator/_index.en.md b/exampleSite/content/basics/generator/_index.en.md
index a52834226f..db38d29c21 100644
--- a/exampleSite/content/basics/generator/_index.en.md
+++ b/exampleSite/content/basics/generator/_index.en.md
@@ -27,7 +27,7 @@ This only works in modern browsers.
 {{% button style="secondary" icon="download" %}}Download variant{{% /button %}}
 {{% button style="warning" icon="trash" %}}Reset variant{{% /button %}}
 
-<div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div>
+<div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);">Graph</div>
 
 {{% button style="secondary" icon="download" %}}Download variant{{% /button %}}
 {{% button style="warning" icon="trash" %}}Reset variant{{% /button %}}
diff --git a/layouts/partials/shortcodes/mermaid.html b/layouts/partials/shortcodes/mermaid.html
index 0de0d720dc..6dded3f2a1 100644
--- a/layouts/partials/shortcodes/mermaid.html
+++ b/layouts/partials/shortcodes/mermaid.html
@@ -2,7 +2,7 @@
 {{- $content := .content }}
 {{- $align := .align | default "center" }}
 {{- with $context }}
-<div class="mermaid" align="{{ $align }}">
+<div class="mermaid align-{{ $align }}">
   {{- replaceRE "&#39;" "'" ( replaceRE "&#34;" "\"" ( $content | safeHTML ) ) -}}
 </div>
 {{- .Page.Store.Set "hasMermaid" true }}
diff --git a/static/css/theme.css b/static/css/theme.css
index 3fa8a7b074..c648b948b0 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1479,3 +1479,18 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
     transform: translateY(0%);
 }
 */
+
+.align-right {
+    display: flex;
+    justify-content: right;
+}
+
+.align-center {
+    display: flex;
+    justify-content: center;
+}
+
+.align-left {
+    display: flex;
+    justify-content: left;
+}