🤖 Prevent mermaid 'Syntax error in text' DOM pollution #425
Conversation
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
Add multi-layered error handling to prevent mermaid from injecting error messages into the DOM when diagram syntax is invalid. - Parse diagrams before rendering to catch syntax errors early - Clean up any error DOM elements mermaid creates (by ID and query) - Clear container innerHTML on error to prevent stale content - Add CSS safety net to hide any error messages that slip through - Add cleanup on component unmount to prevent memory leaks This fixes the known mermaid.js issue where error SVG nodes are inserted directly into the DOM tree during render failures. Generated with `cmux`
Add missing parse() method to mermaidStub and configure Storybook to use the stub to avoid mermaid initialization issues. The previous PR added a call to mermaid.parse() before rendering, but the mock stub didn't implement this method, causing Storybook to fail when rendering mermaid diagrams. Changes: - Add parse() method to mermaidStub.ts that returns resolved Promise - Configure Storybook to use mermaid stub via alias in main.ts - Ensures mermaid diagrams render correctly in Storybook stories Generated with `cmux`
Remove mermaid stub alias so diagrams render with actual mermaid.js. This allows visual verification of the error handling fixes. The stub is still updated with parse() method for test environments that use VITE_DISABLE_MERMAID=1. Generated with `cmux`
The CSS rule [id^="d"][id*="mermaid"] was too broad and hid actual diagrams, not just error messages. The JavaScript cleanup that searched for error messages by selector was also unnecessary. Simplified approach: - Removed CSS rule that hid all mermaid-related elements - Only clean up the specific element with our generated ID - Let mermaid render naturally and show errors via React state This allows diagrams to display in Storybook while still handling errors gracefully through the error state UI. Generated with `cmux`
ammario
approved these changes
Oct 27, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Fixes the issue where mermaid.js injects giant 'Syntax error in text' messages into the DOM when diagram syntax is invalid.
Problem
Mermaid has a known issue (mermaid-js/mermaid#4358) where it inserts error SVG nodes directly into the DOM tree when
mermaid.render()fails. This breaks React applications by polluting the page with visible error messages.Solution
Multi-layered defense:
mermaid.parse()beforemermaid.render()to catch syntax errors without DOM manipulationdisplay: none !importantDuring streaming, shows "Rendering diagram..." placeholder instead of errors. After streaming completes, displays a styled error message in a pink box.
Testing
Generated with
cmux