mirror of https://github.com/pulumi/pulumi.git
205 lines
3.9 KiB
Markdown
205 lines
3.9 KiB
Markdown
# Diagrams
|
|
|
|
MyST supports [Mermaid](https://mermaid.js.org) diagrams. Mermaid is a
|
|
diagramming and charting tool that renders Markdown-inspired text definitions to
|
|
create and modify diagrams dynamically. Use the ```` ```{mermaid} ```` language
|
|
type to create a diagram. This page gives some examples (taken from the official
|
|
site at the time of writing) but as always you can find more comprehensive
|
|
information in the official documentation.
|
|
|
|
## Flow charts
|
|
|
|
````markdown
|
|
```{mermaid}
|
|
graph TD;
|
|
A-->B;
|
|
A-->C;
|
|
B-->D;
|
|
C-->D;
|
|
```
|
|
````
|
|
|
|
```{mermaid}
|
|
graph TD;
|
|
A-->B;
|
|
A-->C;
|
|
B-->D;
|
|
C-->D;
|
|
```
|
|
|
|
## Sequence diagrams
|
|
|
|
````markdown
|
|
```{mermaid}
|
|
sequenceDiagram
|
|
participant Alice
|
|
participant Bob
|
|
Alice->>John: Hello John, how are you?
|
|
loop HealthCheck
|
|
John->>John: Fight against hypochondria
|
|
end
|
|
Note right of John: Rational thoughts <br/>prevail!
|
|
John-->>Alice: Great!
|
|
John->>Bob: How about you?
|
|
Bob-->>John: Jolly good!
|
|
```
|
|
````
|
|
|
|
```{mermaid}
|
|
sequenceDiagram
|
|
participant Alice
|
|
participant Bob
|
|
Alice->>John: Hello John, how are you?
|
|
loop HealthCheck
|
|
John->>John: Fight against hypochondria
|
|
end
|
|
Note right of John: Rational thoughts <br/>prevail!
|
|
John-->>Alice: Great!
|
|
John->>Bob: How about you?
|
|
Bob-->>John: Jolly good!
|
|
```
|
|
|
|
## Gantt charts
|
|
|
|
````markdown
|
|
```{mermaid}
|
|
gantt
|
|
dateFormat YYYY-MM-DD
|
|
title Adding GANTT charts to Mermaid
|
|
excludes weekdays 2014-01-10
|
|
|
|
section A section
|
|
Completed task :done, des1, 2014-01-06,2014-01-08
|
|
Active task :active, des2, 2014-01-09, 3d
|
|
Future task : des3, after des2, 5d
|
|
Future task2 : des4, after des3, 5d
|
|
```
|
|
````
|
|
|
|
```{mermaid}
|
|
gantt
|
|
dateFormat YYYY-MM-DD
|
|
title Adding GANTT charts to Mermaid
|
|
excludes weekdays 2014-01-10
|
|
|
|
section A section
|
|
Completed task :done, des1, 2014-01-06,2014-01-08
|
|
Active task :active, des2, 2014-01-09, 3d
|
|
Future task : des3, after des2, 5d
|
|
Future task2 : des4, after des3, 5d
|
|
```
|
|
|
|
## Class diagrams
|
|
|
|
````markdown
|
|
```{mermaid}
|
|
classDiagram
|
|
Class01 <|-- AveryLongClass : Cool
|
|
Class03 *-- Class04
|
|
Class05 o-- Class06
|
|
Class07 .. Class08
|
|
Class09 --> C2 : Where am i?
|
|
Class09 --* C3
|
|
Class09 --|> Class07
|
|
Class07 : equals()
|
|
Class07 : Object[] elementData
|
|
Class01 : size()
|
|
Class01 : int chimp
|
|
Class01 : int gorilla
|
|
Class08 <--> C2: Cool label
|
|
```
|
|
````
|
|
|
|
```{mermaid}
|
|
classDiagram
|
|
Class01 <|-- AveryLongClass : Cool
|
|
Class03 *-- Class04
|
|
Class05 o-- Class06
|
|
Class07 .. Class08
|
|
Class09 --> C2 : Where am i?
|
|
Class09 --* C3
|
|
Class09 --|> Class07
|
|
Class07 : equals()
|
|
Class07 : Object[] elementData
|
|
Class01 : size()
|
|
Class01 : int chimp
|
|
Class01 : int gorilla
|
|
Class08 <--> C2: Cool label
|
|
```
|
|
|
|
## Commit graphs and trees (Git graphs)
|
|
|
|
````markdown
|
|
```{mermaid}
|
|
gitGraph
|
|
commit
|
|
commit
|
|
branch develop
|
|
commit
|
|
commit
|
|
commit
|
|
checkout main
|
|
commit
|
|
commit
|
|
```
|
|
````
|
|
|
|
```{mermaid}
|
|
gitGraph
|
|
commit
|
|
commit
|
|
branch develop
|
|
commit
|
|
commit
|
|
commit
|
|
checkout main
|
|
commit
|
|
commit
|
|
```
|
|
|
|
## Entity-relationship (ER) diagrams
|
|
|
|
````markdown
|
|
```{mermaid}
|
|
erDiagram
|
|
CUSTOMER ||--o{ ORDER : places
|
|
ORDER ||--|{ LINE-ITEM : contains
|
|
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
|
```
|
|
````
|
|
|
|
```{mermaid}
|
|
erDiagram
|
|
CUSTOMER ||--o{ ORDER : places
|
|
ORDER ||--|{ LINE-ITEM : contains
|
|
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
|
```
|
|
|
|
## User journey diagrams
|
|
|
|
````markdown
|
|
```{mermaid}
|
|
journey
|
|
title My working day
|
|
section Go to work
|
|
Make tea: 5: Me
|
|
Go upstairs: 3: Me
|
|
Do work: 1: Me, Cat
|
|
section Go home
|
|
Go downstairs: 5: Me
|
|
Sit down: 5: Me
|
|
```
|
|
````
|
|
|
|
```{mermaid}
|
|
journey
|
|
title My working day
|
|
section Go to work
|
|
Make tea: 5: Me
|
|
Go upstairs: 3: Me
|
|
Do work: 1: Me, Cat
|
|
section Go home
|
|
Go downstairs: 5: Me
|
|
Sit down: 5: Me
|
|
```
|