How to create diagrams and charts in Markdown?

flowchart LR
  node

flowchart LR
  square[square node]

flowchart LR
  round(round node)

flowchart LR
  stadium([pill node])

flowchart LR
  subroutine[[subroutine node]]

flowchart LR
  cylindrical[(cylindrical node)]

flowchart LR
  circular((circular node))

flowchart LR
  asymmetric>asymmetric node]

flowchart LR
  rhombus{rhombus node}

flowchart LR
  hexagon{{hexagon node}}

flowchart LR
  parallelogram_right[/right parallelogram node/]

flowchart LR
  parallelogram_left[\left parallelogram node\]

flowchart LR
  trapezoid_down[/down trapezoid node\]

flowchart LR
  trapezoid_up[\up trapezoid node/]

flowchart LR
  double_circular(((double circular node)))

flowchart LR
  A --- B

flowchart LR
  A -.- B

flowchart LR
  A === B

flowchart LR
  A --->|description| B

flowchart LR
  A --description-> B

flowchart LR
  A --> B

flowchart LR
  A --o B

flowchart LR
  A --x B

flowchart LR
  A <--> B
  C o--o D
  E x--x F

flowchart TB
  subgraph one[Label]
    A --> B
  end
  subgraph two
    C --> D
  end
  one --> two

flowchart LR
  A-->B
  B-->C
  C-->D
  click A href "http://localhost:3000"
  click B href "https://www.github.com"

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: Hi Bob
  Bob->>Alice: Hi Alice

sequenceDiagram
  actor Alice
  actor Bob
  Alice->>Bob: Hi Bob
  Bob->>Alice: Hi Alice

sequenceDiagram
  participant A as Alice
  participant J as John
  A->>J: Hello John, how are you?
  J->>A: Great!

sequenceDiagram
  A->B: Solid line without arrow
  A-->B: Dotted line without arrow
  A->>B: Solid line with arrowhead
  A-->>B: Dotted line with arrowhead
  A-xB: Solid line with a cross at the end
  A--xB: Dotted line with a cross at the end
  A-)B: Solid line with an open arrow at the end (async)
  A--)B: Dotted line with a open arrow at the end (async)

sequenceDiagram
  A->>B: B
  activate B
  B->>+A: B
  B->>-A: B
  A->>B: B
  deactivate A

classDiagram
  class BankAccount
  BankAccount : string owner
  BankAccount : number balance
  BankAccount : deposit(amount)
  BankAccount : withdrawal(amount)

classDiagram
  class Visibility
  Visibility: +string public
  Visibility: -string private
  Visibility: #string protected
  Visibility: ~string internal
  Visibility: string static$
  Visibility: getStatic()$
  Visibility: getAbstract()*

classDiagram
  classA --|> classB : Inheritance
  classC --* classD : Composition
  classE --o classF : Aggregation
  classG --> classH : Association
  classI -- classJ : Link(Solid)
  classK ..> classL : Dependency
  classM ..|> classN : Realization
  classO .. classP : Link(Dashed)

classDiagram
  Customer "1" --> "*" Ticket
  Student "1" --> "1..*" Course
  Galaxy --> "many" Star : Contains

stateDiagram-v2
direction LR
  [*] --> stateNode: transition
  stateNode --> [*]

stateDiagram-v2
direction LR
  [*] --> mainState: transition
  state mainState {
    direction LR
    [*] --> subState
    state subState {
      direction LR
      [*] --> subSubState
      subSubState --> [*]
    }
    subState --> [*]
  }
  mainState --> [*]

stateDiagram-v2
  state choice <<choice>>
  [*] --> condition
  condition --> choice
  choice --> false
  choice --> true

stateDiagram-v2
  state fork <<fork>>
  state join <<join>>
  [*] --> fork
  fork --> A
  fork --> B
  A --> join
  B --> join
  join --> [*]

stateDiagram-v2
  State1: The state with a note
  note right of State1
    Important information! You can write
    notes.
  end note
  State1 --> State2
  note left of State2 : This is the note to the left.

stateDiagram-v2
direction LR
[*] --> concurrency
state concurrency {
  direction TB
  [*] --> stateNode1: transition
  stateNode1 --> [*]
  --
  direction TB
  [*] --> stateNode2: transition
  stateNode2 --> [*]
}
concurrency --> [*]

erDiagram
  CAR ||--o{ NAMED-DRIVER : allows
  PERSON ||--o{ NAMED-DRIVER : is

erDiagram
  one ||--|| to-one : relationship

erDiagram
  zero-one |o--o| to-zero-one : relationship

erDiagram
  zero-more }o--o{ to-zero-more : relationship

erDiagram
  one-more }|--|{ to-one-more : relationship

erDiagram
  CAR ||--o{ NAMED-DRIVER : allows
  CAR {
    string registrationNumber
    string make
    string model
  }
  PERSON ||--o{ NAMED-DRIVER : is
  PERSON {
    string firstName
    string lastName
    int age
  }

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

gantt
  default :a, 2022-10-08, 1w
  critical :crit, b, 2022-10-08, 1d
  active :active, c, after b a, 1d
  critical active :crit, active, ca, after c, 1d
  milestone : milestone, m1, 17:49, 2min
  milestone : milestone, m2, 18:14, 1d

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

requirementDiagram
  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
  }

%%{ init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
gitGraph
  commit id: "initial commit"

  branch hom
  branch feat/button

  checkout feat/button
    commit id: "create button"
    commit id: "finish button"

  checkout hom
    merge feat/button

  checkout feat/button
    commit id: "fix hover"

  checkout hom
    merge feat/button

  checkout feat/button
    commit id: "fix accessibility"

  checkout hom
    merge feat/button

  checkout main
    merge hom