GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Clarification in the docs regarding directions in the subgraps for flowcharts.

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-09-28 12:32:58 +02:00
parent 503cbedc96
commit fe8df78322
3 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
cypress/platform/knsv.html
View File

@ -38,13 +38,17 @@
</style> </style>
</head> </head>
<body> <body>
<pre class="mermaid2" style="width: 50%">
flowchart LR
a ---
</pre>
<pre class="mermaid" style="width: 50%"> <pre class="mermaid" style="width: 50%">
flowchart LR flowchart LR
a2 --- subgraph one
direction LR
A[myClass1] --> B[default]
subgraph two
direction BT
C[myClass2] --> D[default]
end
end
</pre> </pre>
<pre class="mermaid2" style="width: 50%"> <pre class="mermaid2" style="width: 50%">
flowchart LR flowchart LR
@ -79,7 +83,7 @@ flowchart TD
end end
end end
</pre> </pre>
<pre class="mermaid" style="width: 50%"> <pre class="mermaid2" style="width: 50%">
flowchart TD flowchart TD
release-branch[Create Release Branch]:::relClass release-branch[Create Release Branch]:::relClass
@ -131,7 +135,7 @@ flowchart TD
class A someclass; class A someclass;
class C someclass; class C someclass;
</pre> </pre>
<pre class="mermaid" style="width: 50%"> <pre class="mermaid2" style="width: 50%">
sequenceDiagram sequenceDiagram
title: My Sequence Diagram Title title: My Sequence Diagram Title
accTitle: My Acc Sequence Diagram accTitle: My Acc Sequence Diagram
@ -141,14 +145,14 @@ flowchart TD
John-->>Alice: Great! John-->>Alice: Great!
Alice-)John: See you later! Alice-)John: See you later!
</pre> </pre>
<pre class="mermaid" style="width: 50%"> <pre class="mermaid2" style="width: 50%">
graph TD graph TD
A -->|000| B A -->|000| B
B -->|111| C B -->|111| C
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red; linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
</pre> </pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid2" style="width: 100%">
journey journey
accTitle: My User Journey Diagram accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description accDescr: My User Journey Diagram Description
@ -162,10 +166,10 @@ graph TD
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</pre> </pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid2" style="width: 100%">
info info
</pre> </pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid2" style="width: 100%">
requirementDiagram requirementDiagram
accTitle: My req Diagram accTitle: My req Diagram
accDescr: My req Diagram Description accDescr: My req Diagram Description
@ -206,7 +210,7 @@ requirementDiagram
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</pre> </pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid2" style="width: 100%">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@ -238,7 +242,7 @@ gantt
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</pre> </pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid2" style="width: 100%">
stateDiagram stateDiagram
state Active { state Active {
Idle Idle
@ -266,7 +270,7 @@ stateDiagram
end end
B ->> A: Return B ->> A: Return
</pre> </pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid2" style="width: 100%">
classDiagram classDiagram
accTitle: My class diagram accTitle: My class diagram
accDescr: My class diagram Description accDescr: My class diagram Description
@ -291,7 +295,7 @@ class Class10 {
A->>Bob: Hola A->>Bob: Hola
Bob-->A: Pasten ! Bob-->A: Pasten !
</pre> </pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid2" style="width: 100%">
gitGraph gitGraph
commit id: "ZERO" commit id: "ZERO"
branch develop branch develop
@ -320,7 +324,7 @@ flowchart TD
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[fa:fa-car Car]
</pre> </pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid2" style="width: 100%">
classDiagram classDiagram
Animal "1" <|-- Duck Animal "1" <|-- Duck
Animal <|-- Fish Animal <|-- Fish
@ -343,7 +347,7 @@ flowchart TD
+run() +run()
} }
</pre> </pre>
<pre class="mermaid" style="width: 100%"> <pre class="mermaid2" style="width: 100%">
erDiagram erDiagram
CAR ||--o{ NAMED-DRIVER : allows CAR ||--o{ NAMED-DRIVER : allows
CAR { CAR {

2
docs/flowchart.md
View File

@ -679,6 +679,8 @@ flowchart LR
B1 --> B2 B1 --> B2
``` ```
**A clarification is in order here.** The direction statement affects the layout of a subgraph but only as long as it does not have any links leading in or out of it. The reason for this is that if you have links in or out then the graph of nodes is not longer the set of nodes in the subgraph but actually the set of nodes of the parent including the ones in the subgraph. One can see it as that the direction of the container gets injected in the subgraph with a link.
## Interaction ## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.

2
src/docs/flowchart.md
View File

@ -424,6 +424,8 @@ flowchart LR
B1 --> B2 B1 --> B2
``` ```
**A clarification is in order here.** The direction statement affects the layout of a subgraph but only as long as it does not have any links leading in or out of it. The reason for this is that if you have links in or out then the graph of nodes is not longer the set of nodes in the subgraph but actually the set of nodes of the parent including the ones in the subgraph. One can see it as that the direction of the container gets injected in the subgraph with a link.
## Interaction ## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.