Skip to content

Comments

Fix Mermaid diagram rendering with SVG foreignObject support#26

Merged
alecdotdev merged 2 commits intoalecdotdev:masterfrom
sam-ent:feature/mermaid-diagrams
Feb 4, 2026
Merged

Fix Mermaid diagram rendering with SVG foreignObject support#26
alecdotdev merged 2 commits intoalecdotdev:masterfrom
sam-ent:feature/mermaid-diagrams

Conversation

@sam-ent
Copy link
Contributor

@sam-ent sam-ent commented Feb 4, 2026

Fixes rendering of Mermaid diagrams by allowing SVG foreignObject elements and implementing theme-aware dark mode support.

Changes:

  • Allow foreignObject element in DOMPurify for text labels
  • Implement system dark mode detection for Mermaid theme
  • Add responsive CSS styling for diagram containers
  • Add DOMPurify sanitization for all rendered HTML content

Testing:

  • npm run check (passed - 0 errors, 5 pre-existing warnings)
  • npm run build (passed successfully)
  • Manual verification pending with test files
  • Responsive design to be tested on mobile
  • No console errors or warnings expected

Dependencies added:

  • dompurify ^3.3.1
  • @types/dompurify ^3.0.5
  • mermaid ^11.12.2

sam-ent and others added 2 commits February 4, 2026 01:12
- Allow foreignObject element in DOMPurify for text labels
- Implement system dark mode detection for Mermaid theme
- Add responsive CSS styling for diagram containers
- Improves accessibility and visual rendering of complex diagrams
@alecdotdev alecdotdev merged commit 0774f62 into alecdotdev:master Feb 4, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants