Fix Mermaid flowchart rendering (#3147)

Author: Herrtian

docs/_static/mermaid-normalize.js

@@ -0,0 +1,29 @@
+(function () {
+  function dedent(text) {
+    const lines = text.replace(/\s+$/u, "").split("\n");
+    const indents = lines
+      .filter((line) => line.trim())
+      .map((line) => line.match(/^\s*/u)[0].length);
+
+    if (!indents.length) {
+      return text;
+    }
+
+    const indent = Math.min(...indents);
+    return lines.map((line) => line.slice(indent)).join("\n");
+  }
+
+  function normalizeMermaidBlocks() {
+    document.querySelectorAll("pre.mermaid").forEach((block) => {
+      block.textContent = dedent(block.textContent);
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", normalizeMermaidBlocks, {
+      once: true,
+    });
+  } else {
+    normalizeMermaidBlocks();
+  }
+})();

docs/conf.py

@@ -48,7 +48,7 @@
 pygments_style, pygments_dark_style = "sphinx", "monokai"
 html_static_path = ["_static"]
 html_css_files = ["custom.css"]
-html_js_files = ["rtd-search.js"]
+html_js_files = ["mermaid-normalize.js", "rtd-search.js"]
 html_favicon = "_static/virtualenv.svg"
 html_theme_options = {
     "light_logo": "virtualenv.png",