mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-24 17:59:39 +02:00
Merge branch 'develop' into docs/2910_update-contributing-guidelines
This commit is contained in:
@@ -518,9 +518,22 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
||||
|
||||
## Styling
|
||||
|
||||
### Styling a node
|
||||
### Styling a node (v<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
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 an individual node using the `style` keyword.
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
#### 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>
|
||||
|
Reference in New Issue
Block a user