Add LateX and mermaid flowcharts to the contributing guide.

30.about/10.contributing/page.en.md

@@ -21,7 +21,7 @@ slug: contributing
 
 ```mermaid
 
-graph LR
+graph RL
 
 User(Teacher)
 Website[M3P2 Website]
@@ -50,34 +50,40 @@ The point of Markdown (compared to raw HTML) is the _readability of the source_.
 
 ### Markdown Cheatsheet
 
-```
-# Header like h1
-## Header like h2
-…
-###### Header like h6
-
-_italic_
-__underlined__
-*bold*
-**strong**
-~~strike-through~~
-
-Go [there](https://…)
-[Current chapter](.)
-[Parent chapter](..)
-[Sibling chapter](../another-chapter)
-[Child chapter](chapter)
-[Anchor in the page](#slug-of-header)
-
-![Description of the image](local-image.png)
-
-! blue notice
-!! green notice
-!!! orange notice
-!!!! red notice
-!!!!
-!!!! another line on the red notice
-```
+    # Header like h1
+    ## Header like h2
+    …
+    ###### Header like h6
+    
+    _italic_
+    __underlined__
+    *bold*
+    **strong**
+    ~~strike-through~~
+    
+    `inline->code()`
+    
+    ```python
+    import antigravity
+    antigravity.apply()
+    ```
+    
+    
+    Go [there](https://…)
+    [Current chapter](.)
+    [Parent chapter](..)
+    [Sibling chapter](../another-chapter)
+    [Child chapter](chapter)
+    [Anchor in the page](#slug-of-header)
+    
+    ![Description of the image](local-image.png)
+    
+    ! blue notice
+    !! green notice
+    !!! orange notice
+    !!!! red notice
+    !!!!
+    !!!! another line on the red notice
 
 > More at Gitlab's [Markdown documentation](https://docs.gitlab.com/ee/user/markdown.html).
 
@@ -101,7 +107,96 @@ For example, the following
 
 yields $E = m \cdot c^2$
 
-!!!! Make sure you add trailing spaces to expressions like `\cdot`,
+!!!! Make sure to *add trailing spaces* to expressions like `\cdot`,
 !!!! or you'll end up with broken formulas.
-!!!!
-!!!! Generous spacing also improves the readability of the source, and costs nothing.
+
+
+
+#### Multiline
+
+The preferred way is to use a `math` code block, like so:
+
+
+    ```math
+    \overrightarrow{F}_{L} = q \cdot (
+        \overrightarrow{E}
+        +
+        \overrightarrow{v}
+        \wedge
+        \overrightarrow{B}
+    )
+    ```
+
+The `math` code block also works in GitLab's preview.
+
+_You can also use the `$$` syntax, but GitLab won't understand it._
+
+!! Generous spacing greatly improves the readability of the source.
+
+
+
+### Flowcharts
+
+> _Any resemblance to real persons, living or dead, is purely coincidental._
+
+```mermaid
+graph TB
+  subgraph M3P2
+    Draft[Draft]
+    File[File]
+    Website[Website]
+    Pipeline[Pipeline]
+  end
+
+  Sponsor((Sponsor))
+  Teacher((Teacher))
+  Student((Student))
+  Engineer((Engineer))
+
+  Student --> |reads| Website
+  Student --> |loves| Sponsor
+  Student --> |respects| Teacher
+  Student --> |complements| Draft
+  Teacher -.- Engineer
+  Sponsor --> |feeds| Teacher
+  Sponsor --> |feeds| Engineer
+  Teacher --> |reviews| Draft
+  File --> |triggers| Pipeline
+  Draft -.- File
+  Pipeline --> |updates| Website
+  Teacher --> |authors| File
+  Engineer --> |specifies| File
+  Engineer --> |maintains| Pipeline
+  Engineer --> |hosts| Website
+```
+
+    ```mermaid
+    graph TB
+      subgraph M3P2
+        Draft[Draft]
+        File[File]
+        Website[Website]
+        Pipeline[Pipeline]
+      end
+    
+      Sponsor((Sponsor))
+      Teacher((Teacher))
+      Student((Student))
+      Engineer((Engineer))
+    
+      Student --> |reads| Website
+      Student --> |loves| Sponsor
+      Student --> |respects| Teacher
+      Student --> |complements| Draft
+      Teacher -.- Engineer
+      Sponsor --> |feeds| Teacher
+      Sponsor --> |feeds| Engineer
+      Teacher --> |reviews| Draft
+      File --> |triggers| Pipeline
+      Draft -.- File
+      Pipeline --> |updates| Website
+      Teacher --> |authors| File
+      Engineer --> |specifies| File
+      Engineer --> |maintains| Pipeline
+      Engineer --> |hosts| Website
+    ```