marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-12 18:49:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into sidv/docs

Browse Source 
* develop:
  chore: update browsers list
  Fix pre
  Prettier pass
  Fix XSS htmls
  fix #3407 Replace `div` with `pre` and format
This commit is contained in:
Sidharth Vinod
2022-09-05 19:30:39 +05:30
parent a95f46f513 d52c1f09d5
commit 5e9db250bc
113 changed files with 2859 additions and 3863 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
docs/diagrams-and-syntax-and-examples/flowchart.md
View File

@@ -154,11 +154,6 @@ graph LR
id1>This is the text in the box]
```
```mermaid
graph LR
id1>This is the text in the box]
```
Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._
### A node (rhombus)
@@ -192,11 +187,6 @@ graph TD
id1[/This is the text in the box/]
```
```mermaid
graph TD
id1[/This is the text in the box/]
```
### Parallelogram alt
```mermaid-example
@@ -216,11 +206,6 @@ graph TD
A[/Christmas\]
```
```mermaid
graph TD
A[/Christmas\]
```
### Trapezoid alt
```mermaid-example
@@ -390,11 +375,6 @@ 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:
```mmd
@@ -559,20 +539,6 @@ graph TB
end
```
```mermaid
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
You can also set an explicit id for the subgraph:
```mermaid-example
@@ -583,14 +549,6 @@ graph TB
end
```
```mermaid
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
## Flowcharts
With the graphtype `flowchart` it is also possible to set edges to and from subgraphs:
@@ -612,23 +570,6 @@ flowchart TB
two --> c2
```
```mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
```
## Interaction
A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
@@ -662,17 +603,6 @@ graph LR;
click B href "https://www.github.com" "This is a tooltip for a link"
```
```mermaid
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "https://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "https://www.github.com" "This is a tooltip for a link"
```
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
@@ -782,13 +712,6 @@ graph LR
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
```mermaid
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 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 reference to multiple nodes.
@@ -813,12 +736,6 @@ graph LR
classDef someclass fill:#f96;
```
```mermaid
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
```
### Css classes
It is also possible to predefine classes in css styles that can be applied from the graph definition:
@@ -842,18 +759,13 @@ graph LR;
class A cssClass;
```
```mermaid
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
```
### Default class
If a class is named `default` it will be assigned to all nodes that do not have a specific class definition.
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
## Basic support for fontawesome
@@ -867,14 +779,6 @@ graph TD
B-->E(A fa:fa-camera-retro perhaps?);
```
```mermaid
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
```
## Graph declarations with spaces between vertices and link and without semicolon
- After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
@@ -891,14 +795,6 @@ graph LR
C -->|Two| E[Result two]
```
```mermaid
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
## Configuration...
Is it possible to adjust the width of the rendered flowchart.