Gantt chart in Confluence Cloud (free, with Mermaid)

What Confluence Cloud does with Mermaid on its own

Confluence Cloud does not draw Mermaid itself. In our tests in October and November 2026, a ```mermaid block pasted into a page became an ordinary code block: readers see the lines of the plan, not the chart. The code is kept safely, but nothing is drawn.

To see the chart you need a Mermaid app that adds a macro to the editor, or you draw the diagram elsewhere and upload a picture. How to add Mermaid diagrams to Confluence Cloud compares those routes.

How to add a Gantt chart with Mermaid Editor for Confluence

Full disclosure: Dortus makes this app. The steps:

1. A Confluence admin installs Mermaid Editor for Confluence from the Atlassian Marketplace. The app is free.
2. Open the page in edit mode. Type /mermaid and choose Mermaid Editor. You can also open the + insert menu in the toolbar and search for Mermaid Editor.
3. The editor opens with the code on the left and a live preview on the right. Click the Gantt example to start from a short release plan, or paste the example from this page. If you paste a block that starts with ```mermaid, the fences are removed for you.
4. Change the text. The preview redraws as you type. If a line is wrong, the preview says what is wrong and names the line, and that line is marked in the code.
5. Click Insert diagram, or press Ctrl+Enter (Cmd+Enter on a Mac). Publish the page.
6. To change it later, select the diagram in the editor and click the pencil icon. Versions in the editor brings back any of the last 20 saves.

On the page the diagram fits the width of the page. Hover over it, or tab to it, for the zoom buttons. Click it, or use Open large, to see it in a big window. SVG and PNG download the diagram for a slide or an email. In Confluence’s dark mode the diagram is drawn in Mermaid’s dark colours. The app has 12 examples to start from: flowchart, sequence, class, state, Gantt, pie, mindmap, timeline, journey, ER, architecture and kanban.

Where it lives: the app runs on Atlassian Forge. The Mermaid code is saved in the macro on the page, earlier versions in Forge storage in your own Atlassian site, and the diagram is drawn in the browser of the person reading the page.

Example: a release plan

A release with build, test and release work, two dependencies and a go-live milestone. Copy it, change the names and dates, and paste it into the editor.

gantt
    title Release 2.4 plan
    dateFormat YYYY-MM-DD
    axisFormat %d %b
    excludes weekends
    section Build
    API changes          :done,   api,  2026-11-02, 5d
    Web app screens      :active, web,  2026-11-04, 8d
    section Test
    Integration tests    :        test, after api web, 4d
    Fix blocking bugs    :crit,   fix,  after test, 3d
    section Release
    Release notes        :        docs, after web, 2d
    Go live              :milestone, live, after fix docs, 0d

Drawn with Mermaid 12.2, the version the app uses, on 2 November 2026. The red line is the day it was drawn: a Gantt chart marks today.

How the syntax works

• gantt on the first line names the diagram type. title puts a heading above the chart.
• dateFormat YYYY-MM-DD is how you write dates in the tasks. axisFormat %d %b is how dates are shown along the bottom: day and short month.
• excludes weekends skips Saturdays and Sundays. A task of 5d then takes five working days, and weekends are shaded grey.
• section Build starts a group of tasks with a label on the left.
• A task is a name, a colon, and then values separated by commas: optional tags, an id, a start, and a duration. In API changes :done, api, 2026-11-02, 5d the tag is done, the id is api, it starts on 2 November and takes five days.
• Tags: done (grey), active (highlighted), crit (red, critical) and milestone.
• after api web starts a task when the later of those two tasks ends. Make api longer and everything after it moves along.
• Durations use a number and a unit, with no space: 3d for days, 2w for weeks, 4h for hours.
• A milestone with 0d is drawn as a diamond. The red line for today can be switched off with a line todayMarker off.

Let an AI assistant write the first version. ChatGPT and Claude can write Mermaid. Describe the plan in plain words, ask for a Mermaid gantt chart with dateFormat YYYY-MM-DD, and paste the answer into the editor. Read the result: assistants sometimes invent a date or use syntax that does not draw.

Common mistakes and how to fix them

Watch out: most Gantt mistakes give no error. Mermaid draws a chart, just not the one you meant. Check the dates in the preview.

• A date in another format than dateFormat. With dateFormat YYYY-MM-DD, a task that starts on 05-11-2026 was drawn in May 2026 in our test, not on 5 November. A date such as 31-12-2026 stops the chart with “Invalid date”. Fix: write every date the way dateFormat says, or change dateFormat to DD-MM-YYYY.
• after with an id that does not exist. A typo such as after biuld, or a task without an id, makes the task start today, without an error. Fix: give the earlier task an id (the value after the tags) and check the spelling.
• A colon in the task name. Phase 1: design :des, 2026-11-02, 5d was drawn as “Phase 1”: the colon ends the name. Fix: leave the colon out, or write it as #58;, as in Phase 1#58; design.
• A duration in words. 5 days or 1 week is not read, and the task gets no bar. Fix: 5d or 1w, with no space.
• The same id twice. In our test the second task with id des was not drawn as a bar. Fix: give every task its own id.

Other ways

Other Mermaid apps exist on the Atlassian Marketplace; the Mermaid guide lists points worth comparing. For a timeline you want to draw by hand, with bars and shapes placed exactly where you want them, a drawing app such as draw.io fits better.

FAQ

By diagram type

A Gantt chart shows work over time. Mermaid diagram examples for Confluence has a short example of each of twelve diagram types. Guides that go deeper on one type:

• Sequence diagrams in Confluence Cloud
• Mind maps in Confluence Cloud
• ER diagrams (entity relationship) in Confluence Cloud
• Flowcharts in Confluence Cloud

Questions

An example that does not draw for you, or a mistake we missed? Email support@dortus.com.

See also: How to add Mermaid diagrams to Confluence Cloud (including diagrams from ChatGPT or Claude)