Commit 436b267 h

Pat Ambrosio · 26-08-25 23:43

Render diagram fences as diagrams, with a self-hosted renderer

Changes: 6 files +409 -5

Changes (Side-by-Side)

Raw

commit 436b2674123f9ddf2324cb36f37a2b8515d0a6ca
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Tue Aug 25 23:43:53 2026 +0800

    Render diagram fences as diagrams, with a self-hosted renderer
    
    A mermaid fence used to render as a code block: the source survived, but
    the diagram did not. Two of mdd's methodology pages carry diagrams that
    are load-bearing for the text around them.
    
    The parser now emits <div class="diagram diagram-mermaid"> and holds the
    content verbatim. This is the one place a fence's text is not escaped,
    because the renderer reads the element's text content and parses it --
    escaping "-->" to "--&gt;" breaks every arrow. That is safe only because
    the set of languages treated this way is fixed in the parser: a document
    cannot introduce a new raw language. Everything else still escapes, and a
    language merely starting with "mermaid" is not raw.
    
    The class is neutral rather than named after one renderer, so a theme
    decides what to do with it. jenny bundles no renderer and loads nothing by
    default: DIAGRAM_SCRIPT names a script the site serves itself, and the
    layout emits it only on pages that actually contain a diagram -- a
    renderer bundle is megabytes, and every page paying for it so a handful
    work would be the wrong trade. Unset, a diagram degrades to its source
    text, styled as the code it is so it stays readable rather than collapsing
    into a paragraph.
    
    Posts get this too. The fence rule lives in the parser, so it applied to
    every layout immediately, but only the page layout had the script hook and
    the styling -- a post with a diagram would have shown run-together text.
    The helper and the CSS are lifted from one layout into the other rather
    than written twice.
    
    Three things measurement corrected along the way. The renderer scans for
    its own class name and found nothing, so it silently drew no diagram at
    all -- it is now pointed at the class the parser emits, and run directly
    rather than via startOnLoad, which waits for an event that has already
    fired by the time a script at the end of the body runs. The container
    shrink-wrapped inside the inline-block body column, leaving the diagram
    small against a full-width column; the container takes the width, while
    the renderer's own inline max-width is left alone because capping a small
    diagram at its natural size is right. And the mermaid theme is read from
    the page's CSS custom properties at init, so the palette has one
    definition rather than a second copy in the layout.
    
    The bundle itself is not vendored in jenny. deadkey serves mermaid 10.9.8
    from its own static/js, recorded with checksums in static/js/mermaid
    .VERSION -- a diagram is content, and content that renders only while a
    third party keeps serving a file is not self-contained.
    
    Tests: the fence rule (raw content, closing tag, the legend variant,
    ordinary and bare fences still escaped, near-miss language names), the
    hook (absent by default, present only where a diagram is, resolved
    relative to the page, pointed at the right class), both layouts carrying
    the styling, and the unrendered fallback. The hook tests use a fixture
    path, never a real bundle. Checked by mutation -- escaping the source,
    emitting the script unconditionally, dropping it from posts -- all caught.
    
    Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01WnSAstgnDYdKPwLGv1YZE5

diff --git a/bin/jenny b/bin/jenny
index 6d9be0a..49a4bc8 100755
--- a/bin/jenny
+++ b/bin/jenny
@@ -444,6 +444,7 @@ if [ -f "$LAYOUT_DIR/404.sh" ]; then
   BLOG_HOST="$BLOG_HOST" \
     BLOG_TITLE="$BLOG_TITLE" \
     NAVS_DIR="${NAVS_DIR:-navs}" \
+    DIAGRAM_SCRIPT="${DIAGRAM_SCRIPT:-}" \
     SED="$SED" AWK="$AWK" DATE="$DATE" GREP="$GREP" \
     "$LAYOUT_DIR/404.sh" > "$DIST/404.html"
 fi
diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index df3312d..fb0ebf1 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -61,6 +61,63 @@ page_nav() {
   printf '</nav>\n'
 }
 
