Replace `dagre`/`dagre-d3` with `dagre-d3-es` #3809

aloisklink · 2022-11-18T02:17:14Z

📑 Summary

Replace the dagre and dagre-d3 libraries with dagre-d3-es.

Both dagre and dagre-d3 are deprecated and unmaintained, and haven't been updated for more than 3 years.

Since dagre-d3 still requires an old version of d3, this causes a bunch of security warnings, e.g. GHSA-36jr-mh4h-2g58

The dagre-d3-es package is a fork that contains support for "d3": "^7.6.1". Also, it's ESM, so we will get smaller bundle sizes too (mermaid.esm.min.mjs seems to be about 180 KB smaller!)

The only issue is that this fork isn't very well used (only has 3000 weekly downloads), compared to dagre-d3's 250,000 weekly downloads (although to be fair, a large proportion of dagre-d3's downloads probably come from mermaid).

Resolves #3712
Resolves #3705 (there might be other issues, but pnpm audit now says No known vulnerabilities found)
Resolves #3666
Resolves #2626

📏 Design Decisions

The mindmap e2e tests were being a bit flaky.

Sometimes, the mindmap e2e tests take a snapshot when the mindmap SVG has been created, but hasn't yet been fully rendered. E.g., the <svg ....> exits, but is empty.

I've added a quick check for a mindmap section root, so that the snapshot is only taken after the mindmap diagram has started rendering, and it seems like nothing has changed in the e2e tests.

I also added a demos/mindmap.html example, since I needed it anyway to help write the Cypress E2E tests.

Since it's is a less popular package, I've pinned dagre-d3-es to "7.0.2" instead of "^7.0.2". This does mean if there is a bug in dagre-d3-es, we will have to manually bump it ourselves, but it also means we won't accidentally be sending a buggy version of dagre-d3-es out to users in cases something changes (it might be worth disabling renovate for this if we're feeling paranoid!)

In the long-term, we should slowly move towards removing dagre if we can, see #1969.

📋 Tasks

Make sure you

📖 have read the contribution guidelines
💻 have added unit/e2e tests (if appropriate)
🔖 targeted develop branch

sidharthv96

The ~200KB decrease in size is phenomenal!!

sidharthv96 · 2022-11-18T03:51:34Z

packages/mermaid/src/diagrams/flowchart/flowRenderer.js

-import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
+import { render as Render } from 'dagre-d3-es';
+import { applyStyle } from 'dagre-d3-es/src/dagre-js/util';
+import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';


Is the .js extension necessary?

It is normally required in the browser/Node.JS, see https://nodejs.org/api/esm.html#mandatory-file-extensions, but it looks like Vite is allowing it.

My gut feeling is to add the .js extension to everything except for things exported directly by the package.json. I've changed this in fd76e0e (I've git rebase-d my commits).

We could also try to add https://nodejs.org/api/packages.html#subpath-patterns to dagre-d3-es, so that we could do stuff like import {applyStyle} from 'dagre-d3-es/dagre-d3/util.js (e.g. without the /src/ bit) instead, but even then, the Node.JS docs seem to recommend only exporting paths that end with .js if possible.

demos/mindmap.html

cypress/integration/rendering/mindmap.spec.js

Currently, we have mindmap tests in the cypress/integration/rendering/mermaid.spec.js which is a bit odd. They should probably all be in the mindmap.spec.js file.

All tests have been moved to `mindmap.spec.js` in a previous commit.

Sometimes, the mindmap e2e tests take a snapshot when the mindmap SVG has been created, but hasn't yet been fully rendered. This adds a quick check for a mindmap section root, so that the snapshot is only taken after the mindmap diagram has started rendering. I was also running into JSDoc ESLint warnings, so I moved the file into a TypeScript file to fix those warnings.

