Diagram
Gantt
Use a Gantt diagram to show tasks on a calendar with their order and duration, such as the phases of a project plan.
ganttgantt
First line
The first word of the source, gantt, names the Mermaid family; the rest follows Mermaid's syntax for it.
Alt text
Discovery runs interviews and synthesis in January; delivery runs design and build from late January to early March, ending with the launch milestone.
Markdown
A mermaid fence is a diagram; alt is its text alternative.OPF Markdown
# Gantt
```mermaid alt="Discovery runs interviews and synthesis in January; delivery runs design and build from late January to early March, ending with the launch milestone."
gantt
dateFormat YYYY-MM-DD
axisFormat %b %d
tickInterval 2week
section Discovery
Interviews :a1, 2027-01-04, 14d
Synthesis :a2, after a1, 7d
section Delivery
Design :b1, after a2, 14d
Build :b2, after b1, 28d
Launch :milestone, after b2, 0d
```
Layouts That Take It
Give the slide one of these layouts to place the diagram in a region, or none to compose it automatically.
OPF Config
diagrams:ganttOPF JSON
{
"$schema": "https://openpresentation.org/schema/opf/v1",
"name": "PPTX.gallery — diagrams/gantt",
"description": "Use a Gantt diagram to show tasks on a calendar with their order and duration, such as the phases of a project plan.",
"tags": [
"gallery:diagrams/gantt"
],
"slides": [
{
"id": "gallery-preview-1",
"layout": "chart",
"title": "Gantt",
"diagram": {
"source": "gantt\n dateFormat YYYY-MM-DD\n axisFormat %b %d\n tickInterval 2week\n section Discovery\n Interviews :a1, 2027-01-04, 14d\n Synthesis :a2, after a1, 7d\n section Delivery\n Design :b1, after a2, 14d\n Build :b2, after b1, 28d\n Launch :milestone, after b2, 0d",
"alt": "Discovery runs interviews and synthesis in January; delivery runs design and build from late January to early March, ending with the launch milestone."
}
}
],
"catalogs": {
"default": {
"source": "https://www.pptx.gallery",
"layouts": {
"chart": {
"name": "Chart",
"summary": "One to six charts, with an optional note.",
"tags": [
"Visuals"
],
"direction": "column",
"regions": [
{
"name": "title"
},
{
"name": "charts",
"accepts": [
"chart",
"group",
"diagram"
],
"role": "primary",
"flow": "grid"
},
{
"name": "note",
"size": "auto",
"accepts": [
"text"
],
"role": "supporting",
"flow": "none"
}
],
"description": "Give a chart enough space to show its evidence. Use the title to state the conclusion and labels to explain the measures.",
"preview": {
"vectorSrc": "https://www.pptx.gallery/layout-previews/chart.svg"
}
}
}
}
}
}Open in visual editorOpen in Inspector
Load this config in the gallery's visual editor, or in the Inspector at pptx.dev.