diff --git a/layouts/_default/_markup/render-codeblock-mermaid-frame.html b/layouts/_default/_markup/render-codeblock-mermaid-frame.html
new file mode 100644
index 0000000..c170616
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid-frame.html
@@ -0,0 +1,3 @@
+{{ $path := md5 .Inner | printf "mermaid/%s" }}
+{{ $diagram := resources.Get "hugomods/mermaid/diagram.html" | resources.ExecuteAsTemplate $path . }}
+<iframe src="{{ $diagram.RelPermalink }}"></iframe>
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index 20ec319..8f1be90 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -1,4 +1,4 @@
 {{ .Page.Store.Set "hasMermaid" true -}}
 <pre class="mermaid">
-    {{- .Inner | safeHTML -}}
+    {{- .Inner | replaceRE "\n" "\n\t" -}}
 </pre>