+# diagram_script
+#
+# Emitted only when the rendered page actually contains a diagram. The
+# renderer is a few megabytes; making every page pay for it so that the
+# handful with diagrams work would be the wrong trade, and a page with no
+# diagram has nothing for it to do.
+#
+# The script is served from this site, not a CDN. A diagram is content, and
+# content that only renders while a third party keeps serving a file is not
+# self-contained -- the same reason the fonts and the theme are local.
+# DIAGRAM_SCRIPT points at the vendored copy; unset it and diagrams degrade
+# to their source text, which stays readable because it is what the author
+# wrote.
+diagram_script() {
+  [ -n "${DIAGRAM_SCRIPT:-}" ] || return 0
+  case "${POST_CONTENTS:-}" in
+    *'class="diagram'*) ;;
+    *) return 0 ;;
+  esac
+  cat <<-_DIAGRAM_
+	      <script src="${URL_PREFIX}${DIAGRAM_SCRIPT}"></script>
+	      <script>
+	        (function() {
+	          if (typeof mermaid === 'undefined') return;
+	          // The page theme is a CSS custom property set, and mermaid needs
+	          // real values at init. Reading them from the document keeps one
+	          // definition of the palette rather than a second copy here.
+	          var cs = getComputedStyle(document.documentElement);
+	          var v = function(n, fallback) {
+	            var got = cs.getPropertyValue(n);
+	            return (got && got.trim()) || fallback;
+	          };
+	          mermaid.initialize({
+	            // The renderer scans for its own class name, and the parser
+	            // emits a neutral "diagram" class so the markup does not name
+	            // one particular renderer. Point it at what is actually on the
+	            // page; startOnLoad is off because this script runs at the end
+	            // of the body, after the load event it would wait for.
+	            querySelector: '.diagram-mermaid',
+	            startOnLoad: false,
+	            securityLevel: 'strict',
+	            theme: 'base',
+	            themeVariables: {
+	              background:      v('--bg-primary', '#fff'),
+	              primaryColor:    v('--bg-secondary', '#f4f4f4'),
+	              primaryTextColor: v('--text-primary', '#444'),
+	              primaryBorderColor: v('--border-medium', '#999'),
+	              lineColor:       v('--text-muted', '#999'),
+	              fontFamily:      'Roboto, sans-serif'
+	            }
+	          });
+	          mermaid.run({ querySelector: '.diagram-mermaid' });
+	        })();
+	      </script>
+	_DIAGRAM_
+}
+
 page_has_nav() {
   [ -n "${PAGE_NAV:-}" ]
 }
@@ -483,6 +540,26 @@ cat << _EOF_
           .home-spacer { display: none; }
         }
         .contents :first-child { margin-top: 0; }
