Setting Mermaid.js layout

[indoyoon]

Hi, I would like to use "ELK" layout instead of default "dagre". So I changed the options.layout to "elk" but it is not working.
I can confirm other options like maxTextSize is working well.

themeConfig: {
    mermaid: {
      options: {
        layout: "elk",
      },
    },
}

[cookesan]

options.layout = "elk" is not enough by itself. ELK is an extra Mermaid layout package, not just a normal option like maxTextSize.

In the current Docusaurus Mermaid theme source, the theme checks whether @mermaid-js/layout-elk can be imported. If it is available, Docusaurus registers the ELK layout loaders on the client; if it is not installed, layout: "elk" has nothing extra to load.

So the missing piece should be:

npm install @mermaid-js/layout-elk

Then keep your Mermaid option:

themeConfig: {
  mermaid: {
    options: {
      layout: 'elk',
    },
  },
}

If you are on a Docusaurus version before that optional ELK registration landed, upgrade Docusaurus as well.