marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-11 06:54:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

#1386 Updated docs

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-05-06 18:58:26 +02:00
parent 57fb800c77
commit 6203c27244
1 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/flowchart.md
View File

@@ -18,11 +18,11 @@ graph TD
This declares a graph oriented from left to right (`LR`). This declares a graph oriented from left to right (`LR`).
``` ```
flowchart LR graph LR
Start --> Stop Start --> Stop
``` ```
```mermaid ```mermaid
flowchart LR graph LR
Start --> Stop Start --> Stop
``` ```
@@ -44,12 +44,12 @@ This renders a flowchart in the same way as graph but with a new rendering metho
### A node (default) ### A node (default)
``` ```
flowchart LR graph LR
id id
``` ```
```mermaid ```mermaid
flowchart LR graph LR
id id
``` ```
Note that the id is what is displayed in the box. Note that the id is what is displayed in the box.
@@ -61,7 +61,7 @@ found for the node that will be used. Also if you define edges for the node late
one previously defined will be used when rendering the box. one previously defined will be used when rendering the box.
``` ```
flowchart LR graph LR
id1[This is the text in the box] id1[This is the text in the box]
``` ```
```mermaid ```mermaid
@@ -231,7 +231,7 @@ flowchart LR
### Text on links ### Text on links
``` ```
flowchart LR graph LR
A-- This is the text! ---B A-- This is the text! ---B
``` ```
```mermaid ```mermaid
@@ -340,11 +340,11 @@ flowchart LR
You can then describe dependencies in a very expressive way. Like the onliner below: You can then describe dependencies in a very expressive way. Like the onliner below:
``` ```
flowchart TB graph TB
A & B--> C & D A & B--> C & D
``` ```
```mermaid ```mermaid
flowchart TB graph TB
A & B--> C & D A & B--> C & D
``` ```
If you describe the same diagram using the the basic syntax, it will take four lines. A If you describe the same diagram using the the basic syntax, it will take four lines. A
@@ -352,7 +352,7 @@ word of warning, one could go overboard with this making the graph harder to rea
markdown form. The Swedish word `lagom` comes to mind. It means, not to much and not to little. 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. This goes for expressive syntaxes as well.
``` ```
flowchart TB graph TB
A --> C A --> C
A --> D A --> D
B --> C B --> C
@@ -431,7 +431,7 @@ end
An example below: An example below:
``` ```
flowchart TB graph TB
c1-->a2 c1-->a2
subgraph one subgraph one
a1-->a2 a1-->a2
@@ -444,7 +444,7 @@ flowchart TB
end end
``` ```
```mermaid ```mermaid
flowchart TB graph TB
c1-->a2 c1-->a2
subgraph one subgraph one
a1-->a2 a1-->a2
@@ -460,14 +460,14 @@ flowchart TB
You can also set an excplicit id for the subgraph. You can also set an excplicit id for the subgraph.
``` ```
flowchart TB graph TB
c1-->a2 c1-->a2
subgraph ide1 [one] subgraph ide1 [one]
a1-->a2 a1-->a2
end end
``` ```
```mermaid ```mermaid
flowchart TB graph TB
c1-->a2 c1-->a2
subgraph id1 [one] subgraph id1 [one]
a1-->a2 a1-->a2
@@ -543,7 +543,7 @@ flowchart LR;
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip. The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
```mermaid ```mermaid
flowchart LR graph LR
A-->B; A-->B;
click A callback "Tooltip" click A callback "Tooltip"
click B "http://www.github.com" "This is a link" click B "http://www.github.com" "This is a link"
@@ -556,7 +556,7 @@ Beginners tip, a full example using interactive links in a html context:
``` ```
<body> <body>
<div class="mermaid"> <div class="mermaid">
flowchart LR; graph LR;
A-->B; A-->B;
click A callback "Tooltip" click A callback "Tooltip"
click B "http://www.github.com" "This is a link" click B "http://www.github.com" "This is a link"
@@ -586,7 +586,7 @@ Beginners tip, a full example using interactive links in a html context:
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
``` ```
flowchart LR graph LR
%% this is a comment A -- text --> B{node} %% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
``` ```
@@ -610,13 +610,13 @@ linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
It is possible to apply specific styles such as a thicker border or a different background color to a node. It is possible to apply specific styles such as a thicker border or a different background color to a node.
``` ```
flowchart LR graph LR
id1(Start)-->id2(Stop) id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
``` ```
```mermaid ```mermaid
flowchart LR graph LR
id1(Start)-->id2(Stop) id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
@@ -650,12 +650,12 @@ It is also possible to attach a class to a list of nodes in one statement:
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below: A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
``` ```
flowchart LR graph LR
A:::someclass --> B A:::someclass --> B
classDef someclass fill:#f96; classDef someclass fill:#f96;
``` ```
```mermaid ```mermaid
flowchart LR graph LR
A:::someclass --> B A:::someclass --> B
classDef someclass fill:#f96; classDef someclass fill:#f96;
``` ```
@@ -681,13 +681,13 @@ below:
**Example definition** **Example definition**
``` ```
flowchart LR; graph LR;
A-->B[AAA<span>BBB</span>]; A-->B[AAA<span>BBB</span>];
B-->D; B-->D;
class A cssClass; class A cssClass;
``` ```
```mermaid ```mermaid
flowchart LR; graph LR;
A-->B[AAA<span>BBB</span>]; A-->B[AAA<span>BBB</span>];
B-->D; B-->D;
class A cssClass; class A cssClass;
@@ -734,7 +734,7 @@ graph TD
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
``` ```
flowchart LR graph LR
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision} B --> C{Decision}
C -->|One| D[Result one] C -->|One| D[Result one]
@@ -742,7 +742,7 @@ flowchart LR
``` ```
```mermaid ```mermaid
flowchart LR graph LR
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision} B --> C{Decision}
C -->|One| D[Result one] C -->|One| D[Result one]