Adding animations to flowchart edges also fixing bug with invisible edges

[knsv]

📑 Summary

Brief description about the content of your PR.

Resolves #5813 #5574

📏 Design Decisions

Proposing a new syntax for this. The key thing is to be able to attach an id the edge. After trhat we use the same syntax for edges as we have to add additional info to a node.

Easiest case:

flowchart LR
        A e1@==> B
        e1@{ animate: true}

Selecting type of animation

V1 will support 2, fast and slow

flowchart LR
  A e1@--> B
  e1@{ animation: fast}

This is a shorthand for { animate: true, animation: fast}

classDef statements

You can also add animations using classDef statements

flowchart LR
  A e1@--> B
  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
  class e1 animate

Note the escaped comma in the dasharray. This is because ',' is used as a delimiter between styles mermaid.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot]

🦋 Changeset detected

Latest commit: ec0d9c3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	ec0d9c3
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6762ac0c7d1ccc0008c7f6f9
😎 Deploy Preview	https://deploy-preview-6136--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.

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/mermaid-js/mermaid@6136

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@6136

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@6136

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@6136

commit: ec0d9c3

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 157 lines in your changes missing coverage. Please review.

Project coverage is 4.47%. Comparing base (df636c6) to head (ec0d9c3).

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00%	81 Missing ⚠️
...aid/src/rendering-util/rendering-elements/edges.js	0.00%	26 Missing ⚠️
.../rendering-elements/shapes/handDrawnShapeStyles.ts	0.00%	23 Missing ⚠️
packages/mermaid/src/styles.ts	0.00%	22 Missing ⚠️
packages/mermaid/src/utils.ts	0.00%	5 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6136      +/-   ##
==========================================
- Coverage     4.48%   4.47%   -0.01%     
==========================================
  Files          383     382       -1     
  Lines        54038   54131      +93     
  Branches       596     621      +25     
==========================================
  Hits          2425    2425              
- Misses       51613   51706      +93     

Flag	Coverage Δ
unit	4.47% <0.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/utils.ts	41.81% <0.00%> (-0.18%)	⬇️
packages/mermaid/src/styles.ts	10.00% <0.00%> (-2.36%)	⬇️
.../rendering-elements/shapes/handDrawnShapeStyles.ts	0.00% <0.00%> (ø)
...aid/src/rendering-util/rendering-elements/edges.js	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00% <0.00%> (ø)

... and 1 file with indirect coverage changes