Mermaid2Img
Editable example

Gantt Chart Mermaid Template and Example

Start from a clean Gantt Chart Mermaid example, adjust the syntax, preview the result, and export a polished PNG, SVG, PDF, or JPG image for docs, specs, or presentations.

Edit Gantt ChartBrowse templates

Try this Gantt Chart

gantt
  title Launch plan
  dateFormat  YYYY-MM-DD
  excludes weekends
  excludes 2026-07-04
  section Product
  Workspace polish :done, a1, 2026-06-01, 5d
  SEO pages        :active, a2, 2026-06-06, 7d
  AdSense          :a3, after a2, 4d

What is Gantt Chart Mermaid Template and Example?

Gantt Chart Mermaid Template and Example is an editable Mermaid example page. You can inspect the syntax, open it in the full workspace, and export the diagram as PNG, JPG, SVG, or PDF.

Clean Mermaid starter syntax

Live preview before export

PNG, JPG, SVG, and PDF output

Browser-only rendering

More than a Mermaid online preview

Mermaid2Img combines an online editor, templates, styling controls, local history, and multi-format export in one workspace for documentation, product, and engineering teams.

Live Mermaid syntax and layout preview
PNG, JPG, SVG, and PDF export in one place
22 diagram templates for common documentation workflows
Browser-side processing for private diagrams

Choose the right Mermaid export format

Mermaid2Img exports the same diagram in several formats so you can match the file to the job before downloading.

PNG
READMEs, tickets, docs, and chat

Use PNG when you need a crisp bitmap that works almost everywhere.

JPG
Small files and quick sharing

Use JPG for lightweight previews when transparency is not important.

SVG
Vector docs, websites, and design handoff

Use SVG when you need scalable lines, selectable text, or later styling.

PDF
Print, proposals, and presentation decks

Use PDF when the diagram needs to travel as a document artifact.

Syntax checklist

Start with `gantt`, then declare `dateFormat` before task rows.
Group related work with `section` lines.
Use task ids and `after id` to show dependencies.
Mermaid 11.16 lets long calendars use multiple `includes` or `excludes` lines.

How it works

1

Open the Gantt Chart example.

2

Replace the labels and relationships with your own content.

3

Export the diagram or continue editing in the workspace.

FAQ

What is a Gantt Chart in Mermaid?

A Gantt Chart is a Mermaid diagram type written as text syntax and rendered as a visual diagram for documentation and planning.

Can I export this Gantt Chart template as PNG?

Yes. You can export it as PNG, JPG, SVG, or PDF directly from Mermaid2Img.

Where does rendering happen?

Rendering and export are handled in your browser.

Edit and export online

Try the embedded editor below, or open the full workspace for advanced controls.

Loading editor...