#Gantt Chart

A Gantt chart lays project tasks out on a calendar: each bar is a task with a start and a duration, grouped into sections. kymo's editor reads the Mermaid gantt syntax.

This page works like a quickstart: as you scroll, the pane on the right shows the source and the preview for the section you're reading. Copy grabs the source; ▶ Open in editor loads it into editor.kymo.studio (pick mermaid in the diagram-type dropdown when starting from scratch).

The example on the right shows the shape of every Gantt source: dateFormat declares how dates in the source are written, section groups rows, and each task is name : [id,] start, duration.

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

▶ Try it in the editor

#Task states

Tags before the dates change how a task is drawn: done (completed), active (in progress), crit (critical path, drawn red), and milestone (a single point rather than a bar). Tags combine — crit, done, … — and a task with none is simply planned.

gantt
    title Task states
    dateFormat YYYY-MM-DD
    section Critical path
        Completed crit task :crit, done, 2024-01-02, 24h
        Active crit task    :crit, active, 3d
        Future crit task    :crit, 5d
    section Normal
        Done task           :done, a1, 2024-01-06, 3d
        Active task         :active, a2, after a1, 3d
        Milestone           :milestone, m1, after a2, 0d

▶ Try it in the editor

#Dependencies

Give a task an id (the first field after the colon), and later tasks can start relative to it: after d1 starts when d1 ends — chains build schedules without hard-coding any dates. until <id> runs a task up to the start of another.

gantt
    dateFormat YYYY-MM-DD
    section Chain
        Design :d1, 2024-02-01, 4d
        Build  :b1, after d1, 6d
        Test   :after b1, 3d

▶ Try it in the editor

#Excluding days

excludes weekends (or named days like friday, or explicit YYYY-MM-DD dates) stretches tasks over the excluded days — the 7-day task in the example visibly skips the weekend band.

gantt
    dateFormat YYYY-MM-DD
    excludes weekends
    section Weekend-aware
        Long task :2024-01-04, 7d

▶ Try it in the editor

Status. Gantt previews on this page and in the editor use the Mermaid renderer; importing Gantt charts into kymo's own pipeline (native SVG/PNG/PDF rendering) is on the roadmap.

#See also

• Timeline — for a lighter chronology without durations.
• Kanban — for work-in-progress boards instead of schedules.