Skip to content

Commit bbda6bc

Browse files
akoclaude
andcommitted
fix: render mermaid diagrams in docs site
Load mermaid v11 from CDN and render ```mermaid code blocks client-side. No build dependency needed — works with existing CI workflow. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 67f3410 commit bbda6bc

File tree

2 files changed

+25
-0
lines changed

2 files changed

+25
-0
lines changed

docs-site/book.toml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ git-repository-url = "https://github.com/mendixlabs/mxcli"
1515
edit-url-template = "https://github.com/mendixlabs/mxcli/edit/main/docs-site/src/{path}"
1616
site-url = "/mxcli/"
1717
additional-css = ["theme/custom.css"]
18+
additional-js = ["theme/mermaid-init.js"]
1819

1920
[output.html.search]
2021
enable = true

docs-site/theme/mermaid-init.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Render mermaid diagrams in mdbook.
2+
// mdbook renders ```mermaid blocks as <code class="language-mermaid"> inside <pre>.
3+
// This script loads mermaid from CDN and converts them to rendered SVG diagrams.
4+
(function () {
5+
var blocks = document.querySelectorAll('code.language-mermaid');
6+
if (blocks.length === 0) return;
7+
8+
var script = document.createElement('script');
9+
script.src = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
10+
script.onload = function () {
11+
mermaid.initialize({ startOnLoad: false, theme: 'default' });
12+
13+
blocks.forEach(function (code, i) {
14+
var pre = code.parentElement;
15+
var container = document.createElement('div');
16+
container.className = 'mermaid';
17+
container.textContent = code.textContent;
18+
pre.parentElement.replaceChild(container, pre);
19+
});
20+
21+
mermaid.run();
22+
};
23+
document.head.appendChild(script);
24+
})();

0 commit comments

Comments
 (0)