adding mermaid block

[nc-andreashaller]

Adding a block to render Mermaid diagrams

Test URLs:

• Before: https://main--raqn-docs-git--henkel.aem.live/henkeldx/iPaaS/control-center-2/publish-md/docs/diagrams/checkout
• After: https://mermaid--raqn-docs-git--henkel.aem.live/henkeldx/iPaaS/control-center-2/publish-md/docs/diagrams/checkout

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 733eebf ✅ (latest)

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/henkeldx/iPaaS/control-center-2/publish-md/docs/diagrams/checkout
🖥️	/henkeldx/iPaaS/control-center-2/publish-md/docs/diagrams/checkout

[infloent]

It seems the preview links are not working anymore. I get 404.
Not sure how many layout shifts Mermaid will create but maybe we can improve this by making ready() async and waiting for mermaid.run() now our component will be made visible only after Mermaid is initialized.

async ready() { 
    const code = this.querySelector('code');
    if(!code) {
      throw new Error('Cannot initialize mermaid without code content.');
    }
    code.textContent = code.textContent.replace(/:\n/g, ': \n');
    await mermaid.run({ nodes: [code] });
  }

[nc-andreashaller]

The links work again, change some configs yesterday and forgot to switch the back. I tried this but unfortunately then we seem to have a race condition as sometimes mermaid fails to initialise then with parsing Error: svg element not in render tree. I think for now the performance drop is fine, we can still improve things later.