How do I set task dependencies in a Mermaid Gantt chart?

Use the `after` keyword to reference a previous task ID: `Frontend : b1, after a1, 10d`. The task b1 will start immediately after task a1 ends. You can chain multiple dependencies. Task IDs are defined after the task name and before the start date. If no ID is specified, the task can't be referenced as a dependency.

How do I add milestones to a Mermaid Gantt chart?

Define a task with `milestone` as the type and `0d` as the duration: `Release : milestone, after testing, 0d`. Milestones render as diamond shapes on the Gantt timeline, making key delivery points or decision gates visually distinct from regular tasks. They're useful for marking version releases, board approvals, or go/no-go checkpoints.

What date formats does Mermaid Gantt support?

The most common format is `YYYY-MM-DD` (e.g. `2024-03-15`), declared at the top with `dateFormat YYYY-MM-DD`. Mermaid also supports `MM/DD/YYYY`, `DD-MM-YYYY`, and Unix timestamps. Durations are expressed as days (`10d`), hours (`8h`), or weeks (`2w`). Always declare `dateFormat` before any task dates.

How do I mark tasks as critical or completed?

Add status keywords before the task ID: `crit` marks a task as critical (renders in red), `done` marks it as complete (renders as filled), and `active` marks it as in-progress. You can combine them: `crit, done` for a completed critical task. These visual cues make Gantt charts useful for status reports and progress reviews.

Mermaid Gantt Chart Viewer

Render Mermaid Gantt charts instantly in your browser. Visualize project timelines and export to SVG or PNG. Free, no install.

Mermaid Code

Preview

Enter Mermaid code to preview your diagram

Gantt charts visualize project schedules by mapping tasks onto a time axis, showing start dates, durations, dependencies, and milestones. Mermaid's `gantt` syntax lets project managers and engineering leads draft a timeline as plain text and render it anywhere without a dedicated project management tool. AI assistants are increasingly used for project planning — developers prompt Claude or ChatGPT with 'Create a 6-week sprint plan for building a user authentication system' and receive a structured Mermaid Gantt chart. Pasting the output into Zolkit lets you review the plan, identify scheduling conflicts, and export it for a stakeholder presentation before committing to a project management tool. Mermaid Gantt charts support task sections, date-based positioning, sequential and parallel tasks with `after` dependencies, milestone markers, and tasks marked as `done`, `active`, or `crit` (critical path). Zolkit's viewer renders all of these constructs faithfully and exports the chart as SVG for exact reproduction in presentations and documentation.

Related Diagrams

← Mermaid Diagram Viewer Mermaid Timeline Diagram Viewer Mermaid Flowchart Viewer Mermaid Pie Chart Viewer

Free Online Mermaid Diagram Viewer and Exporter

Zolkit's Mermaid Diagram Viewer lets you paste any Mermaid code and see a rendered diagram instantly — no installation, no sign-up, no server uploads. Everything runs in your browser, making it the fastest way to verify AI-generated diagrams from Claude, ChatGPT, or Gemini. Supports all major Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, mind maps, Git graphs, pie charts, and timelines.

Instant Live Preview

Diagrams render automatically as you type, with a 300ms debounce so it never feels sluggish.

100% Private

All rendering happens in your browser using mermaid.js. Your code is never sent to any server.

Export SVG & PNG

Download your diagram as a crisp vector SVG or a high-resolution 2× PNG ready for docs and slides.

All Mermaid Diagram Types

Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, mind maps, Git graphs, and more.

AI Diagram Ready

Built for the AI era — directly preview diagrams generated by Claude, ChatGPT, Gemini, or any LLM.

Always Free

No account needed, no usage limits, no watermarks. Zolkit's Mermaid viewer is completely free forever.

How to Preview a Mermaid Diagram

1
Paste your Mermaid code into the editor on the left — you can copy it from an AI assistant or write it manually.
2
The diagram renders instantly in the preview panel on the right. If there's a syntax error, a message explains the issue.
3
Click 'Export SVG' or 'Export PNG' to download your diagram as a file ready for documentation, slides, or sharing.