# 1. Mermaid

site

https://mermaid.js.org/

# 1.1. stateDiagram

# 1.1.1. 선택

Code

실행화면

stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0.9em

stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0.9em

# 1.1.2. 상태

# 1.1.2.1.

Code

실행화면

stateDiagram-v2
[*] --> First
First --> Second
First --> Third

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
    }
    state Third {
        [*] --> thi
        thi --> [*]
    }

stateDiagram-v2
    [*] --> First
    First --> Second
    First --> Third

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
    }
    state Third {
        [*] --> thi
        thi --> [*]
    }

# 1.2. Flowcharts

# 1.2.1.

Code

실행화면

flowchart TD
    Start --> Stop

flowchart TD
    Start --> Stop

TB - Top to bottom TD - Top-down/ same as top to bottom BT - Bottom to top RL - Right to left LR - Left to right Node shapes

Code

실행화면

flowchart LR
    Start --> Stop

flowchart LR
    Start --> Stop

# 텍스트추가

Code

실행화면

flowchart LR
    A-->|text|B

실행화면

flowchart LR
    A-->|text|B

# 노드추가

Code

실행화면

flowchart LR
   a --> b & c--> d

실행화면

flowchart LR
   a --> b & c--> d

Code

실행화면

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

실행화면

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

mermaid tip