Published on

💻Markdown mermaid 사용법

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/]
```
  • 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
```