From 721cebc92dfcd857b71aa2eb6f2b5e3c0a715e80 Mon Sep 17 00:00:00 2001
From: James Harton <james@harton.nz>
Date: Tue, 13 Jan 2026 11:57:12 +1300
Subject: [PATCH] fix: move mermaid script to `before_closing_body_tag` for
 proper rendering

Mermaid diagrams were rendering as code blocks instead of images because
the script was loaded in the head tag before the DOM content was available.
Moving to `before_closing_body_tag` ensures the script runs after all
page content is loaded, allowing mermaid to find and transform the code
blocks.

Closes #287
---
 mix.exs | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/mix.exs b/mix.exs
index d1bebd5..f29bf68 100644
--- a/mix.exs
+++ b/mix.exs
@@ -57,13 +57,7 @@ defmodule Reactor.MixProject do
           before_closing_head_tag: fn type ->
             if type == :html do
               """
-              <script src="https://cdn.jsdelivr.net/npm/mermaid@10.2.3/dist/mermaid.min.js"></script>
               <script>
-                mermaid.initialize({
-                  startOnLoad: true,
-                  theme: 'default'
-                });
-                
                 if (location.hostname === "hexdocs.pm") {
                   var script = document.createElement("script");
                   script.src = "https://plausible.io/js/script.js";
@@ -75,6 +69,19 @@ defmodule Reactor.MixProject do
               """
             end
           end,
+          before_closing_body_tag: fn type ->
+            if type == :html do
+              """
+              <script src="https://cdn.jsdelivr.net/npm/mermaid@10.2.3/dist/mermaid.min.js"></script>
+              <script>
+                mermaid.initialize({
+                  startOnLoad: true,
+                  theme: 'default'
+                });
+              </script>
+              """
+            end
+          end,
           groups_for_modules: [
             Dsl: ~r/^Reactor\.Dsl.*/,
             Steps: ~r/^Reactor\.Step.*/,