A research study or a product launch moves through phases: plan it, run it, make sense of it, share what you found. Written as a task list, every step is there but the shape is not. A Gantt chart shows the shape, but it asks for start dates and durations you may not know yet, and you edit it every time something slips.
Mermaid's timeline diagram sits in between. You list the periods in order and what happens in each, with no dates to keep correct. Knotpad draws it in the note's preview, on the web and in the desktop app, beside the tasks it describes. The examples use the research phase of an illustrative customer portal project.
Write a timeline
Start a code block labelled mermaid and put the word timeline on its first line. Every line after that is a period, a colon, then what happens in it. Add another colon for each extra step in the same period. A section line groups the periods under it into a phase, and each phase gets its own colour.
timeline
title Customer research for the request portal
section Plan
Week 1 : Agree the research questions : Invite 8 customers
section Interviews
Week 2 : 4 interviews
Week 3 : 4 interviews : Write up quotes after each call
section Findings
Week 4 : Group findings by theme
Week 5 : Share findings with support : Update the portal brief
A period is only a label. It can be a week, a month, a date or a stage name such as Discovery.
Choose a timeline or a Gantt chart
- Timeline: the order of phases and what happens in each. Use it for a research plan, the stages of a project, or a record of what already happened.
- Gantt chart: start dates, durations, and tasks that overlap or wait on each other. Use it once the schedule is agreed and you need to see what moves when one task slips.
Every period in a timeline is drawn the same width, so a two-day stage looks as long as a two-month one. When length matters, use a Gantt chart: the Mermaid workflow guide has an example.
Keep it readable
- Keep each step to a few words. Long text wraps and makes the boxes tall.
- Five or six periods fit across a note before the diagram shrinks to fit. For more, give each phase its own timeline.
- Leave owners, dates and checks in the tasks under the diagram. The timeline shows the order, and the tasks hold the detail.
Ask your assistant to draw it
If the note already lists the tasks, a connected AI assistant can turn them into a timeline. Knotpad's instructions for connected assistants already suggest a timeline or a Gantt chart when a note describes phases or dates. To ask for one directly:
Read the Customer research note. Add a new section with a Mermaid timeline of its tasks, one period per week, with each step under six words.
On a note with the default Agents setting, the assistant adds the timeline as a new section at the end of the note. It cannot move your text to make room. If a diagram has a syntax error, Knotpad shows the error and the code in its place, so you or the assistant can see what to fix.
Expand, copy or download it
Click a diagram to open it full screen. Scroll to zoom in up to five times, drag to move around, and press Escape to close. Code copies the Mermaid source, so you can reuse it in another note. SVG downloads the diagram as an image for a slide or a status report.
Other charts that render in a note
Knotpad draws other Mermaid charts the same way. Three that suit project notes:
- pie for a split, such as hours spent in each phase.
- quadrantChart for a two-by-two, such as findings sorted by impact and effort.
- xychart-beta for a bar or line chart, such as interviews completed each week.
What a timeline does not do
A timeline is text you write. It does not read your task dates or change when a task is done. Update it when the plan changes, and keep the tasks as the record of progress.
Keep notes safe from rewrites, or connect your assistant to start.
