Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added functionality to support style keyword #5111

Merged
merged 18 commits into from
Dec 20, 2023

Conversation

jgreywolf
Copy link
Contributor

@jgreywolf jgreywolf commented Dec 4, 2023

📑 Summary

This change allows users to use syntax such as:

style CLASSNAME fill:#000,stroke:2px

in order to apply css styles to individual class boxes

Resolves #2408

Example

Rendering the following Mermaid diagram will look like:

```mermaid
 classDiagram 
   class Animal 
   class Mineral 
   style Animal fill:#f9f,stroke:#333,stroke-width:4px 
   style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 
```

image

See on netlify preview.

Copy link

netlify bot commented Dec 4, 2023

Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit 2b4940d
🔍 Latest deploy log https://app.netlify.com/sites/mermaid-js/deploys/658056d629259e00095ec1c4
😎 Deploy Preview https://deploy-preview-5111--mermaid-js.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Member

@sidharthv96 sidharthv96 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The doc change is mandatory. Rest are good to have.

packages/mermaid/src/diagrams/class/classDb.ts Outdated Show resolved Hide resolved
docs/syntax/classDiagram.md Outdated Show resolved Hide resolved
@aloisklink aloisklink added Type: Enhancement New feature or request Graph: Class labels Dec 5, 2023
@aloisklink aloisklink marked this pull request as draft December 5, 2023 11:25
@jgreywolf jgreywolf marked this pull request as ready for review December 10, 2023 21:29
Copy link

codecov bot commented Dec 10, 2023

Codecov Report

Merging #5111 (2b4940d) into develop (6e64556) will decrease coverage by 2.58%.
The diff coverage is 55.55%.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           develop    #5111      +/-   ##
===========================================
- Coverage    79.37%   76.80%   -2.58%     
===========================================
  Files          166      166              
  Lines        13878    13886       +8     
  Branches       705      707       +2     
===========================================
- Hits         11016    10665     -351     
- Misses        2710     3059     +349     
- Partials       152      162      +10     
Flag Coverage Δ
e2e 81.96% <55.55%> (-3.23%) ⬇️
unit 43.04% <ø> (ø)

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

Files Coverage Δ
packages/mermaid/src/dagre-wrapper/nodes.js 78.36% <ø> (-11.26%) ⬇️
...ges/mermaid/src/diagrams/class/classRenderer-v2.ts 79.85% <100.00%> (ø)
packages/mermaid/src/diagrams/class/classTypes.ts 93.47% <ø> (ø)
packages/mermaid/src/diagrams/class/classDb.ts 81.18% <50.00%> (+7.99%) ⬆️

... and 22 files with indirect coverage changes

Copy link
Member

@aloisklink aloisklink left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love this new feature!

The doc change is mandatory. Rest are good to have.

Also, please add a full example + screenshot to your PR description, because this feature looks beautiful, and you should show it off to other mermaid users that see this PR!

packages/mermaid/src/diagrams/class/classDb.ts Outdated Show resolved Hide resolved
packages/mermaid/src/docs/syntax/classDiagram.md Outdated Show resolved Hide resolved
packages/mermaid/src/diagrams/class/classDb.ts Outdated Show resolved Hide resolved
Copy link
Member

@aloisklink aloisklink left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! We did have a failing E2E test, but I think it might just be a flaky test, so I've rerun the tests and hopefully that would fix it.

packages/mermaid/src/docs/syntax/classDiagram.md Outdated Show resolved Hide resolved
@jgreywolf jgreywolf added this pull request to the merge queue Dec 20, 2023
Merged via the queue into develop with commit 6028036 Dec 20, 2023
25 of 26 checks passed
@jgreywolf jgreywolf deleted the 2408-support-style-for-class branch December 20, 2023 15:14
@mbtools
Copy link

mbtools commented Dec 20, 2023

Thank you, Justin! The world much appreciates your effort 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Graph: Class Type: Enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support the style keyword for class diagrams
4 participants