Diagram is a promise. Use renderAsync.

This behavior looks to be only with timeline but with all of them. Other mermaid are working fine so far. It happens only on the first page load.

I tried with the mermaid documentation example as minimal case

```mermaid
timeline
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
\```

when I open the related techdoc page, I'm getting

Syntax error in graph
mermaid version 9.4.3

Error
Error

Message
Diagram is a promise. Use renderAsync.

Stack Trace
Error: Diagram is a promise. Use renderAsync.
    at Object.ob [as render] (https://backstage-staging.apps.okd.svc.elca.ch/static/module-mermaid.3419632c.js:1273:542)
    at p (https://backstage-staging.apps.okd.svc.elca.ch/static/vendor.5d20b969.js:5:34117)
    at https://backstage-staging.apps.okd.svc.elca.ch/static/vendor.5d20b969.js:5:34444
    at Array.forEach (<anonymous>)
    at https://backstage-staging.apps.okd.svc.elca.ch/static/vendor.5d20b969.js:5:34286
    at nf (https://backstage-staging.apps.okd.svc.elca.ch/static/module-react-dom.d69a898f.js:16:6504)
    at S.unstable_runWithPriority (https://backstage-staging.apps.okd.svc.elca.ch/static/vendor.5d20b969.js:172:3839)
    at Ze (https://backstage-staging.apps.okd.svc.elca.ch/static/module-react-dom.d69a898f.js:12:38411)
    at je (https://backstage-staging.apps.okd.svc.elca.ch/static/module-react-dom.d69a898f.js:16:5979)
    at https://backstage-staging.apps.okd.svc.elca.ch/static/module-react-dom.d69a898f.js:16:5893

then if I leave the page open for a while, another error pops out

Error
TypeError

Failed to execute 'containsNode' on 'Selection': parameter 1 is not of type 'Node'.

TypeError: Failed to execute 'containsNode' on 'Selection': parameter 1 is not of type 'Node'.
    at https://backstage-staging.apps.okd.svc.elca.ch/static/module-backstage.e2a190fd.js:59:1808
    at nf (https://backstage-staging.apps.okd.svc.elca.ch/static/module-react-dom.d69a898f.js:16:6504)
    at S.unstable_runWithPriority (https://backstage-staging.apps.okd.svc.elca.ch/static/vendor.5d20b969.js:172:3839)
    at Ze (https://backstage-staging.apps.okd.svc.elca.ch/static/module-react-dom.d69a898f.js:12:38411)
    at je (https://backstage-staging.apps.okd.svc.elca.ch/static/module-react-dom.d69a898f.js:16:5979)
    at https://backstage-staging.apps.okd.svc.elca.ch/static/module-react-dom.d69a898f.js:16:5893
    at D (https://backstage-staging.apps.okd.svc.elca.ch/static/vendor.5d20b969.js:172:2884)
    at A.port1.onmessage (https://backstage-staging.apps.okd.svc.elca.ch/static/vendor.5d20b969.js:172:1551)

now switching to another page and coming back, the timeline displays correctly. It's not following a documentation generation (like first call)

Reloading the browser trigger again the issue.

The behavior happens on dev environment (techoc generated using docker) and deployed on our OKD cluster (local generation and storage).

Versions:

Backstage 1.16.0
Mermaid 9.4.3
@backstage/plugin-techdocs-react@npm:1.1.8
backstage-plugin-techdocs-addon-mermaid@npm:0.8.0

MkDocs:

{...}
plugins:
  - techdocs-core

nav:
{...}

App.tsx / EntityPage.tsx

const techdocsContent = (
  <EntityTechdocsContent>
    <TechDocsAddons>
      <ReportIssue />
      <Mermaid darkConfig={{ theme: 'dark' }} lightConfig={{ theme: 'default' }} />
    </TechDocsAddons>
  </EntityTechdocsContent>
);

Thanks for having a look!

johanneswuerbach / backstage-plugin-techdocs-addon-mermaid

Diagram is a promise. Use renderAsync. #35