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. [Folded content](#folded-content)
1. [Images](#images) 1. [Images](#images)
1. [Diagrams](#diagrams) 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. [Math](#math)
1. [Alerts](#alerts) 1. [Alerts](#alerts)
1. [Troubleshooting](#troubleshooting) 1. [Troubleshooting](#troubleshooting)
@@ -83,189 +77,9 @@ Align in the center:
## Diagrams ## 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: See also [The magical Markdown I bet you don't know] and [slaise/High-level-Markdown].
- 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
```
## Math ## Math
@@ -347,6 +161,7 @@ Install and enable [`bierner.markdown-mermaid`][bierner.markdown-mermaid]'s exte
- [Linguist supported language syntax list] - [Linguist supported language syntax list]
- [Github's alert formatting][github formatting alerts] - [Github's alert formatting][github formatting alerts]
- [Live editor] - [Live editor]
- [Mermaid.js]
### Sources ### Sources

270
knowledge base/mermaid.js.md
View File

@@ -6,58 +6,76 @@ Renders Markdown-inspired text definitions to create and modify diagrams dynamic
1. [Live editor](#live-editor) 1. [Live editor](#live-editor)
1. [Diagrams](#diagrams) 1. [Diagrams](#diagrams)
1. [Flowchart (a.k.a. graph)](#flowchart-aka-graph) 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) 1. [Further readings](#further-readings)
## Live editor ## 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 ## 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) ### Flowchart (a.k.a. graph)
```md ```md
:::mermaid :::mermaid
graph TB flowchart TB
sq[Square shape] --> ci((Circle shape))
subgraph A sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape) di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape) di==>ro2(Rounded square shape)
end 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] e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs %% Comments start with double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز) 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 green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px; classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green class sq,e green
class di orange class di orange
::: :::
``` ```
:::mermaid ```mermaid
graph TB flowchart TB
sq[Square shape] --> ci((Circle shape)) sq[Square shape] --> ci((Circle shape))
subgraph A subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape) di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape) di==>ro2(Rounded square shape)
end 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] e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs %% Comments start with double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز) e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-\*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало)); cyr[Cyrillic]-->cyr2((Circle shape Начало));
@@ -65,29 +83,199 @@ graph TB
classDef orange fill:#f96,stroke:#333,stroke-width:4px; classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green class sq,e green
class di orange class di orange
::: ```
### Commit flow
```md ```md
:::mermaid :::mermaid
gitGraph: graph LR
commit A[Christmas] -->|Get money| B(Go shopping)
branch develop B --> C{Let me think}
checkout develop subgraph work
commit id:"customId" C -->|One| D[Laptop]
commit tag:"customTag" C --x|Two| E[iPhone]
checkout main C -.->|Three| F[fa:fa-car Car]
commit type: HIGHLIGHT C ==> G((Bike))
commit C --> J>TV]
merge develop end
commit
branch test
commit
::: :::
``` ```
```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 :::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: gitGraph:
commit commit
branch develop branch develop
@@ -101,7 +289,7 @@ gitGraph:
commit commit
branch test branch test
commit commit
::: ```
## Further readings ## Further readings
@@ -116,10 +304,12 @@ gitGraph:
--> -->
<!-- Upstream --> <!-- Upstream -->
[documentation]: https://mermaid.js.org/intro/ [documentation]: https://mermaid.js.org/intro/
[examples]: https://mermaid.js.org/syntax/examples.html [examples]: https://mermaid.js.org/syntax/examples.html
[live editor]: https://mermaid.live [live editor]: https://mermaid.live
<!-- Knowledge base --> <!-- Knowledge base -->
[markdown]: markdown.md [markdown]: markdown.md
[mermaid-cli]: mermaid-cli.md [mermaid-cli]: mermaid-cli.md