feat: support Mermaid rendering in wiki pages

[adamwu7]

What changed

• Render mermaid fenced code blocks as Mermaid diagram containers in public wiki page HTML.
• Lazily load a local Mermaid browser bundle from wiki/public/js/vendor/mermaid/ through a shared public/editor loader.
• Re-run Mermaid rendering after sidebar SPA navigation replaces page content.
• Add a TipTap Mermaid block so editing pages can insert and preview Mermaid diagrams while preserving standard fenced Markdown.
• Add Markdown renderer and editor Markdown round-trip tests for Mermaid blocks.

Why

Wiki pages currently show Mermaid diagrams as plain code blocks instead of rendering them as diagrams. This adds Mermaid rendering and editing support as a feature enhancement for documentation pages that need flowcharts, sequence diagrams, and other diagram types.

Validation

• python -m unittest wiki.wiki.test_markdown
• node --check wiki/public/js/mermaid-loader.js && node --check wiki/public/js/mermaid-renderer.js
• node --test frontend/src/components/tiptap-extensions/mermaid-block.test.js
• npx biome check frontend/src/components/tiptap-extensions/mermaid-loader.js frontend/src/components/tiptap-extensions/mermaid-block.js frontend/src/components/tiptap-extensions/mermaid-markdown.js frontend/src/components/tiptap-extensions/mermaid-block.test.js frontend/src/components/tiptap-extensions/slash-commands.js frontend/src/components/tiptap-extensions/index.js
• yarn build

[NagariaHussain]

Hi can you please add a demo video?

[adamwu7]

Hi can you please add a demo video?

mermaid-demo.mp4

[NagariaHussain]

How does it work from the Wiki frontend? The editing experience. Not from the desk.

[adamwu7]

How does it work from the Wiki frontend? The editing experience. Not from the desk.

Thanks for pointing that out. I’ve added Mermaid support to the Wiki frontend editor as well, not just the public rendering path or Desk-side flow. The Wiki frontend editing experience now supports Mermaid blocks through the slash command menu. Users can insert a Mermaid diagram, edit the Mermaid source in the editor, preview the rendered diagram inline, and save it back as standard fenced Markdown (```mermaid), so the public page rendering continues to use the same Markdown format.

I also updated the implementation so the public page renderer and the Wiki frontend editor preview share the same local Mermaid loader/bundle.

I’ve pushed the updates and re-recorded the demo video to show the Wiki frontend editing flow.

mermaid-edit-demo.mp4