[Bug] Mermaid Entity Relationship Diagram (ERD) failing to render in HTML output

[zi-ang-liu]

Bug description

Description: When using a Mermaid block to create an Entity Relationship Diagram, the rendered HTML does not display the diagram correctly.

Steps to reproduce

The following is the example in mermaid website.

---
title: Order example
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Actual behavior

Expected behavior

The example in mermaid.
https://mermaid.ai/open-source/syntax/entityRelationshipDiagram.html

Your environment

• IDE: VS Code
• OS: Mac OS

[cscheid]

It looks like the ERD code from mermaid assumes an opaque background instead of using clipping, and we use semi-transparent backgrounds. This is going to be pretty hard for us to solve in general, but you can work around the problem by defining your own colors. This isn't as well documented in Quarto as it deserves to be, but there are CSS variables you can target here. Let me know if this enough to get you pointed in the right direction or if you need more help!

[mcanouil]

The simplest workaround is to not use JavaScript to render the mermaid diagram, but use png or svg as format with mermaid-format: ...

[zi-ang-liu]

Thanks for the quick response. I set the Mermaid output format to PNG/SVG, and it’s working well now.