diff --git a/knowledge base/markdown.md b/knowledge base/markdown.md index 7c645ef..03790ca 100644 --- a/knowledge base/markdown.md +++ b/knowledge base/markdown.md @@ -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 diff --git a/knowledge base/mermaid.js.md b/knowledge base/mermaid.js.md index 334c555..e5714b6 100644 --- a/knowledge base/mermaid.js.md +++ b/knowledge base/mermaid.js.md @@ -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
edge comment --> ro di{Diamond with
line break} -.-> ro(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 - e --> od3>Really long text with linebreak
in an Odd shape] + %% Notice how text in shapes is appended further down + e --> od3>Really long text with linebreak
in an Odd shape] - %% Comments after double percent signs - e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) + %% Comments start with double percent signs + e((Inner / circle
and some odd
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
edge comment --> ro - di{Diamond with
line break} -.-> ro(Rounded
square
shape) - di==>ro2(Rounded square shape) + od>Odd shape]-- Two line
edge comment --> ro + di{Diamond with
line break} -.-> ro(Rounded
square
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
in an Odd shape] - %% Comments after double percent signs - e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) + %% Comments start with double percent signs + e((Inner / circle
and some odd
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: --> + [documentation]: https://mermaid.js.org/intro/ [examples]: https://mermaid.js.org/syntax/examples.html [live editor]: https://mermaid.live + [markdown]: markdown.md [mermaid-cli]: mermaid-cli.md