chore(markdown): expand mermaid graphs a little

knowledge base/markdown.md

@@ -9,7 +9,7 @@ Compare Markdown implementations at [babelmark].
 1. [Folded content](#folded-content)
 1. [Images](#images)
 1. [Diagrams](#diagrams)
-   1. [Flow chart A.K.A. graph](#flow-chart-aka-graph)
+   1. [Flowchart A.K.A. graph](#flowchart-aka-graph)
    1. [Sequence diagram](#sequence-diagram)
    1. [Class diagram](#class-diagram)
    1. [State diagram](#state-diagram)
@@ -90,34 +90,34 @@ Code blocks for diagrams can either:
 - start with ` ```mermaid ` and finish with ` ``` `, or
 - start with `:::mermaid` and finish with `:::`.
 
-### Flow chart A.K.A. graph
+### Flowchart A.K.A. graph
 
 ```md
 :::mermaid
 graph LR
-    A[Christmas] -->|Get money| B(Go shopping)
+  A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
+  B --> C{Let me think}
-    subgraph work
+  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
+  end
 :::
 ```
 
 ```mermaid
 graph LR
-    A[Christmas] -->|Get money| B(Go shopping)
+  A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
+  B --> C{Let me think}
-    subgraph work
+  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
+  end
 ```
 
 ### Sequence diagram
@@ -341,6 +341,7 @@ Install and enable [`bierner.markdown-mermaid`][bierner.markdown-mermaid]'s exte
 - [Extended syntax]
 - [Linguist supported language syntax list]
 - [Github's alert formatting][github formatting  alerts]
+- [Live editor]
 
 ### Sources
 
@@ -373,6 +374,7 @@ Install and enable [`bierner.markdown-mermaid`][bierner.markdown-mermaid]'s exte
 [escaping backticks]: https://www.markdownguide.org/basic-syntax/#escaping-backticks
 [github formatting  alerts]: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts
 [linguist supported language syntax list]: https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
+[live editor]: https://mermaid.live/edit
 [slaise/high-level-markdown]: https://github.com/slaise/High-level-Markdown
 [syntax highlighting in markdown]: https://support.codebasehq.com/articles/tips-tricks/syntax-highlighting-in-markdown
 [the magical markdown i bet you don't know]: https://medium.com/codex/the-magical-markdown-i-bet-you-dont-know-b51f8c049773

knowledge base/mermaid.js.md

@@ -3,27 +3,121 @@
 JavaScript based diagramming and charting tool.<br/>
 Renders Markdown-inspired text definitions to create and modify diagrams dynamically.
 
-## Table of contents <!-- omit in toc -->
-
 1. [Live editor](#live-editor)
+1. [Diagrams](#diagrams)
+   1. [Flowchart (a.k.a. graph)](#flowchart-aka-graph)
+   1. [Commit flow](#commit-flow)
 1. [Further readings](#further-readings)
 
 ## Live editor
 
 Mermaid.js offers a [live editor] to check the graph code.
 
+## Diagrams
+
+### Flowchart (a.k.a. graph)
+
+```md
+:::mermaid
+graph 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)
+  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]
+
+  %% Comments after double percent signs
+  e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
+
+  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
+:::
+```
+
+:::mermaid
+graph 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)
+  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]
+
+  %% Comments after double percent signs
+  e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
+
+  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
+:::
+
+### 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
+  checkout develop
+  commit id:"customId"
+  commit tag:"customTag"
+  checkout main
+  commit type: HIGHLIGHT
+  commit
+  merge develop
+  commit
+  branch test
+  commit
+:::
+
 ## Further readings
 
 - Official [documentation]
 - [Markdown]
 - [mermaid-cli]
+- [Examples]
 
 <!--
-  References
+  Reference
+  ═╬═Time══
   -->
 
 <!-- Upstream -->
 [documentation]: https://mermaid.js.org/intro/
+[examples]: https://mermaid.js.org/syntax/examples.html
 [live editor]: https://mermaid.live
 
 <!-- Knowledge base -->