Update work/tbx/time_line.md
This commit is contained in:
@@ -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.
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user