[Bug][Template] Possible conflict between mermaid2 plugin and integrated mermaid.js in mkdocs-materials

[Mara-Li]

Discussed in #125

^{Originally posted by h7b March 26, 2023}
Hi

Since v8.2, Material for MkDocs integrates with Mermaid.js natively ¹, I think we don't need to include the mermaid2 plugin.

When using both of them in the mkdocs.yml, i found that the diagram is not displayed correctly.

This is the mermaid code that I used

erDiagram
    BANKS ||--o{ PRODUCTS : has
    BANKS {
        int bank_id
        string bank_name
    }
    PRODUCTS {
        int product_id
        int loan_amount
        float interest_rate
        string accepted_risk_level
        int bank_id
        datetime created_date
    }
    CUSTOMERS ||--o{ LEADS : is
        CUSTOMERS {
        int customer_id
        string customer_name
        int customer_age
        string estimated_risk_level
        string source
        datetime created_date
    }
    PRODUCTS ||--o{ LEADS : applied_by
    LEADS {
        int customer_id
        int product_id
        datetime apply_date
    }

Here is the screencap of published page when both plugin mermaid2 and integrated mermaid.js were enabled

Next is the screencap of published page where the plugin mermaid2 is disabled

After re-verification, hope you have time to update the template

Thanks

Footnotes

1. https://squidfunk.github.io/mkdocs-material/reference/diagrams/ ↩

[Mara-Li]

To fix this on your own template :

• Update custom-fences as here
  Aka :

  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

• Remove mermaid2 in plugin (Enveloppe/template-overrides@682ebe7) (remove from line 91 to 94)
• Remove mermaid2 plugin from requirements.txt