mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-02-04 07:13:25 +08:00
Updated docs with info on chaining of nodes and using ::: to attach a class
This commit is contained in:
parent
d2eaf16751
commit
28153656d7
@ -314,6 +314,37 @@ graph LR
|
|||||||
A -- text --> B -- text2 --> C
|
A -- text --> B -- text2 --> C
|
||||||
```
|
```
|
||||||
|
|
||||||
|
It is also possible to declare multiple nodes links in the same line as per below:
|
||||||
|
```
|
||||||
|
graph LR
|
||||||
|
a --> b & c--> d
|
||||||
|
```
|
||||||
|
```mermaid
|
||||||
|
graph LR
|
||||||
|
a --> b & c--> d
|
||||||
|
```
|
||||||
|
|
||||||
|
You can then describe dependencies in a very expressive way. Like the onliner below:
|
||||||
|
```
|
||||||
|
graph TB
|
||||||
|
A & B--> C & D
|
||||||
|
```
|
||||||
|
```mermaid
|
||||||
|
graph TB
|
||||||
|
A & B--> C & D
|
||||||
|
```
|
||||||
|
If you describe the same diagram using the the basic syntax, it will take four lines. A
|
||||||
|
word of warning, one could go overboard with this making the graph harder to read in
|
||||||
|
markdown form. The Swedish word `lagom` comes to mind. It means, not to much and not to little.
|
||||||
|
This goes for expressive syntaxes as well.
|
||||||
|
```
|
||||||
|
graph TB
|
||||||
|
A --> C
|
||||||
|
A --> D
|
||||||
|
B --> C
|
||||||
|
B --> D
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
## Special characters that break syntax
|
## Special characters that break syntax
|
||||||
|
|
||||||
@ -512,6 +543,19 @@ It is also possible to attach a class to a list of nodes in one statement:
|
|||||||
class nodeId1,nodeId2 className;
|
class nodeId1,nodeId2 className;
|
||||||
```
|
```
|
||||||
|
|
||||||
|
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
|
||||||
|
|
||||||
|
```
|
||||||
|
graph LR
|
||||||
|
A:::someclass --> B
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
```
|
||||||
|
```mermaid
|
||||||
|
graph LR
|
||||||
|
A:::someclass --> B
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
### Css classes
|
### Css classes
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user