Replace the dagre and dagre-d3 libraries with dagre-d3-es. Both dagre and dagre-d3 are deprecated and unmaintained, and haven't been updated for more than 3 years. Since dagre-d3 still requires an old version of d3, this causes a bunch of security warnings, e.g. GHSA-36jr-mh4h-2g58 The [dagre-d3-es](https://github.com/tbo47/dagre-es) package is a fork that contains support for `"d3": "^7.6.1"`. Also, it's ESM, so we will hopefully get smaller bundle sizes too. The only issue is that this fork isn't very well used (only has 3000 weekly downloads), compared to `dagre-d3`'s 250,000 weekly downloads. (although to be fair, a large proportion of dagre-d3's downloads probably come from mermaid) Since it's is a less popular package, **I've pinned `dagre-d3-es` to `"7.0.2"` instead of `"^7.0.2"`**. This does mean if there is a bug in `dagre-d3-es`, we will have to manually bump it ourselves, but it also means we won't accidentally be sending a buggy version of `dagre-d3-es` out to users in cases something changes (it might be worth disabling renovate for this if we're feeling paranoid!)

aloisklink · 2022-11-18T18:54:56Z

The ~200KB decrease in size is phenomenal!!

I think we can go further actually :)

dagre-d3-es has it's own version of graphlib in it, see https://github.com/tbo47/dagre-es/tree/main/src/graphlib. And graphlib is like a 500 KiB library, so using an ESM version might greatly decrease our bundle size. I didn't put it into this PR, since it looks like graphlib still has some activity (even if there hasn't been an NPM release for 3 years +), but it could be a future PR.

We could also try swapping out lodash for lodash-es and see if that decreases bundle size.

sidharthv96 · 2022-11-19T17:31:07Z

I was experimenting with that yesterday, analyzing our bundle size. Already replaced lodash and it did make a difference. I've also split out our internal diagrams from the bundle.

weedySeaDragon · 2022-11-19T18:06:24Z

@sidharthv96 - what tool(s) did you use to generate the bundle size info? ( == my lack of experience with dealing with js toolchain)

aloisklink · 2022-11-19T18:28:15Z

I've also split out our internal diagrams from the bundle.

I think we should keep all the internal diagrams in a single bundle, mainly for backwards compatibility.

In the mermaid-cli project, we used to just copy the mermaid.min.js file and use that (it's part of the reason why we had so much trouble switching to using mindmaps). A lot of other projects seem to do the same thing, they just copy the bundle over into their static website.

To be honest, we don't really save much by moving it into separate bundles anyway, because all of the internal diagrams are always imported anyway by default (unless we enable lazy loading for all of them too).

E.g.

IFFE single file, no other dependencies (not even the ones in node_modules): mermaid.min.js
ESM single file, no other dependencies (not even the ones in node_modules): mermaid.esm.min.mjs
ESM import (listed in package.json): can be anything, because this assumes that a downstream project (Webpack/Vite/TypeScript/ESBuild/rollup) will bundle Mermaid into somebody else's app/website
CommonJS require (listed in package.json): just points to mermaid.min.js, because we have to bundle ESM dependencies for them to work in CommonJS. Only here for backwards compatibility.

sidharthv96 · 2022-11-20T05:35:40Z

To be honest, we don't really save much by moving it into separate bundles anyway, because all of the internal diagrams are always imported anyway by default (unless we enable lazy loading for all of them too).

I did enable lazy loading for them. There are some kinks to iron out, but there is a performance difference.
If we bundle all the detectors, then the request count and loading time will come down further.

Good 3G

mermaid.min.js

Unbundled

4G

mermaid.min.js

Unbundled

WiFi

mermaid.min.js

Unbundled

After moving styles out,

sidharthv96 · 2022-11-20T05:37:35Z

@sidharthv96 - what tool(s) did you use to generate the bundle size info? ( == my lack of experience with dealing with js toolchain)

@weedySeaDragon I used https://github.com/btd/rollup-plugin-visualizer. Which has very nice diagrams.
The network diagram is a bit too messy, though.

Image from their readme.

aloisklink · 2022-11-20T16:19:02Z

I did enable lazy loading for them. There are some kinks to iron out, but there is a performance difference.
If we bundle all the detectors, then the request count and loading time will come down further.

🚀 Those size/speed differences look pretty good!

I still think that the bundles the Mermaid project provides shouldn't change (at least unless it's announced as a breaking change in a v10), but enabling lazy loading for all the diagrams does make sense, since then people using mermaid with their own bundlers will get the performance benefits!

tbo47 · 2022-11-20T19:04:01Z

I just released dagre-d3-es v7.0.4: https://www.npmjs.com/package/dagre-d3-es

It includes the modification with intersect (that you are not using) and the loadash optimization
https://github.com/tbo47/dagre-es/pulls?q=is%3Apr+is%3Aclosed

[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [mermaid](https://togithub.com/mermaid-js/mermaid) | [`9.2.2` -> `9.3.0`](https://renovatebot.com/diffs/npm/mermaid/9.2.2/9.3.0) | [![age](https://badges.renovateapi.com/packages/npm/mermaid/9.3.0/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/mermaid/9.3.0/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/mermaid/9.3.0/compatibility-slim/9.2.2)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/mermaid/9.3.0/confidence-slim/9.2.2)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>mermaid-js/mermaid</summary> ### [`v9.3.0`](https://togithub.com/mermaid-js/mermaid/releases/tag/v9.3.0) [Compare Source](https://togithub.com/mermaid-js/mermaid/compare/v9.2.2...v9.3.0) ### Significant Changes - 25% Smaller - New docs - Replaces the deprecated and vulnerable `dagre-d3` with `dagre-es` ### Release Notes - [#3778](https://togithub.com/mermaid-js/mermaid/issues/3778) Adding a hexgon shape ([#3834](https://togithub.com/mermaid-js/mermaid/issues/3834)) [@knsv](https://togithub.com/knsv) - [#3831](https://togithub.com/mermaid-js/mermaid/issues/3831) Re-enabling themes for er diagrams ([#3837](https://togithub.com/mermaid-js/mermaid/issues/3837)) [@knsv](https://togithub.com/knsv) - [#3882](https://togithub.com/mermaid-js/mermaid/issues/3882) fix for issues with mindmaps with only a single node ([#3833](https://togithub.com/mermaid-js/mermaid/issues/3833)) [@knsv](https://togithub.com/knsv) - (chore) remove console stmt in pieDetector ([#3840](https://togithub.com/mermaid-js/mermaid/issues/3840)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - (feat) state classDef documentation ([#3841](https://togithub.com/mermaid-js/mermaid/issues/3841)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - 3882 edge labels ([#3883](https://togithub.com/mermaid-js/mermaid/issues/3883)) [@knsv](https://togithub.com/knsv) - Add GHA that will check links + Fix broken links ([#3765](https://togithub.com/mermaid-js/mermaid/issues/3765)) [@spier](https://togithub.com/spier) - Add official vim plugin to list in integrations ([#3847](https://togithub.com/mermaid-js/mermaid/issues/3847)) [@craigmac](https://togithub.com/craigmac) - Add package visualizations ([#3823](https://togithub.com/mermaid-js/mermaid/issues/3823)) [@sidharthv96](https://togithub.com/sidharthv96) - Add support for [@include](https://togithub.com/include) in docs ([#3863](https://togithub.com/mermaid-js/mermaid/issues/3863)) [@sidharthv96](https://togithub.com/sidharthv96) - CI: disable pinning dependencies ([#3735](https://togithub.com/mermaid-js/mermaid/issues/3735)) [@aloisklink](https://togithub.com/aloisklink) - Defects/issue 3878 ([#3880](https://togithub.com/mermaid-js/mermaid/issues/3880)) [@MrCoder](https://togithub.com/MrCoder) - Feat: Add aria-describedby, aria-roledescription ([#3808](https://togithub.com/mermaid-js/mermaid/issues/3808)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - Fix [#3799](https://togithub.com/mermaid-js/mermaid/issues/3799): Remove `type` from package.json ([#3802](https://togithub.com/mermaid-js/mermaid/issues/3802)) [@sidharthv96](https://togithub.com/sidharthv96) - Fix for [#3835](https://togithub.com/mermaid-js/mermaid/issues/3835), makes it possible to style path elements ([#3836](https://togithub.com/mermaid-js/mermaid/issues/3836)) [@knsv](https://togithub.com/knsv) - Fix typos ([#3820](https://togithub.com/mermaid-js/mermaid/issues/3820)) [@endolith](https://togithub.com/endolith) - Housekeeping with eslint-unicorn ([#3845](https://togithub.com/mermaid-js/mermaid/issues/3845)) [@sidharthv96](https://togithub.com/sidharthv96) - Integrations added - Visual Studio Code \[Polyglot Interactive Notebooks] ([#3821](https://togithub.com/mermaid-js/mermaid/issues/3821)) [@dfinke](https://togithub.com/dfinke) - Mindmap integration docs ([#3810](https://togithub.com/mermaid-js/mermaid/issues/3810)) [@sidharthv96](https://togithub.com/sidharthv96) - Reduce mermaid size by 31% ([#3825](https://togithub.com/mermaid-js/mermaid/issues/3825)) [@sidharthv96](https://togithub.com/sidharthv96) - Remove extra arrow and adjust cross position ([#3641](https://togithub.com/mermaid-js/mermaid/issues/3641)) [@ishuen](https://togithub.com/ishuen) - Replace `dagre`/`dagre-d3` with `dagre-d3-es` ([#3809](https://togithub.com/mermaid-js/mermaid/issues/3809)) [@aloisklink](https://togithub.com/aloisklink) - Revert "Added pie" ([#3842](https://togithub.com/mermaid-js/mermaid/issues/3842)) [@pbrolin47](https://togithub.com/pbrolin47) - Switch CDN to unpkg.com ([#3777](https://togithub.com/mermaid-js/mermaid/issues/3777)) [@sidharthv96](https://togithub.com/sidharthv96) - Switch back to jsdelivr ([#3873](https://togithub.com/mermaid-js/mermaid/issues/3873)) [@sidharthv96](https://togithub.com/sidharthv96) - Use `github-dark` to highlight fence blocks in vitepress docs ([#3807](https://togithub.com/mermaid-js/mermaid/issues/3807)) [@aloisklink](https://togithub.com/aloisklink) - Use current mermaid version in docs. ([#3846](https://togithub.com/mermaid-js/mermaid/issues/3846)) [@sidharthv96](https://togithub.com/sidharthv96) - Use stylis to prepend idSelector ([#3829](https://togithub.com/mermaid-js/mermaid/issues/3829)) [@DanInProgress](https://togithub.com/DanInProgress) - bug: State diagram fix classes type ([#3798](https://togithub.com/mermaid-js/mermaid/issues/3798)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - bug: change shiki getHighlighter import ([#3804](https://togithub.com/mermaid-js/mermaid/issues/3804)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - chore(deps): remove dependency on `graphlib` ([#3861](https://togithub.com/mermaid-js/mermaid/issues/3861)) [@aloisklink](https://togithub.com/aloisklink) - chore(deps): update all non-major dependencies (minor) ([#3905](https://togithub.com/mermaid-js/mermaid/issues/3905)) [@renovate](https://togithub.com/renovate) - chore(deps): update all non-major dependencies (minor) ([#3791](https://togithub.com/mermaid-js/mermaid/issues/3791)) [@renovate](https://togithub.com/renovate) - chore(deps): update lycheeverse/lychee-action action to v1.5.4 ([#3827](https://togithub.com/mermaid-js/mermaid/issues/3827)) [@renovate](https://togithub.com/renovate) - chore(deps): update pnpm to v7.17.0 ([#3828](https://togithub.com/mermaid-js/mermaid/issues/3828)) [@renovate](https://togithub.com/renovate) - chore(deps): update pnpm to v7.17.1 ([#3862](https://togithub.com/mermaid-js/mermaid/issues/3862)) [@renovate](https://togithub.com/renovate) - chore(docs): Auto build docs ([#3547](https://togithub.com/mermaid-js/mermaid/issues/3547)) [@sidharthv96](https://togithub.com/sidharthv96) - chore: Housekeeping ([#3783](https://togithub.com/mermaid-js/mermaid/issues/3783)) [@sidharthv96](https://togithub.com/sidharthv96) - chore: Merge master to develop ([#3780](https://togithub.com/mermaid-js/mermaid/issues/3780)) [@sidharthv96](https://togithub.com/sidharthv96) - chore: clean up code in mermaidAPI render() and write specs/tests ([#3684](https://togithub.com/mermaid-js/mermaid/issues/3684)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - chore: delete functions not used in diagrams/c4 code (dead code) ([#3871](https://togithub.com/mermaid-js/mermaid/issues/3871)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - comments in states are skipped now ([#3762](https://togithub.com/mermaid-js/mermaid/issues/3762)) [@avijit1258](https://togithub.com/avijit1258) - doc: remove links from atom.io; add note Atom has been archived ([#3899](https://togithub.com/mermaid-js/mermaid/issues/3899)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - docs: refactor Theming doc ([#3889](https://togithub.com/mermaid-js/mermaid/issues/3889)) [@huynhicode](https://togithub.com/huynhicode) - feat: Redirect old documentation links. ([#3797](https://togithub.com/mermaid-js/mermaid/issues/3797)) [@sidharthv96](https://togithub.com/sidharthv96) - feat: Title support via front matter for ER, state, class, git, and graph diagrams ([#3706](https://togithub.com/mermaid-js/mermaid/issues/3706)) [@MasonM](https://togithub.com/MasonM) - fix(deps): update all non-major dependencies (patch) ([#3790](https://togithub.com/mermaid-js/mermaid/issues/3790)) [@renovate](https://togithub.com/renovate) - fix(deps): update dependency rollup to v3 ([#3674](https://togithub.com/mermaid-js/mermaid/issues/3674)) [@renovate](https://togithub.com/renovate) - fix: LintStaged ([#3844](https://togithub.com/mermaid-js/mermaid/issues/3844)) [@sidharthv96](https://togithub.com/sidharthv96) 🎉 **Thanks to all contributors helping with this release!** 🎉 #### What's Changed - chore(deps): update actions/checkout action to v3 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3645 - chore(deps): update actions/setup-node action to v3 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3646 - Remove inconsistent and deprecated semicolons by [@revolter](https://togithub.com/revolter) in [mermaid-js/mermaid#3657 - Fix windows paths for `docs:build` by [@arpansaha13](https://togithub.com/arpansaha13) in [mermaid-js/mermaid#3605 - feat: make `parseError` function more type-safe by [@Some-Dood](https://togithub.com/Some-Dood) in [mermaid-js/mermaid#3643 - chore(deps): update all non-major dependencies (minor) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3632 - chore(deps): update all non-major dependencies (patch) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3671 - chore(deps): pin dependencies by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3685 - Added Open Graph meta tags by [@danangtomo](https://togithub.com/danangtomo) in [mermaid-js/mermaid#3679 - add eslint-plugin-no-only-tests plugin by [@DKurilo](https://togithub.com/DKurilo) in [mermaid-js/mermaid#3690 - Added and configured cspell plugin to eslint by [@devcer](https://togithub.com/devcer) in [mermaid-js/mermaid#3604 - fix: gantt demo diagrams ([#3655](https://togithub.com/mermaid-js/mermaid/issues/3655)) by [@isinek](https://togithub.com/isinek) in [mermaid-js/mermaid#3688 - Chore/3697 eslint curly by [@jeroenekkelkamp](https://togithub.com/jeroenekkelkamp) in [mermaid-js/mermaid#3698 - Update sequenceDiagram.md by [@imgss](https://togithub.com/imgss) in [mermaid-js/mermaid#3707 - Use `eslint-plugin-tsdoc` for TypeScript files instead of `eslint-plugin-jsdoc` by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3708 - chore(deps): pin dependencies by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3713 - chore(deps): update all non-major dependencies (patch) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3714 - Order pie chart slices clockwise by order of entries by [@jasmaa](https://togithub.com/jasmaa) in [mermaid-js/mermaid#3609 - fix: border attribute does not work in a certain writing style by [@maiermic](https://togithub.com/maiermic) in [mermaid-js/mermaid#3636 - add the way to add notes to class diagram by [@DKurilo](https://togithub.com/DKurilo) in [mermaid-js/mermaid#3647 - add statement aliases for ER diagram by [@DKurilo](https://togithub.com/DKurilo) in [mermaid-js/mermaid#3649 - fix: Fix useMaxWidth option for git graph by [@uttk](https://togithub.com/uttk) in [mermaid-js/mermaid#3652 - [#3659](https://togithub.com/mermaid-js/mermaid/issues/3659) Adding height when not using maxWidth by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3668 - Change fill attribute to style by [@CalebUsadi](https://togithub.com/CalebUsadi) in [mermaid-js/mermaid#3719 - feat: \[State diagram] Add classDefs and classes to states by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3644 - Fill inheritance arrow with background color by [@vallsv](https://togithub.com/vallsv) in [mermaid-js/mermaid#3543 - Ensure example code and rendered output are synced by [@marcjansen](https://togithub.com/marcjansen) in [mermaid-js/mermaid#3721 - fix(git): Support quoted branch names by [@gibson042](https://togithub.com/gibson042) in [mermaid-js/mermaid#3726 - docs: Add link to docs source by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3612 - chore(deps): update all non-major dependencies (patch) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3736 - chore(deps): update all non-major dependencies (minor) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3737 - feat(gantt): Add option 'tickInterval' for custom tick interval by [@DarkNami](https://togithub.com/DarkNami) in [mermaid-js/mermaid#3729 - Fix/convert attr to style in er graph by [@CalebUsadi](https://togithub.com/CalebUsadi) in [mermaid-js/mermaid#3722 - update user story link for [#3740](https://togithub.com/mermaid-js/mermaid/issues/3740) by [@6footGeek](https://togithub.com/6footGeek) in [mermaid-js/mermaid#3741 - Improved New Documentation by [@emersonbottero](https://togithub.com/emersonbottero) in [mermaid-js/mermaid#3678 - chore: fix cSpell word entry misspelling "mermiad" -> "mermaid" by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3751 - Fix link to CSS classes by [@hugovk](https://togithub.com/hugovk) in [mermaid-js/mermaid#3752 - docs: Update references to default config in directives page by [@raptor0929](https://togithub.com/raptor0929) in [mermaid-js/mermaid#3738 - Fix link relative links to documentation files by [@spier](https://togithub.com/spier) in [mermaid-js/mermaid#3760 - chore(deps): update all non-major dependencies (patch) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3769 - chore(deps): update all non-major dependencies (minor) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3770 - Fix CSpell by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3753 - Live edits for Docs by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3755 - Switch CDN to unpkg.com by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3777 - chore: Housekeeping by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3783 - Pnpm issue reproduction by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3784 - fix(deps): update all non-major dependencies (patch) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3790 - chore: clean up code in mermaidAPI render() and write specs/tests by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3684 - chore(deps): update all non-major dependencies (minor) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3791 - fix(deps): update dependency rollup to v3 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3674 - Add GHA that will check links + Fix broken links by [@spier](https://togithub.com/spier) in [mermaid-js/mermaid#3765 - chore: Merge master to develop by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3780 - bug: change shiki getHighlighter import by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3804 - Fix [#3799](https://togithub.com/mermaid-js/mermaid/issues/3799): Remove `type` from package.json by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3802 - CI: disable pinning dependencies by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3735 - bug: State diagram fix classes type by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3798 - Remove extra arrow and adjust cross position by [@ishuen](https://togithub.com/ishuen) in [mermaid-js/mermaid#3641 - comments in states are skipped now by [@avijit1258](https://togithub.com/avijit1258) in [mermaid-js/mermaid#3762 - feat: Redirect old documentation links. by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3797 - Mindmap integration docs by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3810 - Use `github-dark` to highlight fence blocks in vitepress docs by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3807 - chore(deps): update lycheeverse/lychee-action action to v1.5.4 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3827 - chore(deps): update pnpm to v7.17.0 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3828 - feat: Title support via front matter for ER, state, class, git, and graph diagrams by [@MasonM](https://togithub.com/MasonM) in [mermaid-js/mermaid#3706 - Replace `dagre`/`dagre-d3` with `dagre-d3-es` by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3809 - Add package visualizations by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3823 - [#3882](https://togithub.com/mermaid-js/mermaid/issues/3882) fix for issues with mindmaps with only a single node by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3833 - [#3778](https://togithub.com/mermaid-js/mermaid/issues/3778) Adding a hexgon shape by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3834 - Fix for [#3835](https://togithub.com/mermaid-js/mermaid/issues/3835), makes it possible to style path elements by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3836 - [#3831](https://togithub.com/mermaid-js/mermaid/issues/3831) Re-enabling themes for er diagrams by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3837 - (chore) remove console stmt in pieDetector by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3840 - Revert "Added pie" by [@pbrolin47](https://togithub.com/pbrolin47) in [mermaid-js/mermaid#3842 - Fix typos by [@endolith](https://togithub.com/endolith) in [mermaid-js/mermaid#3820 - (feat) state classDef documentation by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3841 - Integrations added - Visual Studio Code \[Polyglot Interactive Notebooks] by [@dfinke](https://togithub.com/dfinke) in [mermaid-js/mermaid#3821 - Reduce mermaid size by 31% by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3825 - fix: LintStaged by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3844 - Add official vim plugin to list in integrations by [@craigmac](https://togithub.com/craigmac) in [mermaid-js/mermaid#3847 - chore(deps): remove dependency on `graphlib` by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3861 - chore(deps): update pnpm to v7.17.1 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3862 - Make gitgraph snapshots consistent in E2E tests by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3860 - Use stylis to prepend idSelector by [@DanInProgress](https://togithub.com/DanInProgress) in [mermaid-js/mermaid#3829 - Use current mermaid version in docs. by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3846 - Add support for [@include](https://togithub.com/include) in docs by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3863 - Housekeeping with eslint-unicorn by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3845 - chore: delete functions not used in diagrams/c4 code (dead code) by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3871 - Switch back to jsdelivr by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3873 - 3882 edge labels by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3883 - Small fix for issue [#3881](https://togithub.com/mermaid-js/mermaid/issues/3881) by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3884 - Defects/issue 3878 by [@MrCoder](https://togithub.com/MrCoder) in [mermaid-js/mermaid#3880 - chore(docs): Auto build docs by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3547 - docs: refactor Theming doc by [@huynhicode](https://togithub.com/huynhicode) in [mermaid-js/mermaid#3889 - Feat: Add aria-describedby, aria-roledescription by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3808 - Release/9.3.0 by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3911 #### New Contributors - [@revolter](https://togithub.com/revolter) made their first contribution in [mermaid-js/mermaid#3657 - [@Some-Dood](https://togithub.com/Some-Dood) made their first contribution in [mermaid-js/mermaid#3643 - [@danangtomo](https://togithub.com/danangtomo) made their first contribution in [mermaid-js/mermaid#3679 - [@DKurilo](https://togithub.com/DKurilo) made their first contribution in [mermaid-js/mermaid#3690 - [@devcer](https://togithub.com/devcer) made their first contribution in [mermaid-js/mermaid#3604 - [@isinek](https://togithub.com/isinek) made their first contribution in [mermaid-js/mermaid#3688 - [@jeroenekkelkamp](https://togithub.com/jeroenekkelkamp) made their first contribution in [mermaid-js/mermaid#3698 - [@imgss](https://togithub.com/imgss) made their first contribution in [mermaid-js/mermaid#3707 - [@jasmaa](https://togithub.com/jasmaa) made their first contribution in [mermaid-js/mermaid#3609 - [@uttk](https://togithub.com/uttk) made their first contribution in [mermaid-js/mermaid#3652 - [@CalebUsadi](https://togithub.com/CalebUsadi) made their first contribution in [mermaid-js/mermaid#3719 - [@marcjansen](https://togithub.com/marcjansen) made their first contribution in [mermaid-js/mermaid#3721 - [@DarkNami](https://togithub.com/DarkNami) made their first contribution in [mermaid-js/mermaid#3729 - [@6footGeek](https://togithub.com/6footGeek) made their first contribution in [mermaid-js/mermaid#3741 - [@hugovk](https://togithub.com/hugovk) made their first contribution in [mermaid-js/mermaid#3752 - [@raptor0929](https://togithub.com/raptor0929) made their first contribution in [mermaid-js/mermaid#3738 - [@spier](https://togithub.com/spier) made their first contribution in [mermaid-js/mermaid#3760 - [@ishuen](https://togithub.com/ishuen) made their first contribution in [mermaid-js/mermaid#3641 - [@avijit1258](https://togithub.com/avijit1258) made their first contribution in [mermaid-js/mermaid#3762 - [@MasonM](https://togithub.com/MasonM) made their first contribution in [mermaid-js/mermaid#3706 - [@endolith](https://togithub.com/endolith) made their first contribution in [mermaid-js/mermaid#3820 - [@dfinke](https://togithub.com/dfinke) made their first contribution in [mermaid-js/mermaid#3821 - [@craigmac](https://togithub.com/craigmac) made their first contribution in [mermaid-js/mermaid#3847 - [@DanInProgress](https://togithub.com/DanInProgress) made their first contribution in [mermaid-js/mermaid#3829 - [@MrCoder](https://togithub.com/MrCoder) made their first contribution in [mermaid-js/mermaid#3880 - [@huynhicode](https://togithub.com/huynhicode) made their first contribution in [mermaid-js/mermaid#3889 **Full Changelog**: mermaid-js/mermaid@v9.2.2...v9.3.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/BirthdayResearch/contented).  Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

aloisklink added the dependencies label Nov 18, 2022

aloisklink mentioned this pull request Nov 18, 2022

Update packages to fix vulnerabilities #3712

Closed

sidharthv96 approved these changes Nov 18, 2022

View reviewed changes

aloisklink added 5 commits November 18, 2022 17:32

docs: create some basic mermaid mindmap demos

6e234f1

test(e2e): move mindmap tests to mindmap.spec.js

b9dcdb0

Currently, we have mindmap tests in the cypress/integration/rendering/mermaid.spec.js which is a bit odd. They should probably all be in the mindmap.spec.js file.

test(e2e): remove unused mermaid.spec.js file

57edcfe

All tests have been moved to `mindmap.spec.js` in a previous commit.

aloisklink force-pushed the use-dagre-d3-es branch from d708ed8 to fd76e0e Compare November 18, 2022 18:46

sidharthv96 approved these changes Nov 20, 2022

View reviewed changes

mmorel-35 approved these changes Nov 20, 2022

View reviewed changes

sidharthv96 mentioned this pull request Nov 20, 2022

Reduce mermaid size by 31% #3825

Merged

3 tasks

knsv merged commit 29a02d1 into mermaid-js:develop Nov 21, 2022

aloisklink deleted the use-dagre-d3-es branch November 21, 2022 23:54

olayway mentioned this pull request Nov 22, 2022

Investigate high severity vulnerabilities datopian/flowershow#200

Closed

MgenGlder mentioned this pull request Dec 1, 2022

Deploying an update to address security vulnerability #3877

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace `dagre`/`dagre-d3` with `dagre-d3-es` #3809

Replace `dagre`/`dagre-d3` with `dagre-d3-es` #3809

aloisklink commented Nov 18, 2022

sidharthv96 left a comment

sidharthv96 Nov 18, 2022

aloisklink Nov 18, 2022

aloisklink commented Nov 18, 2022

sidharthv96 commented Nov 19, 2022

weedySeaDragon commented Nov 19, 2022

aloisklink commented Nov 19, 2022 •

edited

sidharthv96 commented Nov 20, 2022 •

edited

sidharthv96 commented Nov 20, 2022

aloisklink commented Nov 20, 2022 •

edited

tbo47 commented Nov 20, 2022

Replace dagre/dagre-d3 with dagre-d3-es #3809

Replace dagre/dagre-d3 with dagre-d3-es #3809

Conversation

aloisklink commented Nov 18, 2022

📑 Summary

📏 Design Decisions

📋 Tasks

sidharthv96 left a comment

Choose a reason for hiding this comment

sidharthv96 Nov 18, 2022

Choose a reason for hiding this comment

aloisklink Nov 18, 2022

Choose a reason for hiding this comment

aloisklink commented Nov 18, 2022

sidharthv96 commented Nov 19, 2022

weedySeaDragon commented Nov 19, 2022

aloisklink commented Nov 19, 2022 • edited

sidharthv96 commented Nov 20, 2022 • edited

Good 3G

4G

WiFi

sidharthv96 commented Nov 20, 2022

aloisklink commented Nov 20, 2022 • edited

tbo47 commented Nov 20, 2022

Replace `dagre`/`dagre-d3` with `dagre-d3-es` #3809

Replace `dagre`/`dagre-d3` with `dagre-d3-es` #3809

aloisklink commented Nov 19, 2022 •

edited

sidharthv96 commented Nov 20, 2022 •

edited

aloisklink commented Nov 20, 2022 •

edited