Mermaid

	tab을 두번 누르면 위의 백틱(`)을 사용한 것과 같습니다. <span style="color:red">빨간 글씨</span> <span style="color:blue">파란 글씨</span> <span style="color:green">초록 글씨</span> <span style="color:yellow">노란 글씨</span> <span style="color:purple">보라 글씨</span>

이 블로그의 닉네임은?

poeun. 열린상태로 보여준다.

블로그를 더욱 알고 싶다면?

github.com/ingu627 로 이동한다.

각주 : ¹ 미주 : 1에 대한 내용 미주는 글 뒷 부분에 삽입합니다.

~~취소선~~

텍스트 뒤에 space bar를 두번 치고 enter를 누른 뒤 다음 텍스트를 씁니다.
다음
다음
다음 다음

😁 이것은 ==하이라이트== 입니다.

이 태그는 H₂O를 표현할 수 있습니다.

일단 실천하라. 그러면 힘을 지니게 될 것이다. -왈도 에머슨-

설명: 이해시키는 것을 목적으로 하는 진술 방법 ©

Watch out! Text~

빨간 글씨 파란 글씨 초록 글씨 노란 글씨 보라 글씨 빨간 글씨 파란 글씨 초록 글씨 노란 글씨 보라 글씨 글자는 흰색, 배경은 빨강, 사이즈는 150, 굵기는 b태그로 설정 star3

탭2번 이 태그는 H₂O를 표현할 수 있습니다 이 태그는 2²를 표현할수 있습니다. 이것은 ==하이라이트== 입니다.

sequenceDiagram A-->B: Works!

```mermaid sequenceDiagram A-->B: Workwows! ```

    flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    c3-->a2
    c4-->a2
    end

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

Markdown not work

``` mermaid flowchart LR Start --> Stop ``` ~~~ flowchart LR id1[This is the text in the box] ~~~ ~~~ mermaid flowchart LR Start --> Stop flowchart LR id1[This is the text in the box] ~~~

Comments

Write a comment ...

-->