+        /* A diagram is a figure, not a paragraph: it takes the column's width
+           and scales to it rather than rendering at whatever size the renderer
+           picked. Renderers emit a fixed width/height on the svg, so both are
+           overridden -- width alone leaves the original height and distorts
+           it. Before this the diagram sat small against a 60ch column. */
+        .diagram { margin: 1.5em 0; overflow-x: auto; display: block; width: 100%; }
+        /* The renderer writes an inline max-width of the diagram's natural
+           size, which is what keeps a small diagram from being blown up to
+           the column width. That is the right default, so it is left alone;
+           what needed fixing was the container, which shrink-wrapped inside
+           the inline-block body column instead of taking its full width. */
+        .diagram svg { width: 100%; height: auto; display: block; }
+        /* Until the renderer runs -- or if it never does, because the script
+           is absent or blocked -- the element holds the diagram's source. Show
+           it as the code it is rather than as a run-together paragraph, so the
+           page degrades to something readable instead of a wall of text. */
+        .diagram:not(:has(svg)) { white-space: pre; font-family: 'Fira Mono', monospace;
+                                  font-size: .85em; color: var(--text-muted);
+                                  background-color: var(--bg-secondary);
+                                  padding: 1em; border-radius: 3px; }
         h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: normal; text-transform: uppercase; margin: 2em 0 1em; }
         ol, ul { padding-left: 1em; }
         /* Notes and references are two different lists, so each is labelled.
@@ -580,6 +657,7 @@ cat << _EOF_
           </div>
         </div>
       </article>
+$(diagram_script)
     </body>
   </html>
 _EOF_
diff --git a/share/jenny/layout/post.sh b/share/jenny/layout/post.sh
index 8cd075b..364c237 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -1,6 +1,63 @@
 #!/usr/bin/env bash
 set -euo pipefail
 
+# diagram_script
+#
+# Emitted only when the rendered page actually contains a diagram. The
+# renderer is a few megabytes; making every page pay for it so that the
+# handful with diagrams work would be the wrong trade, and a page with no
+# diagram has nothing for it to do.
+#
+# The script is served from this site, not a CDN. A diagram is content, and
+# content that only renders while a third party keeps serving a file is not
+# self-contained -- the same reason the fonts and the theme are local.
+# DIAGRAM_SCRIPT points at the vendored copy; unset it and diagrams degrade
+# to their source text, which stays readable because it is what the author
+# wrote.
+diagram_script() {
+  [ -n "${DIAGRAM_SCRIPT:-}" ] || return 0
+  case "${POST_CONTENTS:-}" in
+    *'class="diagram'*) ;;
+    *) return 0 ;;
+  esac
+  cat <<-_DIAGRAM_
+	      <script src="${URL_PREFIX}${DIAGRAM_SCRIPT}"></script>
+	      <script>
+	        (function() {
+	          if (typeof mermaid === 'undefined') return;
+	          // The page theme is a CSS custom property set, and mermaid needs
+	          // real values at init. Reading them from the document keeps one
+	          // definition of the palette rather than a second copy here.
+	          var cs = getComputedStyle(document.documentElement);
+	          var v = function(n, fallback) {
+	            var got = cs.getPropertyValue(n);
+	            return (got && got.trim()) || fallback;
+	          };
+	          mermaid.initialize({
+	            // The renderer scans for its own class name, and the parser
+	            // emits a neutral "diagram" class so the markup does not name
+	            // one particular renderer. Point it at what is actually on the
+	            // page; startOnLoad is off because this script runs at the end
+	            // of the body, after the load event it would wait for.
+	            querySelector: '.diagram-mermaid',
+	            startOnLoad: false,
+	            securityLevel: 'strict',
+	            theme: 'base',
+	            themeVariables: {
+	              background:      v('--bg-primary', '#fff'),
+	              primaryColor:    v('--bg-secondary', '#f4f4f4'),
+	              primaryTextColor: v('--text-primary', '#444'),
+	              primaryBorderColor: v('--border-medium', '#999'),
+	              lineColor:       v('--text-muted', '#999'),
+	              fontFamily:      'Roboto, sans-serif'
+	            }
+	          });
+	          mermaid.run({ querySelector: '.diagram-mermaid' });
+	        })();
+	      </script>
+	_DIAGRAM_
+}
+
 html_escape() {
   local s=$1
   # The replacement text must escape &, because bash >= 5.2 expands a bare &
@@ -198,6 +255,26 @@ cat << _EOF_
         .heading .stamp { color: var(--text-muted); }
         .contents { display: inline-block; max-width: 60ch; vertical-align: top; width: 100%; }
         .contents :first-child { margin-top: 0; }
+        /* A diagram is a figure, not a paragraph: it takes the column's width
+           and scales to it rather than rendering at whatever size the renderer
+           picked. Renderers emit a fixed width/height on the svg, so both are
+           overridden -- width alone leaves the original height and distorts
+           it. Before this the diagram sat small against a 60ch column. */
+        .diagram { margin: 1.5em 0; overflow-x: auto; display: block; width: 100%; }
+        /* The renderer writes an inline max-width of the diagram's natural
+           size, which is what keeps a small diagram from being blown up to
+           the column width. That is the right default, so it is left alone;
+           what needed fixing was the container, which shrink-wrapped inside
+           the inline-block body column instead of taking its full width. */
+        .diagram svg { width: 100%; height: auto; display: block; }
+        /* Until the renderer runs -- or if it never does, because the script
+           is absent or blocked -- the element holds the diagram's source. Show
+           it as the code it is rather than as a run-together paragraph, so the
+           page degrades to something readable instead of a wall of text. */
+        .diagram:not(:has(svg)) { white-space: pre; font-family: 'Fira Mono', monospace;
+                                  font-size: .85em; color: var(--text-muted);
+                                  background-color: var(--bg-secondary);
+                                  padding: 1em; border-radius: 3px; }
         h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: normal; text-transform: uppercase; margin: 2em 0 1em; }
         ol, ul { padding-left: 1em; }
         /* Notes and references are two different lists, so each is labelled.
@@ -289,6 +366,7 @@ cat << _EOF_
         <div class="tags">$(for i in $TAGS; do echo "<a href=\"../tag/$i/\">$(html_escape "$i")</a>"; done;)</div>
         </div>
       </article>
+$(diagram_script)
     </body>
   </html>
 _EOF_
diff --git a/share/jenny/lib/components.sh b/share/jenny/lib/components.sh
index 70e580f..ee1b4c3 100644
--- a/share/jenny/lib/components.sh
+++ b/share/jenny/lib/components.sh
@@ -65,6 +65,7 @@ render () {
     BLOG_HOST="$BLOG_HOST" \
     BLOG_TITLE="$BLOG_TITLE" \
     NAVS_DIR="${NAVS_DIR:-navs}" \
+    DIAGRAM_SCRIPT="${DIAGRAM_SCRIPT:-}" \
     TAGS="$tags" \
     SED="$SED" AWK="$AWK" DATE="$DATE" GREP="$GREP" \
     "$LAYOUT_DIR/post.sh" > "$destination"
@@ -228,6 +229,7 @@ render_index () {
     BLOG_HOST="$BLOG_HOST" \
     BLOG_TITLE="$BLOG_TITLE" \
     NAVS_DIR="${NAVS_DIR:-navs}" \
+    DIAGRAM_SCRIPT="${DIAGRAM_SCRIPT:-}" \
     SED="$SED" AWK="$AWK" DATE="$DATE" GREP="$GREP" \
     "$LAYOUT_DIR/index.sh" > "$destination"
 }
@@ -439,6 +441,7 @@ render_page () {
     BLOG_HOST="$BLOG_HOST" \
     BLOG_TITLE="$BLOG_TITLE" \
     NAVS_DIR="${NAVS_DIR:-navs}" \
+    DIAGRAM_SCRIPT="${DIAGRAM_SCRIPT:-}" \
     IS_PAGE=1 \
     TAGS="" \
     SED="$SED" AWK="$AWK" DATE="$DATE" GREP="$GREP" \
diff --git a/share/jenny/lib/md2html.awk b/share/jenny/lib/md2html.awk
index 5b0a8c1..4c85b16 100755
--- a/share/jenny/lib/md2html.awk
+++ b/share/jenny/lib/md2html.awk
@@ -611,9 +611,9 @@ fence {
 		if(match($0, "^[ \t]*" fence_char "{" fence_len ",}[ \t]*$")){
 			if(fence_first)
 				# An empty fence: nothing was ever buffered.
-				oprint(fence_open "</code></pre>");
+				oprint(fence_open fence_close);
 			else
-				oprint(fence_held "</code></pre>");
+				oprint(fence_held fence_close);
 			fence = 0;
 			fence_held = "";
 			next;
@@ -622,12 +622,12 @@ fence {
 	# Hold each line until the next one arrives, so the closing tag can be
 	# joined to the last line rather than sitting on its own.
 	if(fence_first){
-		fence_held = fence_open escfence($0);
+		fence_held = fence_open (fence_raw ? $0 : escfence($0));
 		fence_first = 0;
 	}
 	else{
 		oprint(fence_held);
-		fence_held = escfence($0);
+		fence_held = (fence_raw ? $0 : escfence($0));
 	}
 	next;
 }
@@ -656,7 +656,27 @@ fence {
 	fence = 1;
 	fence_first = 1;
 	fence_re = "^[ \t]*" fence_char;
-	if(info != "")
+	# A diagram language is held for a client-side renderer rather than shown
+	# as source. The text goes in verbatim: mermaid reads the element's text
+	# content and parses it itself, so escaping "-->" to "--&gt;" would break
+	# every arrow in the diagram. That makes this the one place a fence's
+	# content is not escaped, which is safe only because the set of languages
+	# treated this way is fixed here -- an author cannot introduce a new one
+	# from a document.
+	#
+	# The language is kept as a class so a theme decides what to do with it.
+	# jenny renders no diagrams itself and loads nothing; a theme that wants
+	# them supplies the renderer.
+	fence_raw = 0;
+	fence_close = "</code></pre>";
+	lang = info;
+	sub(/[ \t].*$/, "", lang);
+	if(lang == "mermaid" || lang == "mermaid-legend"){
+		fence_raw = 1;
+		fence_close = "</div>";
+		fence_open = "<div class=\"diagram diagram-" eschtml(lang) "\">";
+	}
+	else if(info != "")
 		fence_open = "<pre><code class=\"language-" eschtml(info) "\">";
 	else
 		fence_open = "<pre><code>";
diff --git a/test/regressions.sh b/test/regressions.sh
index 72f767b..8915343 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -776,6 +776,230 @@ assert_contains "$(md_render 'A _em <b>x</b> more_ end.')" '<em>em <b>x</b> more
 it "intraword underscores are still literal"
 assert_contains "$(md_render 'Use node_modules and snake_case_name.')" 'node_modules and snake_case_name'
 
+suite "diagrams"
+
+# A diagram fence is held for a client-side renderer instead of being shown as
+# source. jenny renders no diagrams itself and loads nothing by default: a
+# theme supplies the renderer, and the site self-hosts it.
+
+it "a mermaid fence becomes a diagram div"
+assert_contains "$(md_render '```mermaid
+flowchart LR
+  A --> B
+```')" '<div class="diagram diagram-mermaid">'
+
+it "diagram source is not HTML-escaped"
+# The renderer reads the element's text content and parses it, so escaping
+# "-->" to "--&gt;" would break every arrow in the diagram. This is the one
+# place a fence's content is left raw.
+dia=$(md_render '```mermaid
+flowchart LR
+  A["x<br/>y"] -->|"label"| B
+```')
+assert_contains "$dia" '-->'
+assert_not_contains "$dia" '--&gt;'
+assert_contains "$dia" '<br/>'
+
+it "the diagram fence closes with a div, not a code block"
+assert_contains "$dia" '</div>'
+assert_not_contains "$dia" '</code></pre>'
+
+it "the legend variant keeps its own class"
+assert_contains "$(md_render '```mermaid-legend
+flowchart LR
+  A --> B
+```')" 'diagram-mermaid-legend'
+
+it "an ordinary code fence is still escaped"
+# Only the fixed set of diagram languages is raw; everything else escapes as
+# before, so a document cannot introduce a new raw language.
+code=$(md_render '```bash
+echo "a" && b > c
+```')
+assert_contains "$code" '&amp;&amp;'
+assert_contains "$code" '<pre><code class="language-bash">'
+
+it "a bare fence is still escaped"
+assert_contains "$(md_render '```
+x > y & z
+```')" '&gt;'
+
+it "a language whose name merely starts with mermaid is not raw"
+notmer=$(md_render '```mermaidish
+a > b
+```')
+assert_contains "$notmer" '<pre><code'
+assert_not_contains "$notmer" '<div class="diagram'
+
+suite "self-hosted diagram renderer"
+
+dg="$TMPROOT/diagrams"
+make_blog_min "$dg" 1 10
+mkdir -p "$dg/pages"
+printf '# Plain\n\nNo diagram here.\n' > "$dg/pages/plain.md"
+printf '# Chart\n\n```mermaid\nflowchart LR\n  A --> B\n```\n' > "$dg/pages/chart.md"
+
+it "no renderer is loaded when DIAGRAM_SCRIPT is unset"
+# jenny ships no renderer and pulls nothing from a CDN. Without the setting a
+# diagram degrades to its source text, which stays readable.
+run_jenny_split "$dg"
+assert_file_not_contains "$dg/.dist/chart.html" '<script src='
+
+it "the renderer is loaded on a page that has a diagram"
+printf 'DIAGRAM_SCRIPT="/js/mermaid.min.js"\n' >> "$dg/.blogrc"
+run_jenny_split "$dg"
+assert_file_contains "$dg/.dist/chart.html" 'js/mermaid.min.js'
+
+it "the renderer is not loaded on a page without one"
+# The bundle is megabytes; every page paying for it so a few work would be the
+# wrong trade.
+assert_file_not_contains "$dg/.dist/plain.html" 'js/mermaid.min.js'
+
+it "the renderer is pointed at the class the parser emits"
+# The markup uses a neutral "diagram" class rather than naming one renderer,
+# so the renderer has to be told what to look for. Left at its own default it
+# found nothing and silently rendered no diagram at all.
+assert_file_contains "$dg/.dist/chart.html" "querySelector: '.diagram-mermaid'"
+
+it "the script path is resolved relative to the page"
+mkdir -p "$dg/pages/deep"
+printf '# Deep\n\n```mermaid\nflowchart LR\n  A --> B\n```\n' > "$dg/pages/deep/d.md"
+run_jenny_split "$dg"
+assert_file_contains "$dg/.dist/deep/d.html" '"../js/mermaid.min.js"'
+
+it "the build is clean"
+assert_eq "$stderr_output" ""
+
+suite "diagrams"
+
+# A diagram fence is held for a client-side renderer instead of being shown as
+# source. jenny ships no renderer and pulls nothing from a CDN -- these test
+# the fence rule and the opt-in hook only; the bundle, if a site wants one, is
+# the site's own file.
+
+it "a mermaid fence becomes a diagram div"
+assert_contains "$(md_render '```mermaid
+flowchart LR
+  A --> B
+```')" '<div class="diagram diagram-mermaid">'
+
+it "diagram source is not HTML-escaped"
+# The renderer reads the element's text content and parses it, so escaping
+# "-->" to "--&gt;" would break every arrow in the diagram. This is the one
+# place a fence's content is left raw.
+dia=$(md_render '```mermaid
+flowchart LR
+  A["x<br/>y"] -->|"label"| B
+```')
+assert_contains "$dia" '-->'
+assert_not_contains "$dia" '--&gt;'
+assert_contains "$dia" '<br/>'
+
+it "the diagram fence closes with a div, not a code block"
+assert_contains "$dia" '</div>'
+assert_not_contains "$dia" '</code></pre>'
+
+it "the legend variant keeps its own class"
+assert_contains "$(md_render '```mermaid-legend
+flowchart LR
+  A --> B
+```')" 'diagram-mermaid-legend'
+
+it "an ordinary code fence is still escaped"
+# Only the fixed set of diagram languages is raw; everything else escapes as
+# before, so a document cannot introduce a new raw language.
+code=$(md_render '```bash
+echo "a" && b > c
+```')
+assert_contains "$code" '&amp;&amp;'
+assert_contains "$code" '<pre><code class="language-bash">'
+
+it "a bare fence is still escaped"
+assert_contains "$(md_render '```
+x > y & z
+```')" '&gt;'
+
+it "a language whose name merely starts with mermaid is not raw"
+notmer=$(md_render '```mermaidish
+a > b
+```')
+assert_contains "$notmer" '<pre><code'
+assert_not_contains "$notmer" '<div class="diagram'
+
+suite "diagram renderer hook"
+
+# DIAGRAM_SCRIPT names a script a site serves itself. jenny bundles no
+# renderer: with the setting unset nothing is emitted, and the path here is a
+# fixture, not any real file.
+
+dg="$TMPROOT/diagrams"
+make_blog_min "$dg" 1 10
+mkdir -p "$dg/pages"
+printf '# Plain\n\nNo diagram here.\n' > "$dg/pages/plain.md"
+printf '# Chart\n\n```mermaid\nflowchart LR\n  A --> B\n```\n' > "$dg/pages/chart.md"
+
+it "nothing is loaded when DIAGRAM_SCRIPT is unset"
+# The default: a diagram degrades to its source text, which stays readable
+# because it is what the author wrote.
+run_jenny_split "$dg"
+assert_file_not_contains "$dg/.dist/chart.html" '<script src='
+
+it "the script is emitted on a page that has a diagram"
+printf 'DIAGRAM_SCRIPT="/js/renderer.js"\n' >> "$dg/.blogrc"
+run_jenny_split "$dg"
+assert_file_contains "$dg/.dist/chart.html" 'js/renderer.js'
+
+it "the script is not emitted on a page without one"
+# A renderer bundle is typically megabytes; every page paying for it so that a
+# few work would be the wrong trade.
+assert_file_not_contains "$dg/.dist/plain.html" 'js/renderer.js'
+
+it "the renderer is pointed at the class the parser emits"
+# The markup uses a neutral "diagram" class rather than naming one renderer,
+# so the renderer has to be told what to look for. Left at its own default it
+# matched nothing and silently drew no diagram.
+assert_file_contains "$dg/.dist/chart.html" "querySelector: '.diagram-mermaid'"
+
+it "the script path is resolved relative to the page"
+mkdir -p "$dg/pages/deep"
+printf '# Deep\n\n```mermaid\nflowchart LR\n  A --> B\n```\n' > "$dg/pages/deep/d.md"
+run_jenny_split "$dg"
+assert_file_contains "$dg/.dist/deep/d.html" '"../js/renderer.js"'
+
+it "posts get the same treatment as pages"
+# The fence rule is in the parser, so it applies to every layout. A post that
+# only got the div -- no renderer, no styling -- would show its diagram as
+# run-together text.
+printf '# Charted\n\n```mermaid\nflowchart LR\n  A --> B\n```\n' > "$dg/$(date +%Y-%m-%d) charted.md"
+run_jenny_split "$dg"
+assert_file_contains "$dg/.dist/post/charted.html" '<div class="diagram diagram-mermaid">'
+assert_file_contains "$dg/.dist/post/charted.html" 'js/renderer.js'
+
+it "a post without a diagram loads no renderer"
+post_plain=$(find "$dg/.dist/post" -name '*.html' ! -name 'charted.html' | head -1)
+assert_file_not_contains "$post_plain" 'js/renderer.js'
+
+it "both layouts carry the diagram styling"
+# Lifted from one layout into the other rather than written twice, so they
+# cannot drift.
+assert_file_contains "$dg/.dist/post/charted.html" '.diagram svg { width: 100%'
+assert_file_contains "$dg/.dist/chart.html" '.diagram svg { width: 100%'
+
+it "the diagram box takes the body column, not its shrink-wrapped width"
+# .contents is an inline-block, so a block inside it shrink-wraps to its
+# content; the diagram sat small against a full-width column until the
+# container was told to take the width.
+assert_file_contains "$dg/.dist/chart.html" '.diagram { margin: 1.5em 0; overflow-x: auto; display: block; width: 100%; }'
+
+it "an unrendered diagram degrades to readable source"
+# If the script is absent or blocked, the element still holds what the author
+# wrote. Shown as the code it is rather than as a paragraph with the newlines
+# collapsed.
+assert_file_contains "$dg/.dist/chart.html" '.diagram:not(:has(svg)) { white-space: pre;'
+
+it "the build is clean"
+assert_eq "$stderr_output" ""
+
 suite "MMD metadata end to end"
 
 it "a metadata pair survives into the rendered post"