References

https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/

Mermaid graph diagram:

graph TD 
A[Client] --> B[Load Balancer] 
B --> C[Server1] 
B --> D[Server2]

	graph TD 
	A[Client] --> B[Load Balancer] 
	B --> C[Server1] 
	B --> D[Server2]

   graph TD 
	A[Client] -->|tcp_123| B
	B(Load Balancer) 
	B -->|tcp_456| C[Server1] 
	B -->|tcp_456| D[Server2]

	graph TD 
	A[Client] -->|tcp_123| B
	B(Load Balancer) 
	B -->|tcp_456| C[Server1] 
	B -->|tcp_456| D[Server2]

Basic flowchart

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

Basic flowchart 2

graph TB
    A[Square Rect] -- Link text --> B{Rhombus}
    B -->C
    B --> D{Rhombus}
    D --> E
    D --> F
    D --> G

graph TB
    A[Square Rect] -- Link text --> B{Rhombus}
    B -->C
    B --> D{Rhombus}
    D --> E
    D --> F
    D --> G

Timeline Example

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

Pie chart:

	
pie title NETFLIX
	 "Time spent looking for movie" : 90
	 "Time spent watching it" : 10

pie title NETFLIX
	 "Time spent looking for movie" : 90
	 "Time spent watching it" : 10

Mindmap Diagram

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
        Pen and paper
        Mermaid

Requirement Diagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

requirementDiagram
    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

Complete flowchart

Left to right(LR) graph orientation :
(options:
TB - top to bottom
TD - top-down/ same as top to bottom
BT - bottom to top
RL - right to left
LR - left to right )

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C["`**Markdown** string`"] --> D
	E -->F([Stadium-shaped node]}
	id1[[This is  subroutine shape]]
	id2[(Database)]
	id3((This is the text in the circle))
	id4 >asymmetric shape]
	id5{decision} 
	id6{{Hexagon}}
	id7[/Parallelogram/] 
	id8(((Double circle)))
	F-.->dottedLink;
	G-.dotted link with text .->H
	H == thick link ==> I
	J -- text --> K -- chaining link --> L
	M --o N
    N --x O
	O x--x P

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> E["`**Markdown** string`"] 
	E -->F([Stadium-shaped node])
	id1[[This is subroutine shape]]
	id2[(Database)]
	id3((This is the text in the circle))
	id4>asymmetric shape]
	id5{decision}
	id6{{Hexagon}}	
	id7[/Parallelogram/]
	id8(((Double circle)))
	F-.->dottedLink;
	G-.dotted link with text .->H
	H == thick link ==> I
	J -- text --> K -- chaining link --> L
	M --o N
    N --x O
	O x--x P

real flowchart

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

flowchart TD
%% this is a comment : TD means top down orientation of the chart
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

Styling

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

Applying CSS classes



code:
flowchart LR
    A-->B[AAABBB]
    B-->D
    class A cssClass

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart LR
    A-->B[AAABBB]
    B-->D
    class A mycssClass