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

                 *     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)                 

Code

import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram(`
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"
`, {
  target: "chat",
  width: 66,
  height: 22,
  overflow: "expand"
});
console.log(text);

Tags and commit annotations

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

Code

import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram(`
gitGraph BT:
 commit id: "Baseline" tag: "v1.0"
 commit id: "Fix" type: REVERSE
 commit id: "Release" tag: "v1.1" type: HIGHLIGHT
`, {
  target: "chat",
  width: 64,
  height: 16,
  overflow: "expand"
});
console.log(text);

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

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

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 shows the equivalent lane structure.