marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-31 22:26:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

[autofix.ci] apply automated fixes

Browse Source
This commit is contained in:
autofix-ci[bot]
2025-02-19 10:47:08 +00:00
committed by GitHub
parent efe834e772
commit 36894fe14a
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/syntax/block.md
View File

@@ -567,6 +567,30 @@ block-beta
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
### Class Styling
Mermaid enables applying styling to classes, which could make styling easier if you want to apply a certain set of styles to multiple elements, as you could just link those elements to a class.
#### Example - Styling a Single Class
```mermaid-example
block-beta
A space B
A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
```mermaid
block-beta
A space B
A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
In this example, a class named 'blue' is defined and applied to block 'A', while block 'B' receives individual styling. This demonstrates the flexibility of Mermaid in applying both shared and unique styles within the same diagram.
The ability to style blocks individually or through classes provides a powerful tool for enhancing the visual impact and clarity of block diagrams. Whether emphasizing certain elements or maintaining a cohesive design across the diagram, these styling capabilities are central to effective diagramming. The next sections will present practical examples and use cases, followed by tips for troubleshooting common issues.