feat: support esm

[thepassle]

:bookmark_tabs: Summary

This change allows mermaid to be imported (import mermaid from 'mermaid') as native esm in the browser without requiring any buildtools/buildstep/transpilation/commonjs magic

Resolves https://github.com/mermaid-js/mermaid/issues/5584 https://github.com/mermaid-js/mermaid/issues/4320

:straight_ruler: Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

:clipboard: Tasks

Make sure you

• [x] :book: have read the contribution guidelines
• [x] :computer: have added necessary unit/e2e tests.
• [x] :notebook: have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• [x] :bookmark: targeted develop branch

[netlify[bot]]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	01b7dd6e98a5054fa19bfce89b4e6aa15edb6495
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6674250b4fdaf5000707f3fc
😎 Deploy Preview	https://deploy-preview-5585--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 26.66667% with 11 lines in your changes missing coverage. Please review.

Project coverage is 5.73%. Comparing base (fe9fbd8) to head (01b7dd6).

Additional details and impacted files

[](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) ```diff @@ Coverage Diff @@ ## develop #5585 +/- ## ======================================= Coverage 5.73% 5.73% ======================================= Files 278 277 -1 Lines 41999 41988 -11 Branches 490 515 +25 ======================================= Hits 2409 2409 + Misses 39590 39579 -11 ``` | [Flag](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [unit](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `5.73% <26.66%> (+<0.01%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#carryforward-flags-in-the-pull-request-comment) to find out more. | [Files](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [packages/mermaid/src/logger.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Flogger.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvbG9nZ2VyLnRz) | `44.44% <100.00%> (ø)` | | | [packages/mermaid/src/diagrams/gantt/ganttDb.js](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdiagrams%2Fgantt%2FganttDb.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZGlhZ3JhbXMvZ2FudHQvZ2FudHREYi5qcw==) | `77.47% <66.66%> (ø)` | | | [...ckages/mermaid/src/diagrams/gantt/ganttRenderer.js](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdiagrams%2Fgantt%2FganttRenderer.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZGlhZ3JhbXMvZ2FudHQvZ2FudHRSZW5kZXJlci5qcw==) | `0.00% <0.00%> (ø)` | | | [packages/mermaid/src/utils.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Futils.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvdXRpbHMudHM=) | `41.60% <50.00%> (ø)` | | | [packages/mermaid/src/diagrams/c4/svgDraw.js](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdiagrams%2Fc4%2FsvgDraw.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZGlhZ3JhbXMvYzQvc3ZnRHJhdy5qcw==) | `0.00% <0.00%> (ø)` | | | [...kages/mermaid/src/diagrams/common/svgDrawCommon.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdiagrams%2Fcommon%2FsvgDrawCommon.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZGlhZ3JhbXMvY29tbW9uL3N2Z0RyYXdDb21tb24udHM=) | `0.00% <0.00%> (ø)` | | | [packages/mermaid/src/diagrams/sequence/svgDraw.js](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdiagrams%2Fsequence%2FsvgDraw.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZGlhZ3JhbXMvc2VxdWVuY2Uvc3ZnRHJhdy5qcw==) | `0.00% <0.00%> (ø)` | | ... and [1 file with indirect coverage changes](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5585/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js)

[sidharthv96]

The dayjs issue is a blocker. Converting to draft.