Add history nodes to state diagram

[nimec01]

📑 Summary

This PR adds shallow and deep history nodes to state diagrams. I also updated the docs and added a test case.

Resolves #2901

📏 Design Decisions

Defining a history node works similar to creating a fork or a join. Use <<history>> or <<deephistory>> to mark a state as a history node. You can also use the shorthand variants <<H>> and <<H*>>.

Example:

   stateDiagram-v2
      state "A" as A {
        state "B" as B
        state "C" as C
        state A_History <<history>>

        B --> C
        C --> B
      }
      state "D" as D {
        state "E" as E {
          state "F" as F
          state "G" as G

          F --> G
          G --> F
        }
        state "I" as I
        state D_History <<deephistory>>

        E --> I
        I --> E
      }

      G --> A_History
      A --> D_History

📋 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.
• 🔖 targeted develop branch

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	e453aea
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/67461b10a7a4910008515c0f
😎 Deploy Preview	https://deploy-preview-5700--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]

Codecov Report

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

Project coverage is 4.49%. Comparing base (8328f74) to head (832c538).

Files with missing lines	Patch %	Lines
...endering-util/rendering-elements/shapes/history.ts	0.00%	61 Missing ⚠️
...id/src/rendering-util/rendering-elements/shapes.ts	0.00%	17 Missing ⚠️
packages/mermaid/src/diagrams/state/styles.js	0.00%	5 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5700      +/-   ##
==========================================
- Coverage     4.49%   4.49%   -0.01%     
==========================================
  Files          382     383       +1     
  Lines        53914   53997      +83     
  Branches       621     622       +1     
==========================================
  Hits          2425    2425              
- Misses       51489   51572      +83     

Flag	Coverage Δ
unit	4.49% <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/diagrams/state/styles.js	0.00% <0.00%> (ø)
...id/src/rendering-util/rendering-elements/shapes.ts	0.00% <0.00%> (ø)
...endering-util/rendering-elements/shapes/history.ts	0.00% <0.00%> (ø)

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Waiting for the first build to start…

[changeset-bot]

🦋 Changeset detected

Latest commit: e453aea

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

[pkg-pr-new]

Open in Stackblitz

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

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

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

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

commit: e453aea