Replace Beautiful Mermaid with Mermaider for server-side diagram rendering#2838
Open
theletterf wants to merge 10 commits into
Open
Replace Beautiful Mermaid with Mermaider for server-side diagram rendering#2838theletterf wants to merge 10 commits into
theletterf wants to merge 10 commits into
Conversation
…ering Move Mermaid diagram rendering from client-side JavaScript (beautiful-mermaid npm package) to server-side C# (Mermaider NuGet package), producing inline SVGs at build time instead of shipping a JS runtime to the browser. - Add Mermaider 0.5.0 NuGet package to Elastic.Markdown - Replace RenderMermaidBlock() to call MermaidRenderer.RenderSvg() with strict mode and SVG sanitization - Emit inline SVG wrapped in mermaid-container/viewport/rendered divs - Graceful fallback with build warning on parse failures - Simplify mermaid.ts to only handle zoom/pan/fullscreen controls for pre-rendered SVGs (remove all beautiful-mermaid integration) - Remove @theletterf/beautiful-mermaid npm dependency and copy script - Update test assertions for inline SVG output Co-authored-by: Claude <noreply@anthropic.com> Made-with: Cursor
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
Co-authored-by: Claude <noreply@anthropic.com> Made-with: Cursor
Keep the Mermaider branch current with main, address review feedback in the renderer, and sanitize rendered SVG without rejecting supported styled diagrams. Co-authored-by: GPT-5.5 <noreply@openai.com> Made-with: Cursor
theletterf
temporarily deployed
to
integration-tests
GitHub Actions
Inactive
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs`:
- Around line 315-319: MermaidRenderOptions currently only sets Bg and Fg;
explicitly enable strict mode by setting RenderOptions.Strict = true on the same
static object (MermaidRenderOptions) so Mermaider rejects classDef/style
directives; update the MermaidRenderOptions initializer to include Strict = true
to enforce directive validation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Enterprise
Run ID: 6c27367c-d811-4893-b021-d7f8c7aa7738
⛔ Files ignored due to path filters (1)
src/Elastic.Documentation.Site/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (7)
Directory.Packages.propssrc/Elastic.Documentation.Site/Assets/markdown/mermaid.csssrc/Elastic.Documentation.Site/Assets/mermaid.tssrc/Elastic.Documentation.Site/package.jsonsrc/Elastic.Markdown/Elastic.Markdown.csprojsrc/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cstests/Elastic.Markdown.Tests/Directives/MermaidTests.cs
Satisfy the C# formatter after restoring the Mermaid test changes on the updated branch. Co-authored-by: GPT-5.5 <noreply@openai.com> Made-with: Cursor
theletterf
had a problem deploying
to
integration-tests
GitHub Actions
Error
Clarify why Mermaider strict mode stays disabled while SVG sanitization remains enabled for existing styled diagrams. Co-authored-by: GPT-5.5 <noreply@openai.com> Made-with: Cursor
theletterf
temporarily deployed
to
integration-tests
GitHub Actions
Inactive
theletterf
temporarily deployed
to
integration-tests
GitHub Actions
Inactive
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Enterprise Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR migrates Mermaid diagram rendering from client-side Beautiful Mermaid to server-side rendering via Mermaider (version 0.8.0). It adds Mermaider package references, updates EnhancedCodeBlockHtmlRenderer to emit sanitized inline SVG or a styled error fallback, removes client-side rendering/post-processing and reduces initMermaid to interactivity wiring, updates package.json build scripts, and changes tests to assert div.mermaid-container and inline SVG output. Sequence Diagram(s)sequenceDiagram
participant Renderer as EnhancedCodeBlockHtmlRenderer
participant Mermaider
participant Sanitizer as SvgSanitizer
participant Output as HTML Output
Renderer->>Renderer: ExtractMermaidText (dedent)
Renderer->>Mermaider: RenderSvg(MermaidRenderOptions, mermaidText)
alt Render success
Mermaider->>Sanitizer: raw SVG
Sanitizer->>Output: sanitized SVG wrapped in div.mermaid-container
else Render failure
Renderer->>Output: pre.mermaid-error with escaped mermaid text
end
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches✨ Simplify code
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Member
Author
|
@Mpdreamz I think we're ready to do this. Made numerous updates to Mermaider :) |
Member
|
@copilot resolve the merge conflicts in this pull request |
Contributor
Member
|
@theletterf https://www.nuget.org/packages/mermaider#readme-body-tab 0.8.0 is now released! |
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Member
Author
|
Done, bumped to 0.8.0 in . |
theletterf
had a problem deploying
to
integration-tests
GitHub Actions
Error
theletterf
temporarily deployed
to
integration-tests
GitHub Actions
Inactive
Member
Author
|
@Mpdreamz Ready! |
3 tasks
Mpdreamz
approved these changes
Jun 10, 2026
Member
|
@copilot resolve the merge conflicts in this pull request |
Contributor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@theletterf/beautiful-mermaidnpm package) to server-side C# (Mermaider NuGet package), producing inline SVGs at build time instead of shipping a JS runtime to the browser.classDef/styledirectives) and SVG sanitization (strips XSS vectors), matching the security posture of the existing setup.mermaid.tsclient code is simplified to only attach interactive controls (zoom, pan, fullscreen) to pre-rendered SVG containers — no more lazy-loading a JS rendering library.Made with Cursor