diff --git a/work/tbx/time_line.md b/work/tbx/time_line.md index 0f52dcc..a82bc51 100644 --- a/work/tbx/time_line.md +++ b/work/tbx/time_line.md @@ -5,7 +5,6 @@ Creating a timeline using Mermaid in Markdown is a great way to visually represe To create a timeline in Mermaid, you can use the `gantt` chart. Here are the basic components and options: 1. **Basic Structure**: - ```markdown ```mermaid gantt title Your Project Timeline @@ -17,7 +16,6 @@ To create a timeline in Mermaid, you can use the `gantt` chart. Here are the bas Task 3 :2024-08-01 , 12d Task 4 :2024-08-15 , 18d ``` - ``` 2. **Components**: - `title`: Sets the title of your Gantt chart. @@ -32,7 +30,6 @@ To create a timeline in Mermaid, you can use the `gantt` chart. Here are the bas Here's a detailed example to illustrate how to create a project timeline: -```markdown ```mermaid gantt title Project Timeline Example @@ -54,13 +51,14 @@ gantt 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: + ```mermaid gantt title Customized Timeline @@ -74,7 +72,7 @@ gantt 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: -```markdown + # Project Timeline Below is the project timeline for our upcoming tasks: @@ -92,7 +90,6 @@ gantt 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.