Update work/tbx/time_line.md

This commit is contained in:
2024-07-18 15:36:12 +00:00
parent 8952891f40
commit 78035be548

View File

@@ -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: To create a timeline in Mermaid, you can use the `gantt` chart. Here are the basic components and options:
1. **Basic Structure**: 1. **Basic Structure**:
```markdown
```mermaid ```mermaid
gantt gantt
title Your Project Timeline 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 3 :2024-08-01 , 12d
Task 4 :2024-08-15 , 18d Task 4 :2024-08-15 , 18d
``` ```
```
2. **Components**: 2. **Components**:
- `title`: Sets the title of your Gantt chart. - `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: Here's a detailed example to illustrate how to create a project timeline:
```markdown
```mermaid ```mermaid
gantt gantt
title Project Timeline Example title Project Timeline Example
@@ -54,13 +51,14 @@ gantt
UAT :a7, after a6, 7d UAT :a7, after a6, 7d
Final Deployment :a8, after a7, 2d Final Deployment :a8, after a7, 2d
``` ```
```
### Options and Customization ### Options and Customization
- **axisFormat**: Changes the format of the dates displayed on the axis. For example, `%m-%d` shows month-day format. - **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`. - **excludes**: Specifies days to exclude from the timeline, like `weekends`.
- **taskColor**: You can specify custom colors for tasks. Example syntax: - **taskColor**: You can specify custom colors for tasks. Example syntax:
```mermaid ```mermaid
gantt gantt
title Customized Timeline 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: 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 # Project Timeline
Below is the project timeline for our upcoming tasks: Below is the project timeline for our upcoming tasks:
@@ -92,7 +90,6 @@ gantt
Task 3 :2024-07-15, 7d Task 3 :2024-07-15, 7d
Task 4 :after a3, 3d 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. 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.