REAME.md 에 (Gantt diagram)간트차트 만드는 법
2020. 10. 27. 14:47ㆍ카테고리 없음
최종 결과물
![](https://blog.kakaocdn.net/dn/cUVx8w/btqLWHmCXhu/WchYipkBpgce2jmwEzOHg0/img.png)
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에 복붙하면, 다음과 같이 나온다.
![](https://blog.kakaocdn.net/dn/cYIdaa/btqLRjm4ZEb/K2z9kvPfYeeijsm9pb1yi1/img.png)
아래 코드를 쓰면
## 📖 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 ```
아래와 같이 나온다.
![](https://blog.kakaocdn.net/dn/cUVx8w/btqLWHmCXhu/WchYipkBpgce2jmwEzOHg0/img.png)