Start with working Mermaid timeline syntax, shape it in a visual editor, and export the result. Build horizontal or vertical roadmap.
Ready.
Drag to reorder or press Alt+Up/Down
Paste valid Mermaid timeline syntax here. Visual edits normalize spacing and remove comments, so copy comment-rich code before switching back to the builder.
Valid code can be edited directly and parsed into the visual builder.
Live preview
Project Timeline
Preview ready when you are.
The diagram loads when this workspace enters view or you begin editing.
Mermaid timeline syntax
A Mermaid timeline is a chronological diagram described in plain text. The required first line is timeline. An optional title follows, then each period is paired with at least 1 event. The generated code can live in a README, note, wiki, or documentation site that has a compatible Mermaid renderer.
The text before the first separator is the period label; each value after it is an event. Write the separator as a colon followed by whitespace. For example, June : Schedule published : Registration opened creates 1 period with 2 events. The bare timeline header uses the normal horizontal layout.
A title is optional. Add it on its own line with title. Titles describe the whole diagram, while period labels should stay short enough to scan. If a period has several events, keep them inline or put later events on continuation lines that begin with a colon. Both forms produce the same timeline.
Continuation lines are useful in source-controlled documents because each event gets its own line. A period may include its first event inline, or the period can stand alone and all events can follow as indented continuation lines. The visual builder accepts both and emits the compact inline form.
Copy-paste example
Both Detection and Recovery contain 2 events.
timeline
title Incident Review
Detection : Elevated error rate
: On-call engineer paged
Recovery : Faulty release rolled back
: Service health confirmed
Place section immediately before the first period in a group. Sections work well for phases such as Prepare, Build, and Launch, but they are not required. A new section remains active for the periods that follow until another section appears.
Mermaid comments start with %% and do not render. They are helpful for maintainers, but the generator’s visual model stores diagram structure rather than arbitrary source formatting. A visual edit normalizes the code and removes comments, so preserve a comment-rich copy before returning to visual mode.
Copy-paste example
Preparation and Public Program remain distinct in one chronology.
timeline
title Museum Exhibition
section Preparation
Research : Select artifacts : Secure loans
Conservation : Restore pieces : Photograph catalog
section Public Program
Opening week : Press preview : Member night
Closing week : Final tours : Return loans
Use timeline LR for a left-to-right diagram. The bare timeline header has the same default direction and keeps older links compact. Use timeline TD when a long roadmap reads better from top to bottom or when horizontal space is limited. Direction changes layout, not the meaning or order of the periods.
Copy-paste example
Compact sequences fit naturally across a wide document.
timeline LR
title Migration Plan
Audit : Inventory workloads
Pilot : Move an internal service
Cutover : Move production trafficCopy-paste example
The same data flows down the page.
timeline TD
title Migration Plan
Audit : Inventory workloads
Pilot : Move an internal service
Cutover : Move production traffic
The timeline lexer treats a raw colon as the end of a period label and a raw hash as the start of a comment. In period labels, write #58; for : and #35; for #. These are Mermaid’s pre-parser entities: do not add the leading ampersand used by HTML entities, and do not use named forms such as :.
Events follow a slightly different rule: the event separator is a colon followed by whitespace. That means Deploy at 10:00 is safe inside an event. If an event must contain a colon followed by a space, the generator writes #58; for that colon.
Copy-paste example
The period renders as “Sprint #4 : 10:00 UTC”; the event time remains readable.
timeline
title Operations Log
Sprint #35;4 #58; 10#58;00 UTC : Deploy at 10:00 : Verify issue #123
Without the diagram keyword, Mermaid reports No diagram type detected matching given configuration. Start the first non-comment line with timeline, timeline LR, or timeline TD.
A raw colon inside a period label can produce a message beginning Parse error on line 2 and ending with got 'INVALID'. Escape the period’s colon as #58;. Error wording can vary when a host pins a different Mermaid version, so fix the marked line rather than matching every token in the message.
Error example
Open this example to see the persistent code error, then add the keyword.
title Release Plan
2026 : Public launchError example
Change 10:00 to 10#58;00 in the period label.
timeline
10:00 UTC : Public launchExample gallery
Each example uses a different subject and structure from the quick-reference examples on the Mermaid cheat sheet. Copy the code as-is or open it with editable periods and events.
Complete example
Use this when a short chronology needs no title or sections.
timeline
Morning : Team briefing
Afternoon : Decision recordedComplete example
Keep several milestones under the same month by adding inline colon separators.
timeline
title Community Conference
April : Call for speakers : Venue confirmed
June : Schedule published : Registration opened
September : Conference day : Recordings releasedComplete example
Comments stay in Mermaid code but visual edits normalize the source and remove them.
timeline
title Incident Review
%% Continuation lines keep related events together
Detection : Elevated error rate
: On-call engineer paged
Recovery : Faulty release rolled back
: Service health confirmedComplete example
Use sections to group preparation work separately from public-program milestones.
timeline
title Museum Exhibition
section Preparation
Research : Select artifacts : Secure loans
Conservation : Restore pieces : Photograph catalog
section Public Program
Opening week : Press preview : Member night
Closing week : Final tours : Return loansComplete example
Use TD when a long roadmap reads better from top to bottom.
timeline TD
title Data Center Migration
section Prepare
Audit : Inventory workloads
Pilot : Move an internal service : Validate rollback
section Cutover
Weekend 1 : Migrate databases : Verify replicas
Weekend 2 : Move production traffic : Retire legacy hostsComplete example
Document exact release months without turning the diagram into a project schedule.
timeline
title Atlas CLI Release Notes
2025 Oct : Version 0.8.0 : Offline cache introduced
2026 Feb : Version 0.9.0 : Plugin hooks added : Config validation improved
2026 Jun : Version 1.0.0 : Stable command API : Migration guide publishedComplete example
Test how a renderer wraps descriptive milestones before publishing a dense diagram.
timeline
title Space Telescope Commissioning
Readiness review : Verify thermal vacuum results and close every flight software action item
Launch window : Complete vehicle integration and publish the mission operations handoff
First light : Calibrate the primary instruments and release the initial deep field observation to research teamsMermaid loads only when the workspace enters view or you interact with it. Rendering and export then run locally. The last valid SVG stays mounted while you type through an incomplete line, so a temporary syntax error does not erase the diagram or reset your chosen zoom.
Small share links keep code in the query string. Larger timelines use a compressed, versioned payload, while the page’s fragment remains available for the generator and syntax reference anchors. The latest visual draft—including incomplete period cards—is autosaved to local storage and restored before the default template.
Use SVG for responsive documentation, PNG for chat and slides, PDF for print, and Markdown when the diagram should remain editable in version control. For other Mermaid diagram types, use the Mermaid editor; for a compact overview of several diagram grammars, open the Mermaid cheat sheet.
Mermaid timeline syntax starts with the timeline keyword. Add an optional title, then write period labels followed by : and one or more events. Use section lines to group related periods.
Start the diagram with timeline TD. Use timeline LR, or the bare timeline keyword, for a horizontal layout. The Orientation control in this generator writes the direction for you.
Add more colon-separated events on the same line, such as June : Schedule published : Registration opened. You can also place each extra event on a continuation line that starts with a colon.
Use Mermaid’s pre-parser entity form: #58; for a colon and #35; for a hash. Do not add a leading ampersand. A time like 10:00 is safe inside an event because the event separator is a colon followed by whitespace.
Yes. Switch to the Mermaid code tab to paste or edit timeline syntax. The visual builder reads valid structure from that code. Visual edits normalize the output, so comments and hand-formatted whitespace should be copied first if you need to preserve them exactly.
Yes. Download a scalable SVG, high-resolution PNG, printable PDF, or Markdown file containing a fenced Mermaid block. You can also copy raw code or fenced Markdown.
Yes. Small timelines use a readable ?code= URL. Larger timelines use a compressed ?t= payload. Your latest visual draft is also autosaved locally in the browser.
No. Editing, rendering, draft storage, and image export happen in your browser. TheMarkdowner does not send roadmap or release data to a rendering server.
Use a timeline for chronological milestones, releases, and historical events. Use a Gantt chart when you need task durations, start dates, dependencies, or overlapping work.