Support mermaid charts rendering

web/package.json

@@ -17,6 +17,7 @@
     "emoji-js": "^3.9.0",
     "json-schema-merge-allof": "^0.8.1",
     "lodash": "^4.17.21",
+    "mermaid": "^11.13.0",
     "nanoid": "^5.1.6",
     "react": "^19.2.0",
     "react-apexcharts": "^1.4.4",

web/src/layout/package/readme/MermaidDiagram.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+
+import MermaidDiagram from './MermaidDiagram';
+
+vi.mock('mermaid', () => ({
+  default: {
+    initialize: vi.fn(),
+    render: vi.fn(),
+  },
+}));
+
+describe('MermaidDiagram', () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('renders mermaid diagram as SVG', async () => {
+    const mermaid = (await import('mermaid')).default;
+    vi.mocked(mermaid.render).mockResolvedValue({
+      svg: '<svg data-testid="mermaid-svg"><text>Diagram</text></svg>',
+      bindFunctions: vi.fn(),
+    });
+
+    render(<MermaidDiagram code="graph LR; A-->B" />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('mermaid-svg')).toBeInTheDocument();
+    });
+
+    expect(mermaid.initialize).toHaveBeenCalledWith({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      theme: 'default',
+    });
+    expect(mermaid.render).toHaveBeenCalledWith(expect.stringContaining('mermaid'), 'graph LR; A-->B');
+  });
+
+  it('falls back to code display on error', async () => {
+    const mermaid = (await import('mermaid')).default;
+    vi.mocked(mermaid.render).mockRejectedValue(new Error('Invalid syntax'));
+
+    render(<MermaidDiagram code="invalid mermaid" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('invalid mermaid')).toBeInTheDocument();
+    });
+  });
+});

web/src/layout/package/readme/MermaidDiagram.tsx

@@ -0,0 +1,58 @@
+import { memo, useEffect, useId, useRef, useState } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { github } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+
+import styles from './Readme.module.css';
+
+interface Props {
+  code: string;
+}
+
+const MermaidDiagram = ({ code }: Props) => {
+  const id = useId().replace(/:/g, '_');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<boolean>(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const renderDiagram = async () => {
+      try {
+        const mermaid = (await import('mermaid')).default;
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: 'strict',
+          theme: 'default',
+        });
+
+        const { svg } = await mermaid.render(`mermaid${id}`, code);
+
+        if (!cancelled && containerRef.current) {
+          containerRef.current.innerHTML = svg;
+        }
+      } catch {
+        if (!cancelled) {
+          setError(true);
+        }
+      }
+    };
+
+    renderDiagram();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [code, id]);
+
+  if (error) {
+    return (
+      <SyntaxHighlighter language="text" style={github}>
+        {code}
+      </SyntaxHighlighter>
+    );
+  }
+
+  return <div ref={containerRef} className={styles.mermaidDiagram} />;
+};
+
+export default memo(MermaidDiagram);

web/src/layout/package/readme/Readme.module.css

@@ -127,6 +127,18 @@
   width: 3px;
 }
 
+.mermaidDiagram {
+  display: flex;
+  justify-content: center;
+  overflow-x: auto;
+  padding: 16px 0;
+}
+
+.mermaidDiagram svg {
+  max-width: 100%;
+  height: auto;
+}
+
 @media only screen and (max-width: 575.98px) {
   .md code {
     font-size: 0.8rem;

web/src/layout/package/readme/Readme.tsx

@@ -25,6 +25,7 @@ import remarkGfm from 'remark-gfm';
 import useBreakpointDetect from '../../../hooks/useBreakpointDetect';
 import checkCodeLanguage from '../../../utils/checkCodeLanguage';
 import AnchorHeader from '../../common/AnchorHeader';
+import MermaidDiagram from './MermaidDiagram';
 import styles from './Readme.module.css';
 
 interface Props {
@@ -74,10 +75,16 @@ const Readme = (props: Props) => {
     }
 
     const match = /language-(\w+)/.exec(className || '');
+    const language = match ? match[1] : 'bash';
+    const codeContent = String(children).replace(/\n$/, '');
+
+    if (language === 'mermaid') {
+      return <MermaidDiagram code={codeContent} />;
+    }
 
     return (
-      <SyntaxHighlighter language={checkCodeLanguage(match ? match[1] : 'bash')} style={github}>
-        {String(children).replace(/\n$/, '')}
+      <SyntaxHighlighter language={checkCodeLanguage(language)} style={github}>
+        {codeContent}
       </SyntaxHighlighter>
     );
   };