Files

medusa 78035be548 Update work/tbx/time_line.md

2024-07-18 15:36:12 +00:00

3.2 KiB

Raw Blame History

Creating a timeline using Mermaid in Markdown is a great way to visually represent a project timeline. Mermaid provides a simple syntax for creating timelines, and you can embed these diagrams directly in Markdown. Here’s a guide to help you get started:

Mermaid Timeline Syntax

To create a timeline in Mermaid, you can use the gantt chart. Here are the basic components and options:

Basic Structure:

gantt
    title Your Project Timeline
    dateFormat  YYYY-MM-DD
    section Section 1
    Task 1          :a1, 2024-07-01, 30d
    Task 2          :after a1  , 20d
    section Section 2
    Task 3          :2024-08-01  , 12d
    Task 4          :2024-08-15  , 18d

Components:
- title: Sets the title of your Gantt chart.
- dateFormat: Specifies the date format. Common formats include YYYY-MM-DD.
- section: Defines a new section in the timeline.
- Task: Defines a task within a section. The syntax is Task Name :task_id, start_date, duration.
  - task_id: An optional identifier for the task, used for dependencies.
  - start_date: The start date of the task. Use after task_id to start after another task.
  - duration: The duration of the task (e.g., 30d for 30 days).

Example Timeline

Here's a detailed example to illustrate how to create a project timeline:

gantt
    title Project Timeline Example
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d
    excludes    weekends

    section Planning
    Define Scope         :a1, 2024-07-01, 10d
    Requirements         :a2, after a1, 7d

    section Development
    Setup Environment    :a3, 2024-07-15, 5d
    Develop Features     :a4, after a3, 20d
    Testing              :a5, after a4, 10d

    section Deployment
    Deploy to Staging    :a6, 2024-08-20, 3d
    UAT                  :a7, after a6, 7d
    Final Deployment     :a8, after a7, 2d

Options and Customization

axisFormat: Changes the format of the dates displayed on the axis. For example, %m-%d shows month-day format.
excludes: Specifies days to exclude from the timeline, like weekends.

taskColor: You can specify custom colors for tasks. Example syntax:

gantt
    title Customized Timeline
    dateFormat  YYYY-MM-DD
    section Development
    Setup Environment    :a1, 2024-07-01, 5d, color: blue
    Develop Features     :a2, after a1, 20d, color: red

Implementing in Markdown

To embed the timeline in Markdown, use triple backticks followed by mermaid, then add your Gantt chart syntax, and close with triple backticks. Here's an example:

Project Timeline

Below is the project timeline for our upcoming tasks:

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD

    section Phase 1
    Task 1                :a1, 2024-07-01, 10d
    Task 2                :after a1, 5d

    section Phase 2
    Task 3                :2024-07-15, 7d
    Task 4                :after a3, 3d

This will render the Gantt chart when viewed in a Markdown renderer that supports Mermaid diagrams, such as GitHub or VSCode with the appropriate extensions.

Feel free to modify the sections, tasks, dates, and durations to fit your project's timeline.

3.2 KiB Raw Blame History Unescape Escape