docs(mermaid): 更新甘特图和Git图表示例文档

- 替换甘特图示例为更完整的语法演示，包括任务依赖、里程碑和时间轴功能
- 更新Git图表示例为全面的语法参考，涵盖分支操作、提交类型和标签功能
- 添加多种图表配置选项的

skills/mermaid/examples/gantt.md

@@ -33,44 +33,59 @@ Reference: [Mermaid Gantt Chart Documentation](https://mermaid.ai/open-source/sy
 
 ```mermaid
 gantt
-    title Project Timeline
+    title A Gantt Diagram
     dateFormat YYYY-MM-DD
-    section Phase 1
-    Design :done, des1, 2024-01-01, 2024-01-15
-    Development :active, dev1, 2024-01-16, 2024-02-15
-    section Phase 2
-    Testing :test1, after dev1, 10d
-    Deployment :milestone, deploy1, after test1, 1d
+    section Section
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
+    section Another
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ### Example (With Task IDs and Dependencies)
 
 ```mermaid
 gantt
-    title Project Schedule
-    dateFormat YYYY-MM-DD
-    section Design
-    Requirements :req1, 2024-01-01, 2024-01-10
-    Design Phase :des1, after req1, 2024-01-25
-    section Development
-    Frontend :front1, after des1, 20d
-    Backend :back1, after des1, 25d
-    section Testing
-    Integration Testing :test1, after front1 back1, 10d
-    Deployment :milestone, deploy1, after test1, 1d
+    dateFormat  YYYY-MM-DD
+    title       Adding GANTT diagram functionality to mermaid
+    excludes    weekends
+    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+    section A section
+    Completed task            :done,    des1, 2014-01-06,2014-01-08
+    Active task               :active,  des2, 2014-01-09, 3d
+    Future task               :         des3, after des2, 5d
+    Future task2              :         des4, after des3, 5d
+
+    section Critical tasks
+    Completed task in the critical line :crit, done, 2014-01-06,24h
+    Implement parser and jison          :crit, done, after des1, 2d
+    Create tests for parser             :crit, active, 3d
+    Future task in critical line        :crit, 5d
+    Create tests for renderer           :2d
+    Add to mermaid                      :until isadded
+    Functionality added                 :milestone, isadded, 2014-01-25, 0d
+
+    section Documentation
+    Describe gantt syntax               :active, a1, after des1, 3d
+    Add gantt diagram to demo page      :after a1  , 20h
+    Add another diagram to demo page    :doc1, after a1  , 48h
+
+    section Last section
+    Describe gantt syntax               :after doc1, 3d
+    Add gantt diagram to demo page      :20h
+    Add another diagram to demo page    :48h
 ```
 
-### Example (With Tags)
+### Example (With Multiple Task Dependencies)
 
 ```mermaid
 gantt
-    title Project with Tags
-    dateFormat YYYY-MM-DD
-    section Tasks
-    Completed Task :done, task1, 2024-01-01, 2024-01-10
-    Active Task :active, task2, 2024-01-11, 2024-01-25
-    Critical Task :crit, task3, 2024-01-26, 2024-02-10
-    Milestone :milestone, milestone1, 2024-02-11, 0d
+    apple :a, 2017-07-20, 1w
+    banana :crit, b, 2017-07-23, 1d
+    cherry :active, c, after b a, 1d
+    kiwi   :d, 2017-07-20, until b c
 ```
 
 ### Example (With Excludes)
@@ -89,17 +104,45 @@ gantt
 
 ```mermaid
 gantt
-    title Project with Custom Weekend
+    title A Gantt Diagram Excluding Fri - Sat weekends
     dateFormat YYYY-MM-DD
     excludes weekends
     weekend friday
-    section Development
-    Task 1 :task1, 2024-01-01, 10d
-    Task 2 :task2, after task1, 10d
+    section Section
+        A task          :a1, 2024-01-01, 30d
+        Another task    :after a1, 20d
+```
+
+### Example (With Milestones)
+
+```mermaid
+gantt
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
+```
+
+### Example (With Vertical Markers)
+
+**Note**: Vertical markers (`vert`) may not be supported in all Mermaid versions. If this example doesn't work, use milestones instead.
+
+```mermaid
+gantt
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial milestone : milestone, m1, 17:30, 0m
+    Task A : 3m
+    Task B : 8m
+    Final milestone : milestone, m2, 17:58, 0m
 ```
 
 ### Example (With Tick Interval)
 
+**Note**: `tickInterval` requires Mermaid v10.3.0+. This example includes tasks to demonstrate the tick interval.
+
 ```mermaid
 gantt
     title Project Timeline
@@ -111,39 +154,54 @@ gantt
     Development :dev1, after des1, 20d
 ```
 
-### Example (Sequential Tasks)
+### Example (With Comments)
 
 ```mermaid
 gantt
-    title Sequential Tasks
+    title A Gantt Diagram
+    %% This is a comment
     dateFormat YYYY-MM-DD
-    section Phase 1
-    Task A :2024-01-01, 5d
-    Task B :5d
-    Task C :10d
-    section Phase 2
-    Task D :after Task C, 7d
+    section Section
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
+    section Another
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
-### Example (Complex Project)
+### Example (Compact Mode)
 
 ```mermaid
+---
+displayMode: compact
+---
 gantt
-    title Software Development Project
-    dateFormat YYYY-MM-DD
-    excludes weekends
-    section Planning
-    Requirements Gathering :done, req1, 2024-01-01, 2024-01-10
-    System Design :done, des1, after req1, 2024-01-20
-    section Development
-    Frontend Development :active, front1, after des1, 30d
-    Backend Development :active, back1, after des1, 35d
-    Database Setup :db1, after des1, 10d
-    section Testing
-    Unit Testing :test1, after front1 back1, 15d
-    Integration Testing :test2, after test1, 10d
-    section Deployment
-    Production Deployment :milestone, deploy1, after test2, 0d
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d
+```
+
+### Example (Bar Chart using Gantt)
+
+```mermaid
+gantt
+    title Git Issues - days since last update
+    dateFormat X
+    axisFormat %s
+    section Issue19062
+    71   : 0, 71
+    section Issue19401
+    36   : 0, 36
+    section Issue193
+    34   : 0, 34
+    section Issue7441
+    9    : 0, 9
+    section Issue1300
+    5    : 0, 5
 ```
 
 ### Alternative (Flowchart - compatible with all Mermaid versions)
@@ -151,9 +209,43 @@ gantt
 If Gantt charts are not supported, use this flowchart alternative:
 
 ```mermaid
-flowchart LR
-    Start[Project Start] --> Phase1[Phase 1: Design]
-    Phase1 --> Phase2[Phase 2: Development]
-    Phase2 --> Phase3[Phase 3: Testing]
-    Phase3 --> End[Deployment]
+flowchart TD
+    Start([Project Start]) --> PlanningPhase[Planning Phase]
+    PlanningPhase --> DesignPhase[Design Phase]
+    DesignPhase --> DevelopmentPhase[Development Phase]
+    DevelopmentPhase --> TestingPhase[Testing Phase]
+    TestingPhase --> Deployment([Deployment])
+    
+    subgraph Planning["Planning"]
+        Req[Requirements<br/>Gathering]
+        Sys[System Design]
+        Req --> Sys
+    end
+    
+    subgraph Development["Development"]
+        Front[Frontend<br/>Development]
+        Back[Backend<br/>Development]
+        DB[Database<br/>Setup]
+    end
+    
+    subgraph Testing["Testing"]
+        Unit[Unit Testing]
+        Integration[Integration<br/>Testing]
+        Unit --> Integration
+    end
+    
+    PlanningPhase --> Req
+    DesignPhase --> Front
+    DesignPhase --> Back
+    DesignPhase --> DB
+    Front --> Unit
+    Back --> Unit
+    DB --> Unit
+    Integration --> Deployment
+    
+    style Start fill:#e1f5,stroke:#333
+    style Deployment fill:#e1f5,stroke:#333
+    style PlanningPhase fill:#bbf,stroke:#333
+    style DevelopmentPhase fill:#bbf,stroke:#333
+    style TestingPhase fill:#bbf,stroke:#333
 ```

skills/mermaid/examples/gitgraph.md

@@ -12,154 +12,581 @@ Git graphs visualize Git branching structures and commit history, showing how br
 - Branches: `branch branchName` (creates and switches to new branch)
 - Checkout: `checkout branchName` or `switch branchName` (switches to existing branch)
 - Merge: `merge branchName` (merges branch into current branch)
-- Cherry-pick: `cherry-pick commitId` (applies commit to current branch)
+- Cherry-pick: `cherry-pick id: "commitId"` (applies commit to current branch)
 - Orientation: `LR:` (Left-to-Right, default), `TB:` (Top-to-Bottom), `BT:` (Bottom-to-Top, v11.0.0+)
-- Options: `mainBranchName`, `mainBranchOrder`, `parallelCommits`
+- Options: `mainBranchName`, `mainBranchOrder`, `parallelCommits`, `showBranches`, `showCommitLabel`, `rotateCommitLabel`
 
-Reference: [Mermaid GitGraph Documentation](https://mermaid.ai/open-source/syntax/gitgraph.html)
+Reference: [Mermaid GitGraph Documentation](https://mermaid.js.org/syntax/gitgraph.html)
 
 ### Example (Basic GitGraph)
 
+A simple gitgraph showing three commits on the default (`main`) branch:
+
 ```mermaid
 gitGraph
-    commit id: "Initial commit"
-    commit id: "Add feature A"
-    commit id: "Add feature B"
+    commit
+    commit
+    commit
 ```
 
-### Example (With Branches)
+### Example (Adding custom commit id)
+
+For a given commit you may specify a custom ID at the time of declaring it using the `id` attribute, followed by `:` and your custom value within `""` quotes. For example: `commit id: "your_custom_id"`
+
+```mermaid
+gitGraph
+    commit id: "Alpha"
+    commit id: "Beta"
+    commit id: "Gamma"
+```
+
+In this example, we have given our custom IDs to the commits.
+
+### Example (Modifying commit type)
+
+In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are:
+
+- `NORMAL`: Default commit type. Represented by a solid circle in the diagram
+- `REVERSE`: To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram.
+- `HIGHLIGHT`: To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram.
+
+For a given commit you may specify its type at the time of declaring it using the `type` attribute, followed by `:` and the required type option discussed above. For example: `commit type: HIGHLIGHT`
+
+**NOTE**: If no commit type is specified, `NORMAL` is picked as default.
 
 ```mermaid
 gitGraph
-    commit id: "Initial commit"
-    commit id: "Update README"
+    commit id: "Normal"
+    commit
+    commit id: "Reverse" type: REVERSE
+    commit
+    commit id: "Highlight" type: HIGHLIGHT
+    commit
+```
+
+In this example, we have specified different types to each commit. Also, see how we have included both `id` and `type` together at the time of declaring our commits.
+
+### Example (Adding Tags)
+
+For a given commit you may decorate it as a **tag**, similar to the concept of tags or release version in git world. You can attach a custom tag at the time of declaring a commit using the `tag` attribute, followed by `:` and your custom value within `""` quotes. For example: `commit tag: "your_custom_tag"`
+
+```mermaid
+gitGraph
+    commit
+    commit id: "Normal" tag: "v1.0.0"
+    commit
+    commit id: "Reverse" type: REVERSE tag: "RC_1"
+    commit
+    commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
+    commit
+```
+
+In this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like.
+
+### Example (Create a new branch)
+
+In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. A branch name that could be confused for a keyword must be quoted within `""`. Usage examples: `branch develop`, `branch "cherry-pick"`
+
+When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world.
+
+```mermaid
+gitGraph
+    commit
+    commit
     branch develop
-    checkout develop
-    commit id: "Add feature A"
-    commit id: "Add feature B"
+    commit
+    commit
+    commit
+```
+
+In this example, see how we started with default `main` branch, and pushed two commits on that. Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.
+
+### Example (Checking out an existing branch)
+
+In Mermaid, in order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop`
+
+When Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world.
+
+**NOTE**: `checkout` and `switch` can be used interchangeably.
+
+```mermaid
+gitGraph
+    commit
+    commit
+    branch develop
+    commit
+    commit
+    commit
     checkout main
-    commit id: "Fix bug"
-    merge develop
-    commit id: "Release v1.0"
+    commit
+    commit
 ```
 
-### Example (With Commit Types)
+In this example, see how we started with default `main` branch, and pushed two commits on that. Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch. After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.
+
+### Example (Merging two branches)
+
+In Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
+
+Usage example: `merge develop`
+
+When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a **merge commit**, represented in the diagram with **filled double circle**.
 
 ```mermaid
 gitGraph
-    commit id: "Initial commit" type: NORMAL
-    commit id: "Add feature" type: HIGHLIGHT
-    commit id: "Revert change" type: REVERSE
-    commit id: "Final commit" type: NORMAL
+    commit
+    commit
+    branch develop
+    commit
+    commit
+    commit
+    checkout main
+    commit
+    commit
+    merge develop
+    commit
+    commit
 ```
 
-### Example (With Tags)
+In this example, see how we started with default `main` branch, and pushed two commits on that. Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch. After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`. After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit. Since the current branch at this point is still `main`, the last two commits are registered against that.
+
+You can also decorate your merge with similar attributes as you did for the commit using:
+
+- `id` --> To override the default ID with custom ID
+- `tag` --> To add a custom tag to your merge commit
+- `type` --> To override the default shape of merge commit. Here you can use other commit type mentioned earlier.
+
+And you can choose to use none, some or all of these attributes together. For example: `merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE`
 
 ```mermaid
 gitGraph
-    commit id: "Initial commit"
-    commit id: "Add feature A" tag: "v0.1"
-    commit id: "Add feature B"
-    commit id: "Release" tag: "v1.0"
+    commit id: "1"
+    commit id: "2"
+    branch nice_feature
+    checkout nice_feature
+    commit id: "3"
+    checkout main
+    commit id: "4"
+    checkout nice_feature
+    branch very_nice_feature
+    checkout very_nice_feature
+    commit id: "5"
+    checkout main
+    commit id: "6"
+    checkout nice_feature
+    commit id: "7"
+    checkout main
+    merge nice_feature id: "customID" tag: "customTag" type: REVERSE
+    checkout very_nice_feature
+    commit id: "8"
+    checkout main
+    commit id: "9"
 ```
 
-### Example (Complex Branching)
+### Example (Cherry Pick commit from another branch)
+
+Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.
+
+To use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example: `cherry-pick id: "your_custom_id"`
+
+Here, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry-picked from.
+
+A few important rules to note here are:
+
+- You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
+- The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
+- Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
+- When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
+- The specified parent commit must be an immediate parent of the merge commit being cherry-picked.
 
 ```mermaid
 gitGraph
-    commit id: "Initial commit"
+    commit id: "ZERO"
     branch develop
+    branch release
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
     checkout develop
-    commit id: "Add feature A"
-    branch feature-branch
-    checkout feature-branch
-    commit id: "Work on feature"
-    checkout develop
-    commit id: "Add feature B"
+    commit id:"B"
     checkout main
-    commit id: "Update docs"
-    merge develop
-    commit id: "Release v1.0"
-    checkout feature-branch
-    commit id: "Complete feature"
+    merge develop id:"MERGE"
+    commit id:"TWO"
+    checkout release
+    cherry-pick id:"MERGE" parent:"B"
+    commit id:"THREE"
     checkout develop
-    merge feature-branch
+    commit id:"C"
 ```
 
-### Example (With Cherry-pick)
+### Example (Left to Right - default, LR:)
+
+In Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another.
+
+However, you can set this explicitly with `LR:` after `gitGraph`.
 
 ```mermaid
-gitGraph
-    commit id: "Initial commit"
+gitGraph LR:
+    commit
+    commit
     branch develop
-    checkout develop
-    commit id: "Add feature A"
-    commit id: "Add feature B"
+    commit
+    commit
     checkout main
-    commit id: "Hotfix"
-    cherry-pick "Add feature A"
-    commit id: "Release"
+    commit
+    commit
+    merge develop
+    commit
+    commit
 ```
 
-### Example (Top-to-Bottom Orientation)
+### Example (Top to Bottom - TB:)
+
+In `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side.
+
+To orient the graph this way, you need to add `TB:` after gitGraph.
 
 ```mermaid
 gitGraph TB:
-    commit id: "Initial commit"
+    commit
+    commit
     branch develop
-    checkout develop
-    commit id: "Add feature A"
+    commit
+    commit
     checkout main
+    commit
+    commit
     merge develop
+    commit
+    commit
 ```
 
-### Example (Bottom-to-Top Orientation - v11.0.0+)
+### Example (Bottom to Top - BT:) (v11.0.0+)
+
+In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
+
+To orient the graph this way, you need to add `BT:` after gitGraph.
 
 ```mermaid
 gitGraph BT:
-    commit id: "Initial commit"
+    commit
+    commit
     branch develop
-    checkout develop
-    commit id: "Add feature A"
+    commit
+    commit
     checkout main
+    commit
+    commit
     merge develop
+    commit
+    commit
 ```
 
-### Example (With Custom Main Branch Name)
+### Example (Hiding Branch names and lines)
+
+Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. By default its value is `true`. You can set it to `false` using directives.
 
 ```mermaid
-gitGraph:
-    options:
-        mainBranchName: "production"
-    commit id: "Initial commit"
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+---
+gitGraph
+    commit
+    branch hotfix
+    checkout hotfix
+    commit
     branch develop
     checkout develop
-    commit id: "Add feature"
+    commit id:"ash" tag:"abc"
+    branch featureB
+    checkout featureB
+    commit type:HIGHLIGHT
+    checkout main
+    checkout hotfix
+    commit type:NORMAL
+    checkout develop
+    commit type:REVERSE
+    checkout featureB
+    commit
+    checkout main
+    merge hotfix
+    checkout featureB
+    commit
+    checkout develop
+    branch featureA
+    commit
+    checkout develop
+    merge hotfix
+    checkout featureA
+    commit
+    checkout featureB
+    commit
+    checkout develop
+    merge featureA
+    branch release
+    checkout release
+    commit
+    checkout main
+    commit
+    checkout release
+    merge main
+    checkout develop
+    merge release
 ```
 
-### Example (Git Flow Strategy)
+### Example (Commit labels Layout: Rotated or Horizontal)
+
+Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.
+
+The other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels.
+
+You can change the layout of the commit labels by using the `rotateCommitLabel` keyword in the directive. It defaults to `true`, which means the commit labels are rotated.
+
+**Usage example: Rotated commit labels**
 
 ```mermaid
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: true
+---
 gitGraph
-    commit id: "Initial commit"
+  commit id: "feat(api): ..."
+  commit id: "a"
+  commit id: "b"
+  commit id: "fix(client): .extra long label.."
+  branch c2
+  commit id: "feat(modules): ..."
+  commit id: "test(client): ..."
+  checkout main
+  commit id: "fix(api): ..."
+  commit id: "ci: ..."
+  branch b1
+  commit
+  branch b2
+  commit
+```
+
+**Usage example: Horizontal commit labels**
+
+```mermaid
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: false
+---
+gitGraph
+  commit id: "feat(api): ..."
+  commit id: "a"
+  commit id: "b"
+  commit id: "fix(client): .extra long label.."
+  branch c2
+  commit id: "feat(modules): ..."
+  commit id: "test(client): ..."
+  checkout main
+  commit id: "fix(api): ..."
+  commit id: "ci: ..."
+  branch b1
+  commit
+  branch b2
+  commit
+```
+
+### Example (Hiding commit labels)
+
+Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.
+
+```mermaid
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+    showCommitLabel: false
+---
+gitGraph
+    commit
+    branch hotfix
+    checkout hotfix
+    commit
     branch develop
     checkout develop
-    commit id: "Setup project"
-    branch feature/login
-    checkout feature/login
-    commit id: "Add login form"
-    commit id: "Add validation"
+    commit id:"ash"
+    branch featureB
+    checkout featureB
+    commit type:HIGHLIGHT
+    checkout main
+    checkout hotfix
+    commit type:NORMAL
+    checkout develop
+    commit type:REVERSE
+    checkout featureB
+    commit
+    checkout main
+    merge hotfix
+    checkout featureB
+    commit
+    checkout develop
+    branch featureA
+    commit
+    checkout develop
+    merge hotfix
+    checkout featureA
+    commit
+    checkout featureB
+    commit
     checkout develop
-    merge feature/login
-    commit id: "Merge login feature"
-    branch release/v1.0
-    checkout release/v1.0
-    commit id: "Prepare release"
-    checkout main
-    merge release/v1.0
-    commit id: "Release v1.0" tag: "v1.0"
+    merge featureA
+    branch release
+    checkout release
+    commit
+    checkout main
+    commit
+    checkout release
+    merge main
     checkout develop
-    merge release/v1.0
+    merge release
+```
+
+### Example (Customizing main branch name)
+
+Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.
+
+```mermaid
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchName: 'MetroLine1'
+---
+gitGraph
+    commit id:"NewYork"
+    commit id:"Dallas"
+    branch MetroLine2
+    commit id:"LosAngeles"
+    commit id:"Chicago"
+    commit id:"Houston"
+    branch MetroLine3
+    commit id:"Phoenix"
+    commit type: HIGHLIGHT id:"Denver"
+    commit id:"Boston"
+    checkout MetroLine1
+    commit id:"Atlanta"
+    merge MetroLine3
+    commit id:"Miami"
+    commit id:"Washington"
+    merge MetroLine2 tag:"MY JUNCTION"
+    commit id:"Boston"
+    commit id:"Detroit"
+    commit type:REVERSE id:"SanFrancisco"
+```
+
+Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.
+
+### Example (Customizing branch ordering)
+
+In Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code.
+
+Sometimes you may want to customize the order of the branches. You can do this by using the `order` keyword next the branch definition. You can set it to a positive number.
+
+Mermaid follows the given precedence order of the `order` keyword.
+
+- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config)
+- Next, All branches without an `order` are shown in the order of their appearance in the diagram code.
+- Next, All branches with an `order` are shown in the order of their `order` value.
+
+To fully control the order of all the branches, you must define `order` for all the branches.
+
+```mermaid
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+---
+gitGraph
+    commit
+    branch test1 order: 3
+    branch test2 order: 2
+    branch test3 order: 1
+```
+
+Look at the diagram, all the branches are following the order defined.
+
+```mermaid
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchOrder: 2
+---
+gitGraph
+    commit
+    branch test1 order: 3
+    branch test2
+    branch test3
+    branch test4 order: 1
+```
+
+Look at the diagram, here, all the branches without a specified order are drawn in their order of definition. Then, `test4` branch is drawn because the order of `1`. Then, `main` branch is drawn because the order of `2`. And, lastly `test1` is drawn because the order of `3`.
+
+**NOTE**: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the beginning, instead follows the ordering.
+
+### Example (Parallel commits) (v10.8.0+)
+
+Commits in Mermaid display temporal information in gitgraph by default. For example if two commits are one commit away from its parent, the commit that was made earlier is rendered closer to its parent. You can turn this off by enabling the `parallelCommits` flag.
+
+**Temporal Commits (default, parallelCommits: false)**
+
+```mermaid
+---
+config:
+  gitGraph:
+    parallelCommits: false
+---
+gitGraph:
+  commit
+  branch develop
+  commit
+  commit
+  checkout main
+  commit
+  commit
+```
+
+**Parallel commits (parallelCommits: true)**
+
+```mermaid
+---
+config:
+  gitGraph:
+    parallelCommits: true
+---
+gitGraph:
+  commit
+  branch develop
+  commit
+  commit
+  checkout main
+  commit
+  commit
 ```
 
 ### Alternative (Flowchart - compatible with all Mermaid versions)