Gantt chart generator for Mermaid

Write the plan, not the syntax

Mermaid's gantt syntax is compact but fussy: every task needs an id before you can point another task at it, tags have to come first in the spec, and one stray colon in a task name breaks the whole diagram. This tool takes the plan in the shape you already think about it — a task, when it starts, how long it takes — and writes the Mermaid source for you.

Everything runs locally in your browser. The task list never leaves your machine.

The task table

One task per line, up to five columns, separated by a pipe (|), a tab, or a comma:

name | start | duration | tags | id

• name — the label shown on the bar. Required. A colon in the name is replaced with a hyphen, because Mermaid uses the colon to separate the label from the task spec.
• start — a date in your chosen date format, after <task> to begin when another task ends, or left empty to follow the task on the line above. Chain several with after Design, Research.
• duration — a length such as 5d, 2w, 36h, 1.5d, or a bare number meaning days. You can also give an end date instead, or until <task> to run right up to another task's start.
• tags — any of done, active, crit, milestone, space separated. Milestones with no duration become zero-length markers automatically.
• id — optional. An id is derived from the task name, so after Visual design just works; supply your own only when you want a short handle.

A line starting with section or ## opens a section. Blank lines, and lines starting with #, // or %%, are ignored — so you can keep notes in the plan.

Worked example

Input:

section Design
Wireframes | 2026-03-02 | 5d | done
Visual design | after Wireframes | 1w | active
Design sign-off | after Visual design | | milestone

with the title Q2 launch plan, axis format %b %d, tick interval 1week and skip weekends turned on, produces:

gantt
    title Q2 launch plan
    dateFormat YYYY-MM-DD
    axisFormat %b %d
    tickInterval 1week
    excludes weekends
    section Design
        Wireframes      :done, wireframes, 2026-03-02, 5d
        Visual design   :active, visual_design, after wireframes, 1w
        Design sign-off :milestone, design_sign_off, after visual_design, 0d

Paste that into a GitHub or GitLab comment, a Markdown file, a Notion code block, an Obsidian note, or any Mermaid-compatible viewer and it renders as a timeline. Turn on Wrap in a Markdown mermaid fence to get the surrounding ```mermaid block too.

Chart options

Limits and edge cases

• Up to 500 tasks, 100 sections and 2 MB of input.
• Dependencies must point at a task defined earlier in the list. Mermaid resolves after chains top-down, so a forward reference would silently render at the wrong date — you get an error naming both lines instead.
• Dates are checked against the format you picked. 03/02/2026 under YYYY-MM-DD is rejected, with the line number and the expected format.
• Repeated task names get distinct ids (review, review_2), so duplicates never collide.
• Nothing here computes calendar dates: durations, weekend skipping and after chains are resolved by Mermaid when it renders. That is also why excluded days lengthen a bar rather than move it.
• With the comma delimiter a task name containing a comma splits into extra columns — switch the delimiter to pipe for those.

FAQ