REAME.md 에 (Gantt diagram)간트차트 만드는 법

2020. 10. 27. 14:47카테고리 없음

최종 결과물 

 

 

 

readme.md 에서 mermaid 라이브러리를 지원하기 때문에 

그냥

```mermaid

~

```로 감싸주면 된다. 

아래의 코드는 mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/gantt.html 예시로, 

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```

readme.md에 복붙하면, 다음과 같이 나온다. 

 

 

아래 코드를 쓰면 

## 📖 Gantt :fire:

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section AI
    AI 기술테스트  : a1, 2020-10-14, 10d
    가상 얼굴 학습 및 환경세팅  : 2020-10-14, 10d
    얼굴 인식 개선 및 적용 : after a1, 10d
    가상 얼굴 이미지 생성 및 분류 : after a1, 4d

    section Front-end
    와이어프레임     :a1,2020-10-14  , 10d
    react 학습 및 적용 : after a1,  10d
    사진 업로드 및 설정 기능 :after a1 , 10d

    section Back-end
    django 학습 및 적용 : a1,2020-10-14 , 10d
    회원기능      :a2,after a1 , 10d
    친구기능      :after a1  ,10d
    결과 이미지저장,공유  : a3,after a2, 2d
    스티커 기능  : a4,after a3, 2d
```

아래와 같이 나온다.