brandon/oam
1
0
Fork 0
mirror of https://gitea.com/mcereda/oam.git synced 2026-02-09 05:44:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: move mermaid diagrams to their own article, use the correct code delimiter

Browse Source
This commit is contained in:
Michele Cereda
2024-07-13 22:53:52 +02:00
parent 805fdf2b63
commit 1dd0af785e
2 changed files with 233 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
knowledge base/markdown.md
View File

@@ -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