# Mermaid gitGraph and JSON lane diagrams

Mermaid `gitGraph` goes through `renderGlyphDiagram`. Direct lane JSON and git-log text use `renderGlyphLaneDag` from `@glyphcss/diagrams/lanes`.

## Branch and merge



```mermaid
gitGraph TB:
 commit id: "Baseline" tag: "v1.0"
 branch checkout
 commit id: "Cart totals"
 commit id: "Card payment"
 checkout main
 commit id: "Update docs"
 branch receipts
 commit id: "Email template"
 commit id: "Receipt tests"
 checkout main
 merge checkout id: "Ship checkout"
 merge receipts id: "Ship receipts"
 commit id: "Release" tag: "v1.1"
```

```text
                 *     Baseline  (tag: v1.0)                      
                 ├─╮                                              
                 │ *   Cart totals                                
                 │ *   Card payment  (checkout)                   
                 * │   Update docs                                
                 ├─┼─╮                                            
                 │ │ * Email template                             
                 │ │ * Receipt tests  (receipts)                  
                 ├─╯ │                                            
                 *   │ Ship checkout  (merge)                     
                 ├───╯                                            
                 *     Ship receipts  (merge)                     
                 *     Release  (main, tag: v1.1)                 
```



## Tags and commit annotations



```mermaid
gitGraph BT:
 commit id: "Baseline" tag: "v1.0"
 commit id: "Fix" type: REVERSE
 commit id: "Release" tag: "v1.1" type: HIGHLIGHT
```

```text
            * Release  (main, HIGHLIGHT, tag: v1.1)             
            * Fix  (REVERSE)                                    
            * Baseline  (tag: v1.0)                             
```



## Syntax and limits

- `commit`, `branch`, `checkout`, `merge`, and `cherry-pick` build the history. Tags, types, and authored IDs become text annotations.
- `TB` and `LR` read oldest-first; `BT` reads newest-first. `LR` uses the vertical lane layout and reports the adaptation.
- Mermaid commit IDs become stable internal hexadecimal IDs; duplicate authored IDs still create distinct nodes and retain their authored text.
- Lane ordering configuration is adapted where supported; unused configuration and visual settings are reported.
- Direct lane options include `order: "newest-first" | "oldest-first"` and `ids`. IDs default on for git-log strings and off for lane objects.
- Lane objects must list newest nodes first, with parents later. Set `truncated: true` for a window with missing older parents; continuation strokes mark the boundary.
- A narrow canvas can collapse lanes while retaining rows and labels. Pagination keeps each node with its connectors; expansion grows height at the same width.

## Read a repository log

```sh
npm i -D @glyphcss/diagrams
git log --pretty=format:'%h|%p|%d|%s' > history.txt
```

```ts
import { readFile } from "node:fs/promises";
import { renderGlyphLaneDag } from "@glyphcss/diagrams/lanes";
const source = await readFile("history.txt", "utf8");
const result = await renderGlyphLaneDag(source, { target: "chat" });
console.log(result.text);
```

The [JSON reference](/diagrams/json/#lanes-json) shows the equivalent lane structure.