diff --git a/app/javascript/application.js b/app/javascript/application.js
index 5a4539e3..e604c724 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -3,4 +3,26 @@ import "@hotwired/turbo-rails"
 import "actions"
 import "controllers"
 import "house"
+import mermaid from "mermaid"
+
+const MERMAID_KEYWORDS = /^(flowchart|graph\s+(TD|TB|BT|RL|LR)|sequenceDiagram|classDiagram|stateDiagram|erDiagram|gantt|pie|gitGraph|mindmap|timeline|sankey|xychart)\b/
+
+document.addEventListener("turbo:load", () => {
+  const theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default"
+  mermaid.initialize({ startOnLoad: false, theme })
+
+  const targets = [...document.querySelectorAll("pre > code.language-mermaid, pre.highlight.plaintext > code")]
+    .filter(el => el.classList.contains("language-mermaid") || MERMAID_KEYWORDS.test(el.textContent.trim()))
+  if (!targets.length) return
+
+  targets.forEach(el => {
+    const pre = el.closest("pre")
+    if (!pre) return
+    const div = document.createElement("div")
+    div.className = "mermaid"
+    div.textContent = el.textContent
+    pre.replaceWith(div)
+  })
+  mermaid.run()
+})
 
diff --git a/config/importmap.rb b/config/importmap.rb
index 05069691..b5a42ad1 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -8,6 +8,7 @@
 pin "house", to: "house.min.js"
 
 pin_all_from "app/javascript/actions", under: "actions"
+pin "mermaid", to: "https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs"
 pin_all_from "app/javascript/controllers", under: "controllers"
 pin_all_from "app/javascript/helpers", under: "helpers"
 pin_all_from "app/javascript/lib", under: "lib"
diff --git a/mermaid-screenshot.png b/mermaid-screenshot.png
new file mode 100644
index 00000000..1b3f7054
Binary files /dev/null and b/mermaid-screenshot.png differ