Feature/523 Add Style option to sequence diagram actors

[daanklijn]

📑 Summary

As described in #523, it would be nice if we could style the actors of the sequence diagram. Basic styling makes larger sequence diagrams easier to read, and is for many users (including me) a reason to use other tools instead of mermaid.

This PR introduces the style keyword, allowing users to add style to specific actors of the sequence diagram.

Example:

    sequenceDiagram
      Pink Alice->>+Purple Bob: Hello!
      Purple Bob->>+Pink Alice: Hi Alice, what a nice pink color
      Pink Alice->>-Purple Bob: Thanks Bob, I like your color to!
      Purple Bob->>-Pink Alice: Thanks Alice!!!

      style Pink Alice: fill:pink,stroke:red
      style Purple Bob: fill:mediumPurple,stroke:purple

Output:

Resolves #523

📏 Design Decisions

First time contributing to the mermaid codebase, so not very familiar yet. Let me know if you think this solution makes sense.

This PR makes the following changes:

1. Add style keyword to sequence diagram JISON definition.
2. As defined in the style_statement this keyword takes in the actor, and the text after the : and passes it to the setCssStyle function.
3. Added setCssStyle function to sequenceDb.ts. This function retrieves the actor based on its ID and then sets its style attribute to the defined style (e.g. fill:pink, stroke:red). We replace , by ; so that the defined style becomes valid CSS.
4. This actor.style attribute is then accessed in sequenceRender.ts and svgDraw.ts and passed to the rect objects by setting rect.attr to { style }.

Haven't added any tests / docs yet. First wanted to get some feedback 😄

📋 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]

⚠️ No Changeset found

Latest commit: 04c9b02

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	04c9b02
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/679921a8dcefab00088a8a34
😎 Deploy Preview	https://deploy-preview-6234--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@6234

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

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

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

commit: 04c9b02

[codecov]

Codecov Report

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

Project coverage is 4.47%. Comparing base (e2de552) to head (04c9b02).
Report is 3 commits behind head on develop.

Files with missing lines	Patch %	Lines
...ckages/mermaid/src/diagrams/sequence/sequenceDb.ts	0.00%	10 Missing ⚠️
packages/mermaid/src/diagrams/sequence/svgDraw.js	0.00%	5 Missing ⚠️
.../mermaid/src/diagrams/sequence/sequenceRenderer.ts	0.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6234      +/-   ##
==========================================
- Coverage     4.47%   4.47%   -0.01%     
==========================================
  Files          384     385       +1     
  Lines        54179   54207      +28     
  Branches       623     598      -25     
==========================================
  Hits          2425    2425              
- Misses       51754   51782      +28     

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 Δ
.../mermaid/src/diagrams/sequence/sequenceRenderer.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/sequence/svgDraw.js	0.00% <0.00%> (ø)
...ckages/mermaid/src/diagrams/sequence/sequenceDb.ts	0.00% <0.00%> (ø)

... and 2 files with indirect coverage changes

[daanklijn]

Removing # here so that CSS colors (e.g. #FFC0CB) can be passed.
Unsure why the # was here in the first place. Please double check if it's safe to remove it.