MKDocs Cheat Sheet (Heading 1)¶

General Documentation about MKDocs and Material Theme.

Heading 2¶

Heading 3¶

Heading 4¶

Heading 5¶

Heading 6¶

Formatting¶

This is a paragraph.

This is another paragraph.

Emphasis¶

This is italic. This is bold. This is ~~strikethrough~~. This is bold italic.

Blockquotes¶

This is a blockquote.

Horizontal Rule¶

Lists¶

Unordered¶

This is a list:

Item 1
Item 2

Ordered¶

Item 1
Item 2

Codeblock¶

Inline¶

This is a code block.

Codeblock without syntax highlighting¶

This is a code block:

def foo():
    print("Hello World")

Codeblock with syntax highlighting¶

This is a code block with syntax highlighting:

def foo():
    print("Hello World")

Codeblock with line numbers¶

This is a code block with line numbers:

def foo():
    print("Hello World")

Codeblock with line highlighting¶

This is a code block with line highlighting:

def foo():
    print("Hello")
    print("World")

Codeblock with variants¶

PythonCC++JavaJavaScriptPHPRubyBashGo

def foo():
    print("Hello World")

#include <stdio.h>
int main() {
    printf("Hello World");
    return 0;
}

#include <iostream>
int main() {
    std::cout << "Hello World";
    return 0;
}

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

console.log("Hello World");

<?php
echo "Hello World";
?>

puts "Hello World"

echo "Hello World"

package main
import "fmt"
func main() {
    fmt.Println("Hello World")
}

Links¶

Internet¶

This is a link to Google.

Image from Internet¶

This is a image of an apple

Images from folder¶

You can also import images from the docs/img folder:

Link to Pages or headings¶

You can also link to other pages Subpage or Headings Heading 2.

Tables¶

Simple Table¶

This is a table:

Header 1	Header 2
Cell 1	Cell 2
Cell 3	Cell 4

Aligned Table¶

This is a aligned table:

Header 1	Header 2
Cell 1	Cell 2
Cell 3	Cell 4

Note blocks¶

Note¶

Note

This is a note block.

Warning¶

Warning

This is a warning block.

Tip¶

Tip

This is a tip block.

Important¶

Example

This is an example block.

Success¶

Success

This is a success block.

Failure¶

Failure

This is a failure block.

Question¶

Question

This is a question block.

Mermaid Diagrams¶

You can find more documentation on mermaid here.

Flowchart¶

graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Server01]
    B --> D[Server02]

Sequence Diagram¶

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Gantt Diagram¶

gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      : 20h
    Add another diagram to demo page    : 48h

Class Diagram¶

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age

State Diagram¶

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Pie Chart¶

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

User journey¶

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

Git Graph¶

    gitGraph
       commit id: "1"
       commit id: "2"
       branch nice_feature
       checkout nice_feature
       commit id: "3"
       checkout main
       commit id: "4"
       checkout nice_feature
       branch very_nice_feature
       checkout very_nice_feature
       commit id: "5"
       checkout main
       commit id: "6"
       checkout nice_feature
       commit id: "7"
       checkout main
       merge nice_feature id: "customID" tag: "customTag" type: REVERSE
       checkout very_nice_feature
       commit id: "8"
       checkout main
       commit id: "9"

ER Diagram¶

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--|{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"