Markdown 문서 환경에서 사용가능한 공식 Diagram Library, mermaid 사용법에 대하여 많이 쓰는 요소들 위주로 정리한 문서이다.

Graphs

Direction

• Top to Bottom

  graph TB
  a --> b
  

  코드 :

  ```mermaid
  graph TB
  a --> b
  ```
  

• Bottom to Top

  graph BT
  a --> b
  

  코드 :

  ```mermaid
  graph BT
  a --> b
  ```
  

• Left to Right

  graph LR
  a --> b
  

  코드 :

  ```mermaid
  graph LR
  a --> b
  ```
  

• Right to Left

  graph RL
  a --> b
  

  코드 :

  ```mermaid
  graph RL
  a --> b
  ```
  

Shapes

• Normal Box

  graph TD
  boxa[Normal Box with Text]
  

  코드 :

  ```mermaid
  graph TD
  boxa[Normal Box with Text]
  ```
  

• Phill Shaped Box

  graph TD
  boxa([Normal Box with Text])
  

  코드 :

  ```mermaid
  graph TD
  boxa([Normal Box with Text])
  ```
  

• Box with Rounded edges

  graph TD
  boxa(Normal Box with Text)
  

  코드 :

  ```mermaid
  graph TD
  boxa(Normal Box with Text)
  ```
  

• Subroutine shaped Box

  graph TD
  boxa[[Normal Box with Text]]
  

  코드 :

  ```mermaid
  graph TD
  boxa[[Normal Box with Text]]
  ```
  

• Cylindrical Shape

  graph TD
  boxa[(Normal Box with Text)]
  

  코드 :

  ```mermaid
  graph TD
  boxa[(Normal Box with Text)]
  ```
  

• Circle

  graph TD
  boxa((Normal Box with Text))
  

  코드 :

  ```mermaid
  graph TD
  boxa((Normal Box with Text))
  ```
  

• Asymmetric Shape

  graph TD
  boxa>Normal Box with Text]
  

  코드 :

  ```mermaid
  graph TD
  boxa>Normal Box with Text]
  ```
  

• Rhombus

  graph TD
  boxa{Normal Box with Text}
  

  코드 :

  ```mermaid
  graph TD
  boxa{Normal Box with Text}
  ```
  

• Hexagon

  graph TD
  boxa{{Normal Box with Text}}
  

  코드 :

  ```mermaid
  graph TD
  boxa{{Normal Box with Text}}
  ```
  

• Parallelogram

  graph TD
  boxa[/Normal Box with Text/]
  

  코드 :

  ```mermaid
  graph TD
  boxa[/Normal Box with Text/]
  ```
  

• Parallelogram Alternative

  graph TD
  boxa[\Normal Box with Text\]
  

  코드 :

  ```mermaid
  graph TD
  boxa[\Normal Box with Text\]
  ```
  

• Trapezoid

  graph TD
  boxa[/Normal Box with Text\]
  

  코드 :

  ```mermaid
  graph TD
  boxa[/Normal Box with Text\]
  ```
  

• Trapezoid Alternative

  graph TD
  boxa[\Normal Box with Text/]
  

  코드 :

  ```mermaid
  graph TD
  boxa[\Normal Box with Text/]
  ```
  

Links

• Arrow head

  graph LR
  a-->b
  

  코드 :

  ```mermaid
  graph LR
  a-->b
  ```
  

• Open Link

  graph LR
  a---b
  

  코드 :

  ```mermaid
  graph LR
  a---b
  ```
  

• Text on Link

  graph LR
  a--text-->b
  

  코드 :

  ```mermaid
  graph LR
  a--text-->b
  ```
  

• Dotted Link

  graph LR
  a-.->b
  

  코드 :

  ```mermaid
  graph LR
  a-.->b
  ```
  

• Dotted Link with Text

  graph LR
  a-.Text.->b
  

  코드 :

  ```mermaid
  graph LR
  a-.Text.->b
  ```
  

• Thick Link

  graph LR
  a==>b
  

  코드 :

  ```mermaid
  graph LR
  a==>b
  ```
  

PieChart

pie title Fruit
"Apple": 50
"Banana": 40
"Strawberry": 10

코드 :

```mermaid
pie title Fruit
"Apple": 50
"Banana": 40
"Strawberry": 10
```

GanttChart

gantt
title Becoming Productivity Programmer
dateformat DD-MM-YYYY
section Computer Science Study
MArkdown: a1, 04-07-2020, 3d
Diagrams: after a1, 07-07-2020, 2d
section Java Spring Development
example study 1: 01-07-2020, 5d
study 2: 07-07-2020, 12d

코드 :

```mermaid
gantt
title Becoming Productivity Programmer
dateformat DD-MM-YYYY
section Computer Science Study
MArkdown: a1, 04-07-2020, 3d
Diagrams: after a1, 07-07-2020, 2d
section Java Spring Development
example study 1: 01-07-2020, 5d
study 2: 07-07-2020, 12d
```

Sequence Diagram

sequenceDiagram
Alice ->> John : Hello John, How are you?
John ->> Alice : Great!

코드 :

```mermaid
sequenceDiagram
Alice ->> John : Hello John, How are you?
John ->> Alice : Great!
```

Class Diagram

classDiagram
class Animal
Vehicle <|-- Car

코드 :

```mermaid
classDiagram
class Animal
Vehicle <|-- Car
```

State Diagram

stateDiagram-v2
Push --> Move
Move --> Stop

코드 :

```mermaid
stateDiagram-v2
Push --> Move
Move --> Stop
```

stateDiagram-v2
[*] --> Move
Move --> [*]

코드 :

```mermaid
stateDiagram-v2
[*] --> Move
Move --> [*]
```

Entity Relationship Diagram

erDiagram
CUSTOMER ||--O{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : users

코드 :

```mermaid
erDiagram
CUSTOMER ||--O{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : users
```

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

코드 :

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