marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-01 05:09:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

Grammar/rendering for setting style on class node

Browse Source
This commit is contained in:
Justin Greywolf
2023-12-04 13:28:31 -08:00
parent f81e4d4361
commit 239fad94ee
8 changed files with 93 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/syntax/classDiagram.md
View File

@@ -768,7 +768,28 @@ Beginner's tip—a full example using interactive links in an HTML page:
### Styling a node
It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
It is possible to apply specific styles such as a thicker border or a different background color to a node.
```mermaid-example
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
```
```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
```
#### Classes
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
```html
<style>