[Git] .md에 mermaid 적용

Github .md 파일에 mermaid 적용하기

mermaid 공식 홈페이지

https://mermaid.js.org/syntax/flowchart.html

Flowcharts Syntax | Mermaid

 

작성 예시

```mermaid
flowchart LR

  subgraph feature [Branch feature]
    direction TB
    feature1[[feature/developer1]]
    feature2[[feature/developer2]]
    feature1 ~~~ feature2
  end

  subgraph develop [Branch develop]
    direction LR
    subgraph "Github Actions" 
        direction TB
        actions{{on push}}
    end 
    subgraph "Docker Registry"
        direction TB
        docker{{Docker images}}
    end 
  end

  feature1 --Pull Request--> actions
  feature2 --Pull Request--> actions
  actions --Upload Docker Images--> docker
```

 

미리 보기(VS Code)

 

VS Code에서 아래 Extension을 깔아야합니다.

 

Extension Name : Markdown Preview Mermaid Support

Extension ID : bierner.markdown-mermaid

 

 

그러면 실시간으로 markdown에 적용된 mermaid 미리보기를 할 수 있어 아주 편리합니다.

VS Code