marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-13 12:29:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

getting there

Browse Source
This commit is contained in:
Ashish Jain
2022-02-10 20:32:21 +01:00
parent 3f6296b619
commit bb2dd2f5f3
381 changed files with 150220 additions and 72934 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,22 +11,14 @@ This statement declares the direction of the Flowchart.
This declares the graph is oriented from top to bottom (`TD` or `TB`).
```
graph TD
Start --> Stop
```
```mermaid
```mermaid-example
graph TD
Start --> Stop
```
This declares the graph is oriented from left to right (`LR`).
```
graph LR
Start --> Stop
```
```mermaid
```mermaid-example
graph LR
Start --> Stop
```
@@ -55,12 +47,7 @@ Apart from the graph type, the syntax is the same. This is currently experimenta
### A node (default)
```
graph LR
id
```
```mermaid
```mermaid-example
graph LR
id
```
@@ -73,11 +60,7 @@ It is also possible to set text in the box that differs from the id. If this is
found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
one previously defined will be used when rendering the box.
```
graph LR
id1[This is the text in the box]
```
```mermaid
```mermaid-example
graph LR
id1[This is the text in the box]
```
@@ -86,66 +69,42 @@ graph LR
### A node with round edges
```
graph LR
id1(This is the text in the box)
```
```mermaid
```mermaid-example
graph LR
id1(This is the text in the box)
```
### A stadium-shaped node
```
graph LR
id1([This is the text in the box])
```
```mermaid
```mermaid-example
graph LR
id1([This is the text in the box])
```
### A node in a subroutine shape
```
graph LR
id1[[This is the text in the box]]
```
```mermaid
```mermaid-example
graph LR
id1[[This is the text in the box]]
```
### A node in a cylindrical shape
```
graph LR
id1[(Database)]
```
```mermaid
```mermaid-example
graph LR
id1[(Database)]
```
### A node in the form of a circle
```
graph LR
id1((This is the text in the circle))
```
```mermaid
```mermaid-example
graph LR
id1((This is the text in the circle))
```
### A node in an asymmetric shape
```
graph LR
id1>This is the text in the box]
```
```mermaid
```mermaid-example
graph LR
id1>This is the text in the box]
```
@@ -153,69 +112,40 @@ Currently only the shape above is possible and not its mirror. *This might chang
### A node (rhombus)
```
graph LR
id1{This is the text in the box}
```
```mermaid
```mermaid-example
graph LR
id1{This is the text in the box}
```
### A hexagon node
{% raw %}
```
graph LR
id1{{This is the text in the box}}
```
{% endraw %}
```mermaid
{% raw %}
```mermaid-example
graph LR
id1{{This is the text in the box}}
{% endraw %}
```
### Parallelogram
```
```mermaid-example
graph TD
id1[/This is the text in the box/]
```
```mermaid
graph TD
id1[/This is the text in the box/]
```
### Parallelogram alt
```
graph TD
id1[\This is the text in the box\]
```
```mermaid
```mermaid-example
graph TD
id1[\This is the text in the box\]
```
### Trapezoid
```
graph TD
A[/Christmas\]
```
```mermaid
```mermaid-example
graph TD
A[/Christmas\]
```
### Trapezoid alt
```
graph TD
B[\Go shopping/]
```
```mermaid
```mermaid-example
graph TD
B[\Go shopping/]
```
@@ -226,150 +156,98 @@ Nodes can be connected with links/edges. It is possible to have different types
### A link with arrow head
```
graph LR
A-->B
```
```mermaid
```mermaid-example
graph LR
A-->B
```
### An open link
```
graph LR
A --- B
```
```mermaid
```mermaid-example
graph LR
A --- B
```
### Text on links
```
```mermaid-example
graph LR
A-- This is the text! ---B
```
```mermaid
graph LR
A-- This is the text ---B
```
or
```
graph LR
A---|This is the text|B
```
```mermaid
```mermaid-example
graph LR
A---|This is the text|B
```
### A link with arrow head and text
```
graph LR
A-->|text|B
```
```mermaid
```mermaid-example
graph LR
A-->|text|B
```
or
```
graph LR
A-- text -->B
```
```mermaid
```mermaid-example
graph LR
A-- text -->B
```
### Dotted link
```
graph LR;
A-.->B;
```
```mermaid
```mermaid-example
graph LR;
A-.->B;
```
### Dotted link with text
```
graph LR
A-. text .-> B
```
```mermaid
```mermaid-example
graph LR
A-. text .-> B
```
### Thick link
```
graph LR
A ==> B
```
```mermaid
```mermaid-example
graph LR
A ==> B
```
### Thick link with text
```
graph LR
A == text ==> B
```
```mermaid
```mermaid-example
graph LR
A == text ==> B
```
### Chaining of links
It is possible declare many links in the same line as per below:
```
graph LR
A -- text --> B -- text2 --> C
```
```mermaid
It is possible to declare many links in the same line as per below:
```mermaid-example
graph LR
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
```mermaid-example
graph LR
a --> b & c--> d
```
You can then describe dependencies in a very expressive way. Like the oneliner below:
```
graph TB
A & B--> C & D
```
```mermaid
You can then describe dependencies in a very expressive way. Like the one-liner below:
```mermaid-example
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.
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well.
```
```mmd
graph TB
A --> C
A --> D
@@ -379,15 +257,9 @@ graph TB
### Beta: New arrow types
When using flowchart instead of graph there is the are new types of arrows supported as per below:
When using flowchart instead of graph there are new types of arrows supported as per below:
```
flowchart LR
A --o B
B --x C
```
```mermaid
```mermaid-example
flowchart LR
A --o B
B --x C
@@ -398,14 +270,7 @@ flowchart LR
When using flowchart instead of graph there is the possibility to use multidirectional arrows.
```
flowchart LR
A o--o B
B <--> C
C x--x D
```
```mermaid
```mermaid-example
flowchart LR
A o--o B
B <--> C
@@ -423,16 +288,7 @@ than the others by adding extra dashes in the link definition.
In the following example, two extra dashes are added in the link from node _B_
to node _E_, so that it spans two more ranks than regular links:
```
graph TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
```
```mermaid
```mermaid-example
graph TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
@@ -448,7 +304,7 @@ When the link label is written in the middle of the link, the extra dashes must
be added on the right side of the link. The following example is equivalent to
the previous one:
```
```mermaid-example
graph TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
@@ -457,15 +313,6 @@ graph TD
B -- No ----> E[End];
```
```mermaid
graph TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
```
For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table:
@@ -482,11 +329,7 @@ as summed up in the following table:
It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
```
graph LR
id1["This is the (text) in the box"]
```
```mermaid
```mermaid-example
graph LR
id1["This is the (text) in the box"]
```
@@ -495,11 +338,7 @@ graph LR
It is possible to escape characters using the syntax exemplified here.
```
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
```mermaid
```mermaid-example
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
@@ -514,20 +353,7 @@ end
An example below:
```
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
```mermaid
```mermaid-example
graph TB
c1-->a2
subgraph one
@@ -543,43 +369,19 @@ graph TB
You can also set an explicit id for the subgraph.
```
```mermaid-example
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
```mermaid
graph TB
c1-->a2
subgraph id1 [one]
a1-->a2
end
```
## Beta: flowcharts
With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.
```
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
```
```mermaid
```mermaid-example
flowchart TB
c1-->a2
subgraph one
@@ -602,6 +404,7 @@ It is possible to bind a click event to a node, the click can lead to either a j
```
click nodeId callback
click nodeId call callback()
```
* nodeId is the id of the node
@@ -617,40 +420,33 @@ Examples of tooltip usage below:
</script>
```
```
graph LR;
A-->B;
click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link"
```
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
```mermaid
graph LR
```mermaid-example
graph LR;
A-->B;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "http://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/).
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
```
graph LR;
A-->B;
B-->C;
click A "http://www.github.com" _blank
click B "http://www.github.com" "Open this in a new tab" _blank
```
```mermaid
```mermaid-example
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
click A "http://www.github.com" _blank
click B "http://www.github.com" "Open this in a new tab" _blank
click C href "http://www.github.com" _blank
click D href "http://www.github.com" "Open this in a new tab" _blank
```
Beginners tip, a full example using interactive links in a html context:
@@ -659,8 +455,12 @@ Beginners tip, a full example using interactive links in a html context:
<div class="mermaid">
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "http://www.github.com" "This is a link"
</div>
<script>
@@ -686,7 +486,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
```
```mmd
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
@@ -705,18 +505,32 @@ defined in the linkStyle statement will belong to the fourth link in the graph:
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
```
You can specify default to apply to all links, or you can give a list of link order numbers seperated by a comma.
Instead of giving a styles option, you can also use custom d3 curve types with the following syntax:
```
linkStyle default|numList|num interpolate curveType
```
If you want to add style options too, instead of writing:
```
linkStyle default interpolate cardinal
linkStyle default stroke:#ff3,stroke-width:4px,color:red;
```
You can combine them into:
```
linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red;
```
### Styling a node
It is possible to apply specific styles such as a thicker border or a different background color to a node.
```
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
```
```mermaid
```mermaid-example
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
@@ -750,12 +564,7 @@ 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:
```
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
```
```mermaid
```mermaid-example
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
@@ -781,13 +590,7 @@ below:
**Example definition**
```
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
```
```mermaid
```mermaid-example
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
@@ -810,14 +613,7 @@ It is possible to add icons from fontawesome.
The icons are accessed via the syntax fa:#icon class name#.
```
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?);
```
```mermaid
```mermaid-example
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
@@ -834,15 +630,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.
```
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
```mermaid
```mermaid-example
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}