Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Mermaid uses ELK for alternative layouts, but entering the configuration for elk layouts in docusaurus mermaid blocks does not change the layout.

Reproducible demo

No response

Steps to reproduce

1. Clone the docusaurus repo
2. Create 2 mermaid diagrams, for example the following ER Diagrams. One has the config block with elk layout.

```mermaid
erDiagram

  COMPANY ||--o{ DEPARTMENT : has
  COMPANY ||--o{ PROJECT : undertakes
  COMPANY ||--o{ LOCATION : operates_in
  COMPANY ||--o{ CLIENT : serves

  DEPARTMENT ||--o{ EMPLOYEE : employs
  DEPARTMENT ||--o{ PROJECT : manages
  DEPARTMENT ||--o{ BUDGET : allocated

  EMPLOYEE }o--o{ PROJECT : works_on
  EMPLOYEE ||--|| ADDRESS : lives_at
  EMPLOYEE }o--o{ SKILL : has
  EMPLOYEE ||--o{ DEPENDENT : supports

  PROJECT ||--o{ CLIENT : for
  PROJECT ||--o{ TASK : contains
```

```mermaid
---
config:
  layout: elk
---
erDiagram
  COMPANY ||--o{ DEPARTMENT : has
  COMPANY ||--o{ PROJECT : undertakes
  COMPANY ||--o{ LOCATION : operates_in
  COMPANY ||--o{ CLIENT : serves

  DEPARTMENT ||--o{ EMPLOYEE : employs
  DEPARTMENT ||--o{ PROJECT : manages
  DEPARTMENT ||--o{ BUDGET : allocated

  EMPLOYEE }o--o{ PROJECT : works_on
  EMPLOYEE ||--|| ADDRESS : lives_at
  EMPLOYEE }o--o{ SKILL : has
  EMPLOYEE ||--o{ DEPENDENT : supports

  PROJECT ||--o{ CLIENT : for
  PROJECT ||--o{ TASK : contains
```

4. Start the server (yarn install & yarn start)
5. The diagrams are the same, ELK layout engine is ignored.

Expected behavior

On the official mermaid.live editor, we can see the expected behavior:

• Without ELK (using the default Dagre layout engine)

• With ELK layout engine

Actual behavior

On Daucusaurus, the diagrams are the same. ELK layout config is ignored.

There is a package that web pages frameworks (e.g. Docusaurus) using mermaid should use, as stated in the official Mermaid github page.
Docusaurus is actually missing this import. Therefore, Memaid does not take ELK layout config into account.

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.