marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6302 from guzzit/patch-1

Browse Source 
Added class styling example to block.md
This commit is contained in:
Sidharth Vinod
2025-04-18 19:08:58 +00:00
committed by GitHub
parent e8124d8828 36894fe14a
commit 59b400652b
2 changed files with 39 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/mermaid/src/docs/syntax/block.md
View File

@@ -388,6 +388,21 @@ 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
```
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.