간트 차트
간트 차트는 프로젝트 진행 상황과 프로젝트를 완료하는 데 필요한 시간을 보여주는 막대형 차트입니다. 간트 차트는 프로젝트 종단 요소와 요약 요소의 시작 날짜와 완료 날짜 사이의 일수를 표시합니다.
주의 사항
간트 차트는 각 계획된 작업을 왼쪽에서 오른쪽으로 연장되는 연속 막대로 기록합니다. x축은 시간을 나타내고, y축은 서로 다른 작업과 완료 순서를 기록합니다.
더 중요한 것은, 어떤 작업의 날짜, 일수 또는 특정 날짜 집합이 제외될 때 간트 차트는 작업 내부에 간격을 만들지 않고 동일한 일수만큼 오른쪽으로 연장하여 이러한 변경에 적응한다는 것입니다.
복사
임베드
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes 2026-03-16,2026-03-18,2026-03-19
section Section
A task :a1, 2026-03-07, 7d
Another task :after a1, 5d
그러나 제외된 날짜가 연속으로 시작되는 두 작업 사이에 있으면, 제외된 날짜는 차트에서 건너뛰고 공백으로 남으며, 이후 작업은 제외 날짜가 끝난 후 시작됩니다. 아래와 같습니다:
복사
임베드
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes Sunday, Friday, Saturday
section Section
A task :a1, 2026-03-07, 5d
Another task :after a1, 7d
간트 차트는 프로젝트 완료에 필요한 시간을 추적하는 데 유용하지만, 약간의 조정을 통해 "비근무일"을 그래픽으로 표현하는 데에도 사용할 수 있습니다.
문법
복사
임베드
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2026-01-06,2026-01-08
Active task :active, des2, 2026-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2026-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2026-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
작업은 기본적으로 연속적으로 진행되며, 다음 작업의 시작 날짜는 기본적으로 이전 작업의 종료 날짜입니다.
작업 제목과 그 메타데이터는 콜론(:)으로 구분되고, 메타데이터 항목 간에는 쉼표(,)로 구분됩니다. 유효한 레이블에는 active, done, crit 및 milestone 이 있습니다. 레이블은 선택 사항이지만 사용하는 경우 맨 앞에 두어야 합니다. 레이블을 처리한 후 나머지 메타데이터 항목은 다음과 같이 해석됩니다:
- 단일 항목을 지정하면 작업이 언제 종료되는지 결정합니다. 구체적인 날짜나 시간일 수도 있고 기간일 수도 있습니다. 기간을 지정하면 작업의 시작 날짜에 더하여 작업의 종료 날짜를 결정하며, 제외 사항을 고려합니다.
- 두 항목을 지정하면 뒤의 항목은 앞의 경우와 동일한 방식으로 해석됩니다. 첫 번째 항목은 명확한 시작 날짜나 시간(dateFormat 으로 형식 지정)을 지정하거나 after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] 로 다른 작업을 참조할 수 있습니다. 후자의 경우, 작업의 시작 날짜는 참조된 작업의 가장 늦은 종료 날짜에 따라 설정됩니다.
- 세 항목을 지정하면 마지막 두 항목은 앞의 경우에 따라 해석됩니다. 첫 번째 항목은 작업의 ID를 나타내며, later <taskID> 문법으로 참조할 수 있습니다.
| 메타데이터 문법 | 시작 날짜 | 종료 날짜 | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | dateformat 으로 해석된 startdate | dateformat 으로 해석된 endDate | taskID |
| <taskID>, <startDate>, <length> | dateformat 으로 해석된 startdate | 시작 날짜 + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | 이전에 지정된 작업 otherTaskID 의 종료 날짜 | dateformat 으로 해석된 endDate | taskID |
| <taskID>, after <otherTaskId>, <length> | 이전에 지정된 작업 otherTaskID 의 종료 날짜 | 시작 날짜 + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | dateformat 으로 해석된 startdate | 이전에 지정된 작업 otherTaskID 의 시작 날짜 | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | 이전에 지정된 작업 otherTaskID 의 종료 날짜 | 이전에 지정된 작업 otherTaskID 의 시작 날짜 | taskID |
| <startDate>, <endDate> | dateformat 으로 해석된 startdate | 使用 dateformat 解释的 enddate | 해당 없음 |
| <startDate>, <length> | dateformat 으로 해석된 startdate | 시작 날짜 + length | 해당 없음 |
| after <otherTaskID>, <endDate> | 이전에 지정된 작업 otherTaskID 의 종료 날짜 | 使用 dateformat 解释的 enddate | 해당 없음 |
| after <otherTaskID>, <length> | 이전에 지정된 작업 otherTaskID 의 종료 날짜 | 시작 날짜 + length | 해당 없음 |
| <startDate>, until <otherTaskId> | dateformat 으로 해석된 startdate | 이전에 지정된 작업 otherTaskID 의 시작 날짜 | 해당 없음 |
| after <otherTaskId>, until <otherTaskId> | 이전에 지정된 작업 otherTaskID 의 종료 날짜 | 이전에 지정된 작업 otherTaskID 의 시작 날짜 | 해당 없음 |
| <endDate> | 이전 작업의 종료 날짜 | 使用 dateformat 解释的 enddate | 해당 없음 |
| <length> | 이전 작업의 종료 날짜 | 시작 날짜 + length | 해당 없음 |
| until <otherTaskId> | 이전 작업의 종료 날짜 | 이전에 지정된 작업 otherTaskID 의 시작 날짜 | 해당 없음 |
기간 형식
<length> 를 지정할 때 숫자를 사용하고 뒤에 다음 단위 접미사 중 하나를 붙입니다:
| 단위 | 접미사 | 예시 |
|---|---|---|
| 밀리초 | ms | 50ms |
| 초 | s | 30s |
| 분 | m | 30m |
| 시간 | h | 4h |
| 일 | d | 7d |
| 주 | w | 3w |
| 월 | m | 2m |
| 년 | y | 1y |
소수 값도 지원합니다(예: 2.5d). 유효하지 않은 기간 표시(예: 3dX)는 무시되며, 작업은 기본 기간이 0이 됩니다.
간단하게 하기 위해 이 표는 after 문법을 사용하여 나열된 여러 작업을 표시하지 않습니다. 다음은 예입니다:
복사
임베드
gantt
apple :a, 2026-07-20, 1w
banana :crit, b, 2026-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2026-07-20, until b c
제목
title 은 간트 차트 상단에 표시되어 전체 차트를 설명하는 선택적 문자열입니다.
제외
excludes 는 선택적 속성으로, 특정 날짜(YYYY-MM-DD 형식), 요일(예: "sunday") 또는 "weekends" 를 허용하지만 "weekdays" 라는 단어는 사용할 수 없습니다. 이러한 날짜는 차트에 표시되고 작업의 기간 계산에서 제외됩니다. 즉, 작업 지속 기간에 제외된 날짜가 포함되면 제외된 일수가 작업 종료 시간에 더해져 작업의 지속 기간이 코드에 지정된 것과 일치하도록 보장합니다.
주말
주말을 제외할 때 주말을 금요일과 토요일, 또는 토요일과 일요일로 설정할 수 있습니다. 기본적으로 주말은 토요일과 일요일입니다. 주말 시작 요일을 정의하려면 새 줄에 선택적 속성 weekend 를 추가하고 뒤에 friday 또는 saturday 를 붙입니다.
복사
임베드
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat Букмекерлар-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2026-01-01, 30d
Another task :after a1, 20d
섹션 선언
차트를 여러 섹션으로 나누어 프로젝트의 다른 부분(예: 개발 및 문서)을 분리할 수 있습니다.
이를 위해 줄 시작 부분에 section 문법을 사용하고 이름을 지정합니다. 전체 차트의 제목과 달리 이 이름은 필수입니다.
마일스톤
차트에 마일스톤을 추가할 수 있습니다. 마일스톤은 특정 시점을 나타내고 milestone 문법으로 식별되기 때문에 작업과 다릅니다. 다음은 마일스톤을 사용하는 예입니다: 마일스톤의 정확한 위치는 마일스톤의 시작 날짜와 작업의 기간으로 결정되며, 아래와 같습니다:
복사
임베드
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49, 2m
Task A : 10m
Task B : 5m
Final milestone : milestone, m2, 18:08, 4m
수직 표시
vert 는 간트 차트에 수직선을 추가하여 마감일, 중요한 이벤트 또는 검사점과 같은 중요한 날짜를 쉽게 강조 표시하는 것을 나타냅니다. 이러한 표시는 전체 차트에 걸쳐 연장되며 제공한 날짜에 따라 위치가 지정됩니다. 마일스톤과 달리 수직 표시는 한 행을 차지하지 않습니다. 이들은 순전히 시각적 참조점으로, 타임라인을 분해하는 데 도움이 되어 중요한 순간을 더 쉽게 식별할 수 있게 합니다.
복사
임베드
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m
날짜 설정
dateFormat 은 간트 차트 요소의 날짜 입력 형식을 정의하고, axisFormat 은 차트를 렌더링할 때의 날짜 출력 형식을 정의합니다.
입력 날짜 형식
기본 입력 날짜 형식은 YYYY-MM-DD 이며, dateFormat 을 사용자 정의할 수 있습니다.
복사
임베드
dateFormat YYYY-MM-DD
다음 형식 옵션을 지원합니다:
| 输入 | 예시 | 설명 |
|---|---|---|
| YYYY | 2026 | 4자리 숫자 연도 |
| YY | 26 | 2자리 숫자 연도 |
| Q | 1..4 | 분기 숫자 |
| M MM | 1..12 | 월 숫자 |
| D DD | 1..31 | 한 달 중의 특정 날 |
| Do | 1st..31st | 서수가 있는 한 달 중의 특정 날 |
| DDD DDDD | 1..365 | 일 년 중의 특정 날 |
| X | 1410715640.579 | Unix 타임스탬프 |
| x | 1410715640579 | Unix 밀리초 타임스탬프 |
| H HH | 0..23 | 24시간 시간 |
| h hh | 1..12 | 12시간 시간, a A 와 함께 사용 |
| a A | am pm | 오전 또는 오후 |
| m mm | 0..59 | 분 |
| s ss | 0..59 | 초 수 |
| S | 0..9 | 10분의 1초 |
| SS | 0..99 | 100분의 1초 |
| SSS | 0..999 | 1000분의 1초 |
| Z ZZ | +12:00 | UTC 와의 오프셋, 형식은 +-HH:mm, +-HHmm 또는 Z |
좌표축의 출력 날짜 형식
기본 출력 날짜 형식은 YYYY-MM-DD 입니다. axisFormat 을 사용자 정의할 수 있으며, 예를 들어 2026-Q1 은 2026년의 1분기를 나타냅니다.
복사
임베드
axisFormat %Y-%m-%d
다음 형식 문자열을 지원합니다:
| 형식,정의 | |
|---|---|
| %a | 요일의 약어 |
| %A | 요일의 전체 이름 |
| %b | 월의 약어 |
| %B | 월의 전체 이름 |
| %c | 현지화된 날짜와 시간 |
| %d | 날짜, 십진수 [01,31] |
| %e | 날짜, 공백으로 채워진 십진수 [1,31], %_d 에 해당 |
| %H | 시간(24시간제), 십진수 [00,23] |
| %I | 시간(12시간제), 십진수 [01,12] |
| %j | 일 년 중의 날짜, 십진수 [001,366] |
| %m | 월, 십진수 [01,12] |
| %M | 분, 십진수 [00,59] |
| %L | 밀리초, 십진수 [000, 999] |
| %p | 오전 또는 오후 |
| %S | 초, 십진수 [00,59] |
| %U | 일 년 중의 주(일요일을 한 주의 첫날로 함), 십진수 [00,53] |
| %w | 요일, 공백으로 채워진 십진수 [0,6], 여기서 0 은 일요일을 나타냄 |
| %W | 일 년 중의 주(월요일을 한 주의 첫날로 함), 십진수 [00,53] |
| %x | 현지화된 날짜 표현, 예: 2026-09-18 |
| %X | 현지화된 시간 표현, 예: 14:30:00 |
| %y | 세기가 없는 연도, 십진수 [00,99], 예를 들어 26 은 2026년을 나타냄 |
| %Y | 세기가 있는 연도, 십진수 |
| %Z | 시간대 이름 약어, 예: "-0700" |
| %% | 퍼센트 기호 % 자체를 표시하는 데 사용되는 이스케이프 문자 |
좌표축 눈금
기본 출력 눈금은 자동입니다. tickInterval 을 사용자 정의할 수 있으며, 예를 들어 1day 또는 1week 입니다.
복사
임베드
tickInterval 1day
패턴은 입니다.
복사
임베드
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
주 기반 tickInterval 은 기본적으로 일요일부터 시작합니다. tickInterval 시작 요일을 다른 평일로 지정하려면 weekday 옵션을 사용하세요. 코드는 다음과 같습니다:
복사
임베드
gantt
tickInterval 1week
weekday monday
컴팩트 모드 출력
컴팩트 모드를 사용하면 같은 행에 여러 작업을 표시할 수 있습니다. 앞의 YAML 설정을 통해 그래프의 표시 모드를 제어하여 간트 차트에 컴팩트 모드를 활성화합니다.
복사
임베드
---
displayMode: compact
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2026-01-01, 30d
Another task :a2, 2026-01-20, 25d
Another one :a3, 2026-02-10, 20d
간트 차트에 주석을 입력할 수 있으며 파서는 해당 주석을 무시합니다. 주석은 한 줄을 차지해야 하며 %% (이중 퍼센트 기호)로 시작해야 합니다. 주석이 시작된 후 다음 줄바꿈 문자까지의 모든 텍스트는 모든 차트 문법을 포함하여 주석으로 간주됩니다.
복사
임베드
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
오늘 표시
현재 날짜의 표시에 스타일을 설정하거나 해당 표시를 숨길 수 있습니다. 스타일을 설정하려면 todayMarker 키에 값을 추가합니다.
복사
임베드
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
표시를 숨기려면 todayMarker 를 off 로 설정합니다.
복사
임베드
todayMarker off
예시
막대형 간트 차트
복사
임베드
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
타임라인(주석, CSS 및 사전 구성 포함)
복사
임베드
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
# theme: forest
# themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers:
#item36 { fill: CadetBlue }
// Custom marker workaround CSS from forum (below)
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
---
gantt
title Timeline - Gantt Sampler
dateFormat YYYY
axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade
section Issue19062
71 : item71, 1900, 1930
section Issue19401
36 : item36, 1913, 1935
section Issue1300
94 : item94, 1910, 1915
5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
