chore: added graphs for markdown

knowledge base/markdown.md

@@ -4,11 +4,212 @@ ReadMe's Markdown engine.
 
 ## Table of contents <!-- omit in toc -->
 
+1. [Folded content](#folded-content)
+1. [Diagrams](#diagrams)
+   1. [Flow chart A.K.A. graph](#flow-chart-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. [Troubleshooting](#troubleshooting)
    1. [Escape the backtick character](#escape-the-backtick-character)
+   1. [VS Code and mermaid graph in Markdown preview](#vs-code-and-mermaid-graph-in-markdown-preview)
 1. [Further readings](#further-readings)
 1. [Sources](#sources)
 
+## Folded content
+
+Use a `<details>` HTML tag:
+
+```md
+<details>
+  <summary>Fold/Open</summary>
+  Folded content
+</details>
+```
+
+## Diagrams
+
+See [mermaid.js], [The magical Markdown I bet you don't know] and [slaise/High-level-Markdown].
+
+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
+
+```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
+```
+
 ## Troubleshooting
 
 ### Escape the backtick character
@@ -20,6 +221,10 @@ Render it in an inline code block using double backticks instead of single backt
 Alternatively, use a code block. This will wrap everything in a `<pre>` HTML tag.  
 To do this, either indent 4 spaces to start a code block, or use fenced code blocks if supported.
 
+### VS Code and mermaid graph in Markdown preview
+
+Install and enable [`bierner.markdown-mermaid`][bierner.markdown-mermaid]'s extension.
+
 ## Further readings
 
 - Official [documentation]
@@ -31,15 +236,19 @@ All the references in the [further readings] section, plus the following:
 
 - [Escaping Backticks]
 - [Escaping backtick in Markdown]
+- [The magical Markdown I bet you don't know]
+- [slaise/High-level-Markdown]
 
 <!-- project's references -->
-
-<!-- internal references -->
-
 [documentation]: https://docs.readme.com/rdmd/docs
 
-<!-- external references -->
+<!-- internal references -->
+[mermaid.js]: mermaid.js.md
 
+<!-- external references -->
+[bierner.markdown-mermaid]: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
 [escaping backtick in markdown]: https://www.growingwiththeweb.com/2015/06/escaping-backtick-in-markdown.html
 [escaping backticks]: https://www.markdownguide.org/basic-syntax/#escaping-backticks
 [linguist supported language syntax list]: https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
+[slaise/high-level-markdown]: https://github.com/slaise/High-level-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-cli.md

@@ -0,0 +1,36 @@
+# mermaid-cli
+
+CLI for mermaid. Takes a mermaid definition file as input and generates an `svg`, `png` or `pdf` file as output.
+
+## Table of contents <!-- omit in toc -->
+
+1. [TL:DR](#tldr)
+1. [Further readings](#further-readings)
+1. [Sources](#sources)
+
+## TL:DR
+
+```sh
+# Installation.
+npm install -g '@mermaid-js/mermaid-cli'
+
+# Convert mermaid files to SVG.
+mmdc -i 'input.mmd' -o 'output.svg'
+```
+
+## Further readings
+
+- [mermaid.js]
+
+## Sources
+
+All the references in the [further readings] section, plus the following:
+
+<!-- project's references -->
+[github]: https://github.com/mermaid-js/mermaid-cli
+
+<!-- internal references -->
+[further readings]: #further-readings
+[mermaid.js]: mermaid.js.md
+
+<!-- external references -->

knowledge base/mermaid.js.md

@@ -0,0 +1,29 @@
+# mermaid.js
+
+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. [Further readings](#further-readings)
+
+## Live editor
+
+Mermaid.js offers a [live editor] to check the graph code.
+
+## Further readings
+
+- Official [documentation]
+- [Markdown]
+- [mermaid-cli]
+
+<!-- project's references -->
+[documentation]: https://mermaid.js.org/intro/
+[live editor]: https://mermaid.live
+
+<!-- internal references -->
+[markdown]: markdown.md
+[mermaid-cli]: mermaid-cli.md
+
+<!-- external references -->