docs: add overview flow chart for compiler hooks

website/components/Columns.tsx

@@ -29,7 +29,7 @@ interface ColumnProps {
 
 export function Column({ title, children }: PropsWithChildren<ColumnProps>) {
   return (
-    <div className="w-80 flex-auto m-auto" style={{ marginTop: 0 }}>
+    <div className="flex-auto m-auto" style={{ marginTop: 0 }}>
       {title && <div className="font-bold text-center">{title}</div>}
       {children}
     </div>

website/components/Mermaid.scss

@@ -0,0 +1,182 @@
+.dark {
+  .rspack-mermaid {
+    .flowchart-label {
+      rect {
+        fill: #23272f !important;
+        stroke: #81b1db !important;
+        stroke-width: 1px !important;
+      }
+
+      polygon {
+        fill: #23272f !important;
+        stroke: #81b1db !important;
+        stroke-width: 1px !important;
+      }
+
+      span.nodeLabel {
+        color: #ccc !important;
+      }
+    }
+
+    .edgeLabel {
+      fill: #23272f !important;
+      color: #ccc !important;
+      background-color: #23272f !important;
+    }
+
+    .flowchart-link {
+      stroke: #ccc !important;
+    }
+
+    .marker {
+      stroke: #ccc !important;
+      fill: #ccc !important;
+    }
+  }
+}
+
+.rspress-doc {
+  .rspack-mermaid {
+    .flow-start,
+    .flow-end {
+      rect,
+      polygon {
+        fill: #666 !important;
+        stroke: #666 !important;
+      }
+
+      span.nodeLabel {
+        color: #fff !important;
+      }
+    }
+
+    .flow-hook {
+      rect,
+      polygon {
+        fill: var(--rp-container-info-border) !important;
+        stroke: var(--rp-container-info-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-hook-non-support {
+      rect,
+      polygon {
+        fill: var(--rp-container-danger-border) !important;
+        stroke: var(--rp-container-danger-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-hook-partial-support {
+      rect,
+      polygon {
+        fill: var(--rp-container-warning-border) !important;
+        stroke: var(--rp-container-warning-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-process {
+      rect,
+      polygon {
+        fill: var(--rp-container-details-border) !important;
+        stroke: var(--rp-container-details-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+  }
+
+  .flowchart-link {
+    stroke: #666 !important;
+  }
+
+  .marker {
+    stroke: #666 !important;
+    fill: #666 !important;
+  }
+}
+
+.dark {
+  .rspress-doc {
+    .rspack-mermaid {
+      .flow-start,
+      .flow-end {
+        rect,
+        polygon {
+          fill: #666 !important;
+          stroke: #666 !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-hook {
+        rect,
+        polygon {
+          fill: var(--rp-container-info-bg) !important;
+          stroke: var(--rp-container-info-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-hook-non-support {
+        rect,
+        polygon {
+          fill: var(--rp-container-danger-bg) !important;
+          stroke: var(--rp-container-danger-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-hook-partial-support {
+        rect,
+        polygon {
+          fill: var(--rp-container-warning-bg) !important;
+          stroke: var(--rp-container-warning-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-process {
+        rect,
+        polygon {
+          fill: var(--rp-container-details-bg) !important;
+          stroke: var(--rp-container-details-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+    }
+  }
+}
+
+.rspack-mermaid {
+  font-size: 20px;
+  text-align: center;
+}

website/components/Mermaid.tsx

@@ -0,0 +1,61 @@
+import type { CSSProperties, PropsWithChildren } from 'react';
+import './Mermaid.scss';
+
+import mermaid, { type MermaidConfig } from 'mermaid';
+import { useEffect, useId, useState } from 'react';
+interface Props {
+  style?: CSSProperties;
+  title?: string;
+  config?: MermaidConfig;
+}
+export default function Mermaid({
+  style,
+  children,
+  title,
+  config,
+}: PropsWithChildren<Props>) {
+  const id = useId();
+  const [svg, setSvg] = useState('');
+  const [renderError, setRenderError] = useState(false);
+
+  async function renderMermaid2SVG() {
+    // https://github.com/mermaid-js/mermaid/blob/1b40f552b20df4ab99a986dd58c9d254b3bfd7bc/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue#L53
+    const hasDarkClass = document.documentElement.classList.contains('dark');
+
+    const mermaidConfig: MermaidConfig = {
+      securityLevel: 'loose',
+      startOnLoad: false,
+      theme: hasDarkClass ? 'dark' : 'default',
+      ...config,
+    };
+
+    try {
+      mermaid.initialize(mermaidConfig);
+
+      const { svg } = await mermaid.render(
+        id.replace(/:/g, ''),
+        children as string,
+      );
+
+      setSvg(svg);
+    } catch (error) {
+      setRenderError(true);
+    }
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: safe
+  useEffect(() => {
+    renderMermaid2SVG();
+  }, [children]);
+  return (
+    <>
+      {renderError || !svg ? null : (
+        <div style={style} className="rspack-mermaid">
+          <h3>{title}</h3>
+          {/* biome-ignore lint/security/noDangerouslySetInnerHtml: safe */}
+          <div dangerouslySetInnerHTML={{ __html: svg }} />
+        </div>
+      )}
+    </>
+  );
+}