Skip to content

Mermaid diagrams broken due to DOMPurify release v3.1.7 (empty <foreignObject) #5904

Closed
@slorber

Description

@slorber

Description

Upgrade transitive dependency DOMPurify from 3.1.6 to 3.1.7

See flowchart diagram labels being empty, because <foreignObject> tags are empty

Steps to reproduce

Upgrade transitive dependency DOMPurify from 3.1.6 to 3.1.7

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
``` 

Screenshots

image

Code Sample

No response

Setup

  • Mermaid version: 10.x, 11.x
  • Browser and Version: all

Suggested Solutions

Convince DOMPurify to revert breaking change.

DOMPurify report here: cure53/DOMPurify#1002

Workaround, force resolution to v3.1.6

 "resolutions": {
    "dompurify": "3.1.6"
  },

Additional Context

I'm the maintainer of Docusaurus and this issue affects all our newly initialized sites. The problematic version was published 1 day ago and we already got 2 bug reports that Mermaid diagrams do not work well.

I'm opening this issue mostly to let you know of the problem.

I don't really know how Mermaid uses that lib exactly, nor if it's possible for you to patch usage on your side to make Mermaid code compatible with v3.1.7+. You could also decide to pin the dependency.

Personally I consider it a breaking change and they should rather revert it, but it's their responsibility to decide.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: Bug / ErrorSomething isn't working or is incorrect

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions