mirror of
https://gitea.com/mcereda/oam.git
synced 2026-02-09 05:44:23 +00:00
fix: move mermaid diagrams to their own article, use the correct code delimiter
This commit is contained in:
Michele Cereda
@@ -9,12 +9,6 @@ Compare Markdown implementations at [babelmark].
|
||||
1. [Folded content](#folded-content)
|
||||
1. [Images](#images)
|
||||
1. [Diagrams](#diagrams)
|
||||
1. [Flowchart A.K.A. graph](#flowchart-aka-graph)
|
||||
1. [Sequence diagram](#sequence-diagram)
|
||||
1. [Class diagram](#class-diagram)
|
||||
1. [State diagram](#state-diagram)
|
||||
1. [Gantt diagram](#gantt-diagram)
|
||||
1. [Pie chart](#pie-chart)
|
||||
1. [Math](#math)
|
||||
1. [Alerts](#alerts)
|
||||
1. [Troubleshooting](#troubleshooting)
|
||||
@@ -83,189 +77,9 @@ Align in the center:
|
||||
|
||||
## Diagrams
|
||||
|
||||
See [mermaid.js], [The magical Markdown I bet you don't know] and [slaise/High-level-Markdown].
|
||||
Use [mermaid.js] to include diagrams and graphs.
|
||||
|
||||
Code blocks for diagrams can either:
|
||||
|
||||
- start with ` ```mermaid ` and finish with ` ``` `, or
|
||||
- start with `:::mermaid` and finish with `:::`.
|
||||
|
||||
| Code delimiter | Gitea | Github | Gitlab |
|
||||
| -------------- | ----- | ------ | ------ |
|
||||
| ` ```mermaid ` | ✓ | ✓ | ✓ |
|
||||
| ` :::mermaid ` | ✓ | ✗ | ✓ |
|
||||
|
||||
### Flowchart A.K.A. graph
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
graph LR
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
subgraph work
|
||||
C -->|One| D[Laptop]
|
||||
C --x|Two| E[iPhone]
|
||||
C -.->|Three| F[fa:fa-car Car]
|
||||
C ==> G((Bike))
|
||||
C --> J>TV]
|
||||
end
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
subgraph work
|
||||
C -->|One| D[Laptop]
|
||||
C --x|Two| E[iPhone]
|
||||
C -.->|Three| F[fa:fa-car Car]
|
||||
C ==> G((Bike))
|
||||
C --> J>TV]
|
||||
end
|
||||
```
|
||||
|
||||
### Sequence diagram
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
sequenceDiagram
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
John-->>-Alice: I feel great!
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
John-->>-Alice: I feel great!
|
||||
```
|
||||
|
||||
### Class diagram
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
```
|
||||
|
||||
### State diagram
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
### Gantt diagram
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d
|
||||
```
|
||||
|
||||
### Pie chart
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
```
|
||||
See also [The magical Markdown I bet you don't know] and [slaise/High-level-Markdown].
|
||||
|
||||
## Math
|
||||
|
||||
@@ -347,6 +161,7 @@ Install and enable [`bierner.markdown-mermaid`][bierner.markdown-mermaid]'s exte
|
||||
- [Linguist supported language syntax list]
|
||||
- [Github's alert formatting][github formatting alerts]
|
||||
- [Live editor]
|
||||
- [Mermaid.js]
|
||||
|
||||
### Sources
|
||||
|
||||
|
||||
@@ -6,58 +6,76 @@ Renders Markdown-inspired text definitions to create and modify diagrams dynamic
|
||||
1. [Live editor](#live-editor)
|
||||
1. [Diagrams](#diagrams)
|
||||
1. [Flowchart (a.k.a. graph)](#flowchart-aka-graph)
|
||||
1. [Commit flow](#commit-flow)
|
||||
1. [Sequence diagram](#sequence-diagram)
|
||||
1. [Class diagram](#class-diagram)
|
||||
1. [State diagram](#state-diagram)
|
||||
1. [Gantt diagram](#gantt-diagram)
|
||||
1. [Pie chart](#pie-chart)
|
||||
1. [Git commit flow](#git-commit-flow)
|
||||
1. [Further readings](#further-readings)
|
||||
|
||||
## Live editor
|
||||
|
||||
Mermaid.js offers a [live editor] to check the graph code.
|
||||
Mermaid.js offers a [live editor] to check the diagrams' code.
|
||||
|
||||
## Diagrams
|
||||
|
||||
Code blocks for diagrams can either:
|
||||
|
||||
- start with ` ```mermaid ` and finish with ` ``` `, or
|
||||
- start with `:::mermaid` and finish with `:::`
|
||||
|
||||
but are apparently only rendered in [Markdown] when using the ` ``` ` notation:
|
||||
|
||||
| Code delimiter | Gitea | Github | Gitlab |
|
||||
| -------------- | ----- | ------ | ------ |
|
||||
| ` ```mermaid ` | ✓ | ✓ | ✓ |
|
||||
| `:::mermaid` | ✗ | ✗ | ✗ |
|
||||
|
||||
### Flowchart (a.k.a. graph)
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
graph TB
|
||||
sq[Square shape] --> ci((Circle shape))
|
||||
flowchart TB
|
||||
|
||||
subgraph A
|
||||
sq[Square shape] --> ci((Circle shape))
|
||||
|
||||
subgraph A
|
||||
od>Odd shape]-- Two line<br/>edge comment --> ro
|
||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
|
||||
di==>ro2(Rounded square shape)
|
||||
end
|
||||
end
|
||||
|
||||
%% Notice that no text in shape are added here instead that is appended further down
|
||||
e --> od3>Really long text with linebreak<br>in an Odd shape]
|
||||
%% Notice how text in shapes is appended further down
|
||||
e --> od3>Really long text with linebreak<br>in an Odd shape]
|
||||
|
||||
%% Comments after double percent signs
|
||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
|
||||
%% Comments start with double percent signs
|
||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-\*ز)
|
||||
|
||||
cyr[Cyrillic]-->cyr2((Circle shape Начало));
|
||||
cyr[Cyrillic]-->cyr2((Circle shape Начало));
|
||||
|
||||
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
|
||||
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
||||
class sq,e green
|
||||
class di orange
|
||||
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
|
||||
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
||||
class sq,e green
|
||||
class di orange
|
||||
:::
|
||||
```
|
||||
|
||||
:::mermaid
|
||||
graph TB
|
||||
```mermaid
|
||||
flowchart TB
|
||||
sq[Square shape] --> ci((Circle shape))
|
||||
|
||||
subgraph A
|
||||
od>Odd shape]-- Two line<br/>edge comment --> ro
|
||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
|
||||
di==>ro2(Rounded square shape)
|
||||
od>Odd shape]-- Two line<br/>edge comment --> ro
|
||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
|
||||
di==>ro2(Rounded square shape)
|
||||
end
|
||||
|
||||
%% Notice that no text in shape are added here instead that is appended further down
|
||||
%% Notice how text in shapes is appended further down
|
||||
e --> od3>Really long text with linebreak<br>in an Odd shape]
|
||||
|
||||
%% Comments after double percent signs
|
||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
|
||||
%% Comments start with double percent signs
|
||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-\*ز)
|
||||
|
||||
cyr[Cyrillic]-->cyr2((Circle shape Начало));
|
||||
|
||||
@@ -65,29 +83,199 @@ graph TB
|
||||
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
||||
class sq,e green
|
||||
class di orange
|
||||
:::
|
||||
|
||||
### Commit flow
|
||||
```
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
gitGraph:
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit id:"customId"
|
||||
commit tag:"customTag"
|
||||
checkout main
|
||||
commit type: HIGHLIGHT
|
||||
commit
|
||||
merge develop
|
||||
commit
|
||||
branch test
|
||||
commit
|
||||
graph LR
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
subgraph work
|
||||
C -->|One| D[Laptop]
|
||||
C --x|Two| E[iPhone]
|
||||
C -.->|Three| F[fa:fa-car Car]
|
||||
C ==> G((Bike))
|
||||
C --> J>TV]
|
||||
end
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
subgraph work
|
||||
C -->|One| D[Laptop]
|
||||
C --x|Two| E[iPhone]
|
||||
C -.->|Three| F[fa:fa-car Car]
|
||||
C ==> G((Bike))
|
||||
C --> J>TV]
|
||||
end
|
||||
```
|
||||
|
||||
### Sequence diagram
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
sequenceDiagram
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
John-->>-Alice: I feel great!
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
John-->>-Alice: I feel great!
|
||||
```
|
||||
|
||||
### Class diagram
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
```
|
||||
|
||||
### State diagram
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
### Gantt diagram
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task :24d
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
### Pie chart
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
```
|
||||
|
||||
### Git commit flow
|
||||
|
||||
```md
|
||||
:::mermaid
|
||||
gitGraph:
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit id:"customId"
|
||||
commit tag:"customTag"
|
||||
checkout main
|
||||
commit type: HIGHLIGHT
|
||||
commit
|
||||
merge develop
|
||||
commit
|
||||
branch test
|
||||
commit
|
||||
:::
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gitGraph:
|
||||
commit
|
||||
branch develop
|
||||
@@ -101,7 +289,7 @@ gitGraph:
|
||||
commit
|
||||
branch test
|
||||
commit
|
||||
:::
|
||||
```
|
||||
|
||||
## Further readings
|
||||
|
||||
@@ -116,10 +304,12 @@ gitGraph:
|
||||
-->
|
||||
|
||||
<!-- Upstream -->
|
||||
|
||||
[documentation]: https://mermaid.js.org/intro/
|
||||
[examples]: https://mermaid.js.org/syntax/examples.html
|
||||
[live editor]: https://mermaid.live
|
||||
|
||||
<!-- Knowledge base -->
|
||||
|
||||
[markdown]: markdown.md
|
||||
[mermaid-cli]: mermaid-cli.md
|
||||
|
||||
Reference in New Issue
Block a user