opentui-markdown-render 0.0.0-stage → 0.2.0

package/src/merman/flowchart/style.ts

@@ -0,0 +1,79 @@
+import { RGBA, type StyledText } from "@opentui/core"
+import type { DiagramCanvas } from "../core/canvas.js"
+import { renderDiagramGridStyledTextByStyle } from "../core/render-grid.js"
+import {
+  createColorRampTheme,
+  DIAGRAM_FADE_STEPS,
+  numberedStyleKeys,
+  rgba,
+  type DiagramFadeStep,
+  type DiagramRgb,
+} from "../core/color/style.js"
+
+export type FlowchartBaseCellStyle =
+  | "node"
+  | "nodeBorder"
+  | "database"
+  | "databaseBorder"
+  | "edge"
+  | "label"
+  | "group"
+  | "groupLabel"
+export type FlowchartNodeEdgeFadeStyle = `nodeEdgeFade${DiagramFadeStep}`
+export type FlowchartDatabaseEdgeFadeStyle = `databaseEdgeFade${DiagramFadeStep}`
+export type FlowchartEdgeFadeStyle = FlowchartNodeEdgeFadeStyle | FlowchartDatabaseEdgeFadeStyle
+export type FlowchartCellStyle = FlowchartBaseCellStyle | FlowchartEdgeFadeStyle
+export interface FlowchartCellMetadata {
+  attributes?: number
+}
+export type FlowchartGrid = DiagramCanvas<FlowchartCellStyle, FlowchartCellMetadata>
+export type FlowchartStyleColors = Required<Record<FlowchartCellStyle, RGBA>>
+export type FlowchartStyleBackgroundColors = Partial<Record<FlowchartCellStyle, RGBA>>
+export const DEFAULT_THEME_RGB = {
+  node: [228, 239, 232],
+  nodeBorder: [141, 163, 151],
+  database: [228, 239, 232],
+  databaseBorder: [141, 163, 151],
+  edge: [134, 225, 200],
+  label: [134, 225, 200],
+  group: [76, 99, 89],
+  groupLabel: [76, 99, 89],
+} as const satisfies Record<FlowchartBaseCellStyle, DiagramRgb>
+
+export const NODE_EDGE_FADE_STYLES = numberedStyleKeys("nodeEdgeFade", DIAGRAM_FADE_STEPS)
+export const DATABASE_EDGE_FADE_STYLES = numberedStyleKeys("databaseEdgeFade", DIAGRAM_FADE_STEPS)
+
+export function resolveFlowchartStyleColors(
+  colors: Partial<Record<FlowchartCellStyle, RGBA | undefined>> = {},
+): FlowchartStyleColors {
+  const node = colors.node ?? rgba(DEFAULT_THEME_RGB.node)
+  const nodeBorder = colors.nodeBorder ?? rgba(DEFAULT_THEME_RGB.nodeBorder)
+  const database = colors.database ?? rgba(DEFAULT_THEME_RGB.database)
+  const databaseBorder = colors.databaseBorder ?? rgba(DEFAULT_THEME_RGB.databaseBorder)
+  const edge = colors.edge ?? rgba(DEFAULT_THEME_RGB.edge)
+  return {
+    node,
+    nodeBorder,
+    database,
+    databaseBorder,
+    edge,
+    label: colors.label ?? rgba(DEFAULT_THEME_RGB.label),
+    group: colors.group ?? rgba(DEFAULT_THEME_RGB.group),
+    groupLabel: colors.groupLabel ?? colors.group ?? rgba(DEFAULT_THEME_RGB.groupLabel),
+    ...createColorRampTheme(NODE_EDGE_FADE_STYLES, nodeBorder, edge),
+    ...createColorRampTheme(DATABASE_EDGE_FADE_STYLES, databaseBorder, edge),
+  }
+}
+
+export function renderGridStyledText(
+  grid: FlowchartGrid,
+  colors: FlowchartStyleColors,
+  backgrounds?: FlowchartStyleBackgroundColors,
+): StyledText {
+  return renderDiagramGridStyledTextByStyle(grid, colors, backgrounds, {
+    key: (cell) => [cell.style, cell.attributes],
+    attributes: (run) => run.cell.attributes,
+    trimTop: true,
+    trimBottom: true,
+  })
+}

package/src/merman/flowchart/types.ts

@@ -0,0 +1,63 @@
+import type { DiagramAxis, DiagramBounds, DiagramDirection, DiagramPoint } from "../core/geometry.js"
+
+export type FlowchartDirection = "TB" | "TD" | "BT" | "LR" | "RL"
+export type FlowchartNodeShape = "box" | "rounded" | "circle" | "database" | "decision" | "hexagon" | "parallelogram" | "subroutine"
+export type FlowchartEdgeStyle = "thick" | "dashed"
+
+export interface FlowchartNode {
+  id: string
+  label: string
+  shape: FlowchartNodeShape
+}
+
+export interface FlowchartEdge {
+  from: string
+  to: string
+  label: string
+  style?: FlowchartEdgeStyle
+  arrowhead?: false
+  sourceArrowhead?: true
+  orderOnly?: boolean
+}
+
+export interface FlowchartSubgraph {
+  id: string
+  label: string
+  nodeIds: string[]
+  parentId?: string
+  direction?: FlowchartDirection
+}
+
+export interface FlowchartDiagram {
+  direction: FlowchartDirection
+  nodes: FlowchartNode[]
+  edges: FlowchartEdge[]
+  subgraphs?: FlowchartSubgraph[]
+}
+
+export interface FlowchartNodeSize {
+  width: number
+  height: number
+  lines: string[]
+}
+
+export interface FlowchartNodeBounds extends FlowchartNodeSize, DiagramBounds {
+  id: string
+}
+
+export interface FlowchartSubgraphBounds extends DiagramBounds {
+  id: string
+  label: string
+  labelSide: "top" | "bottom"
+}
+
+export type FlowchartPoint = DiagramPoint
+
+export interface FlowchartEdgeRoute {
+  edge: FlowchartEdge
+  points: FlowchartPoint[]
+  labelAxis?: DiagramAxis
+  labelPoint?: FlowchartPoint
+}
+
+export type FlowchartEdgeDirection = DiagramDirection

package/src/merman/gantt/diagram.ts

@@ -0,0 +1,8 @@
+import { drawGanttDiagramGrid } from "./drawing.js"
+import { parseMermaidGanttDiagram } from "./parser.js"
+import { renderGanttGridText } from "./render-grid.js"
+import type { GanttDiagramRenderOptions } from "./types.js"
+
+export function renderGanttDiagram(content: string, options: GanttDiagramRenderOptions = {}): string {
+  return renderGanttGridText(drawGanttDiagramGrid(parseMermaidGanttDiagram(content), options))
+}

package/src/merman/gantt/drawing.ts

@@ -0,0 +1,193 @@
+import { DiagramCanvas } from "../core/canvas.js"
+import { diagramTextWidth } from "../core/text.js"
+import type { GanttGrid } from "./render-grid.js"
+import type {
+  GanttCellStyle,
+  GanttDiagram,
+  GanttDiagramRenderOptions,
+  GanttLabelLayout,
+  GanttLineStyle,
+  GanttRenderStyle,
+  GanttTask,
+} from "./types.js"
+
+const LABEL_GAP = 2
+const MIN_CHART_WIDTH = 24
+const MAX_CHART_WIDTH = 64
+
+export function drawGanttDiagramGrid(diagram: GanttDiagram, options: GanttDiagramRenderOptions = {}): GanttGrid {
+  if (diagram.entries.length === 0) return new DiagramCanvas(0, 0)
+  const labels = diagram.entries.map((_, index) => entryLabel(diagram, index, options.labels ?? "left"))
+  const labelWidth = Math.max(...labels.map(diagramTextWidth))
+  const entryRows: number[] = []
+  let bodyHeight = 0
+  diagram.entries.forEach((entry, index) => {
+    if ((options.sections ?? "spaced") === "spaced" && entry.type === "section" && index > 0) bodyHeight += 1
+    entryRows.push(bodyHeight)
+    bodyHeight += 1
+  })
+  if (diagram.tasks.length === 0) {
+    const grid: GanttGrid = new DiagramCanvas(labelWidth, bodyHeight)
+    diagram.entries.forEach((entry, index) => {
+      if (entry.type === "section") grid.setText(0, entryRows[index]!, entry.section.label, "section")
+    })
+    return grid
+  }
+  const available = (options.layoutMaxWidth ?? 120) - labelWidth - LABEL_GAP
+  const chartWidth = Math.max(MIN_CHART_WIDTH, Math.min(MAX_CHART_WIDTH, available))
+  const starts = diagram.tasks.map((task) => task.start)
+  const ends = diagram.tasks.map((task) => task.end)
+  const minimum = Math.min(...starts)
+  const maximum = Math.max(...ends)
+  const span = Math.max(1, maximum - minimum)
+  const titleHeight = diagram.title ? 2 : 0
+  const axisHeight = 2
+  const grid: GanttGrid = new DiagramCanvas(labelWidth + LABEL_GAP + chartWidth, titleHeight + axisHeight + bodyHeight)
+  const chartX = labelWidth + LABEL_GAP
+
+  if (diagram.title)
+    grid.setText(
+      Math.max(0, chartX + Math.floor((chartWidth - diagramTextWidth(diagram.title)) / 2)),
+      0,
+      diagram.title,
+      "title",
+    )
+  drawAxis(grid, chartX, titleHeight, chartWidth, minimum, span, diagram.axisFormat, diagram.tickInterval)
+
+  diagram.entries.forEach((entry, index) => {
+    const y = titleHeight + axisHeight + entryRows[index]!
+    if (entry.type === "section") {
+      grid.setText(0, y, labels[index]!, "section")
+      return
+    }
+    const label = labels[index]!
+    const labelX = options.labels === "right" ? labelWidth - diagramTextWidth(label) : 0
+    grid.setText(labelX, y, label, entry.task.state)
+    drawTask(grid, entry.task, chartX, y, chartWidth, minimum, span, options)
+  })
+  return grid
+}
+
+function drawAxis(
+  grid: GanttGrid,
+  x: number,
+  y: number,
+  width: number,
+  minimum: number,
+  span: number,
+  format: string,
+  interval?: number,
+): void {
+  for (let offset = 0; offset < width; offset++) grid.setCell(x + offset, y + 1, "─", "axis")
+  const step = interval ? interval * Math.max(1, Math.ceil(span / (interval * 12))) : tickStep(span)
+  const ticks: number[] = []
+  for (let value = Math.ceil(minimum / step) * step; value <= minimum + span; value += step) ticks.push(value)
+  if (ticks.length === 0) ticks.push(minimum, minimum + span)
+  for (const value of ticks) {
+    const offset = Math.round(((value - minimum) / span) * (width - 1))
+    const label = formatTime(value, format)
+    const labelX = Math.max(
+      x,
+      Math.min(x + width - diagramTextWidth(label), x + offset - Math.floor(diagramTextWidth(label) / 2)),
+    )
+    grid.setText(labelX, y, label, "axis")
+    grid.setCell(x + offset, y + 1, "┬", "axis")
+  }
+}
+
+function tickStep(span: number): number {
+  const steps = [
+    1_000, 5_000, 10_000, 30_000, 60_000, 300_000, 900_000, 3_600_000, 21_600_000, 43_200_000, 86_400_000, 172_800_000,
+    604_800_000, 2_592_000_000, 31_536_000_000,
+  ]
+  return steps.find((step) => step >= span / 4) ?? steps.at(-1)!
+}
+
+function drawTask(
+  grid: GanttGrid,
+  task: GanttTask,
+  x: number,
+  y: number,
+  width: number,
+  minimum: number,
+  span: number,
+  options: GanttDiagramRenderOptions,
+): void {
+  const style: GanttRenderStyle = options.style ?? "track"
+  const line = lineGlyph(options.line ?? "thin")
+  const start = Math.round(((task.start - minimum) / span) * (width - 1))
+  const end = Math.round(((task.end - minimum) / span) * (width - 1))
+  if (task.state === "milestone" || start === end) {
+    grid.setCell(x + start, y, "◆", task.state)
+    return
+  }
+  if (style === "track") {
+    for (let offset = 0; offset < width; offset++) {
+      grid.setCell(x + offset, y, (options.track ?? "line") === "line" ? line : "·", trackCellStyle(options))
+    }
+  }
+  const glyph = style === "block" ? "█" : line
+  for (let offset = start; offset <= end; offset++) grid.setCell(x + offset, y, glyph, task.state)
+  if (style === "block") return
+  if (style === "capsule" || style === "track") {
+    if (style === "track") {
+      if (options.endpoints === "points") {
+        grid.setCell(x + start, y, "●", trackCellStyle(options))
+        grid.setCell(x + end, y, "●", trackCellStyle(options))
+      }
+      return
+    }
+    const caps = capGlyphs(options.line ?? "thin")
+    grid.setCell(x + start, y, caps.start, task.state)
+    grid.setCell(x + end, y, caps.end, task.state)
+    return
+  }
+  if (style === "points") {
+    grid.setCell(x + start, y, "●", task.state)
+    grid.setCell(x + end, y, "●", task.state)
+    return
+  }
+  grid.setCell(x + start, y, "┣", task.state)
+  grid.setCell(x + end, y, "┫", task.state)
+}
+
+function entryLabel(diagram: GanttDiagram, index: number, layout: GanttLabelLayout): string {
+  const entry = diagram.entries[index]!
+  if (entry.type === "section" || layout !== "tree") {
+    return entry.type === "section" ? entry.section.label : entry.task.label
+  }
+  const last = diagram.entries[index + 1]?.type !== "task"
+  return `  ${last ? "└" : "├"}─ ${entry.task.label}`
+}
+
+function lineGlyph(line: GanttLineStyle): string {
+  if (line === "thin") return "─"
+  if (line === "double") return "═"
+  if (line === "dashed") return "╌"
+  return "━"
+}
+
+function capGlyphs(line: GanttLineStyle): { start: string; end: string } {
+  if (line === "thin" || line === "dashed") return { start: "╶", end: "╴" }
+  if (line === "double") return { start: "╞", end: "╡" }
+  return { start: "╺", end: "╸" }
+}
+
+function trackCellStyle(options: GanttDiagramRenderOptions): "trackMedium" | "trackDim" | "trackFaint" {
+  if (options.trackTone === "medium") return "trackMedium"
+  if (options.trackTone === "dim") return "trackDim"
+  return "trackFaint"
+}
+
+function formatTime(value: number, format: string): string {
+  const date = new Date(value)
+  const parts: Record<string, string> = {
+    "%Y": String(date.getUTCFullYear()),
+    "%m": String(date.getUTCMonth() + 1).padStart(2, "0"),
+    "%d": String(date.getUTCDate()).padStart(2, "0"),
+    "%H": String(date.getUTCHours()).padStart(2, "0"),
+    "%M": String(date.getUTCMinutes()).padStart(2, "0"),
+    "%S": String(date.getUTCSeconds()).padStart(2, "0"),
+  }
+  return Object.entries(parts).reduce((result, [token, replacement]) => result.replaceAll(token, replacement), format)
+}

package/src/merman/gantt/parser.ts

@@ -0,0 +1,198 @@
+import { firstMeaningfulMermaidLine, meaningfulNumberedMermaidLines, stripMermaidQuotes } from "../core/mermaid.js"
+import { MermaidSyntaxError } from "../diagnostics.js"
+import type { GanttDiagram, GanttEntry, GanttSection, GanttTask, GanttTaskState } from "./types.js"
+
+const HEADER_RE = /^gantt$/i
+const DIRECTIVE_RE = /^(title|dateFormat|axisFormat|tickInterval|excludes|todayMarker)\s+(.+)$/i
+const SECTION_RE = /^section(?:\s+(.+))?$/i
+const ACCESSIBILITY_RE = /^acc(?:Title|Descr)(?::|\s|$)/i
+const TASK_STATES = new Set(["active", "done", "crit", "milestone", "vert"])
+
+export function isMermaidGanttDiagram(content: string): boolean {
+  return HEADER_RE.test(firstMeaningfulMermaidLine(content) ?? "")
+}
+
+export function parseMermaidGanttDiagram(content: string): GanttDiagram {
+  const tasks: GanttTask[] = []
+  const entries: GanttEntry[] = []
+  const tasksById = new Map<string, GanttTask>()
+  let title: string | undefined
+  let dateFormat = "YYYY-MM-DD"
+  let axisFormat = "%Y-%m-%d"
+  let explicitAxisFormat = false
+  let tickInterval: number | undefined
+  let section: GanttSection | undefined
+  let headerSeen = false
+  let inAccessibilityDescription = false
+
+  for (const source of meaningfulNumberedMermaidLines(content)) {
+    const line = stripComment(source.text)
+    if (inAccessibilityDescription) {
+      if (line === "}") inAccessibilityDescription = false
+      continue
+    }
+    if (/^accDescr\s*\{$/i.test(line)) {
+      inAccessibilityDescription = true
+      continue
+    }
+    if (ACCESSIBILITY_RE.test(line)) continue
+    if (!line) continue
+    if (HEADER_RE.test(line)) {
+      if (headerSeen) throw syntaxError(source.lineNumber, line, "Gantt header can only appear once")
+      headerSeen = true
+      continue
+    }
+    if (!headerSeen) throw syntaxError(source.lineNumber, line, "Gantt header is required")
+
+    const sectionMatch = line.match(SECTION_RE)
+    if (sectionMatch) {
+      if (!sectionMatch[1]) throw syntaxError(source.lineNumber, line, "Gantt section cannot be empty")
+      section = { label: stripMermaidQuotes(sectionMatch[1]) }
+      entries.push({ type: "section", section })
+      continue
+    }
+
+    const directive = line.match(DIRECTIVE_RE)
+    if (directive) {
+      const name = directive[1]!.toLowerCase()
+      const value = directive[2]!.trim()
+      if (name === "title") title = stripMermaidQuotes(value)
+      if (name === "dateformat") {
+        dateFormat = value
+        if (!explicitAxisFormat && (value === "HH:mm" || value === "HH:mm:ss")) {
+          axisFormat = value === "HH:mm" ? "%H:%M" : "%H:%M:%S"
+        }
+      }
+      if (name === "axisformat") {
+        axisFormat = value
+        explicitAxisFormat = true
+      }
+      if (name === "tickinterval") {
+        const duration = value.match(/^(\d+)\s*(ms|s|m|h|d|w|seconds?|minutes?|hours?|days?|weeks?)$/i)
+        const units: Record<string, number> = {
+          ms: 1, s: 1_000, m: 60_000, h: 3_600_000, d: 86_400_000, w: 604_800_000,
+          second: 1_000, minute: 60_000, hour: 3_600_000, day: 86_400_000, week: 604_800_000,
+        }
+        if (!duration || Number(duration[1]) <= 0) throw syntaxError(source.lineNumber, line, `Unsupported tick interval "${value}"`)
+        const unit = duration[2]!.toLowerCase()
+        tickInterval = Number(duration[1]) * (units[unit] ?? units[unit.slice(0, -1)]!)!
+        if (!Number.isSafeInteger(tickInterval)) throw syntaxError(source.lineNumber, line, `Unsupported tick interval "${value}"`)
+      }
+      if (!["title", "dateformat", "axisformat", "tickinterval"].includes(name)) {
+        throw syntaxError(source.lineNumber, line, `${directive[1]} is not supported`)
+      }
+      continue
+    }
+
+    const separator = line.indexOf(":")
+    if (separator < 1) throw syntaxError(source.lineNumber, line)
+    const label = stripMermaidQuotes(line.slice(0, separator))
+    const fields = line
+      .slice(separator + 1)
+      .split(",")
+      .map((field) => field.trim())
+      .filter(Boolean)
+    const flags = new Set<string>()
+    while (fields[0] && TASK_STATES.has(fields[0].toLowerCase())) flags.add(fields.shift()!.toLowerCase())
+    if (fields.length < 2 || fields.length > 3) {
+      throw syntaxError(source.lineNumber, line, "Gantt tasks require a start and end or duration")
+    }
+    const id = fields.length === 3 ? fields.shift() : undefined
+    if (id && tasksById.has(id)) throw syntaxError(source.lineNumber, line, `Duplicate task id "${id}"`)
+    const start = parseStart(fields[0]!, dateFormat, tasksById, source.lineNumber, line)
+    const end = parseEnd(fields[1]!, start, dateFormat, source.lineNumber, line)
+    if (end < start) throw syntaxError(source.lineNumber, line, "Gantt task cannot end before it starts")
+    const task: GanttTask = {
+      label,
+      ...(id ? { id } : {}),
+      ...(section ? { section } : {}),
+      start,
+      end,
+      state: taskState(flags),
+    }
+    tasks.push(task)
+    entries.push({ type: "task", task })
+    if (id) tasksById.set(id, task)
+  }
+
+  if (!headerSeen) throw new MermaidSyntaxError("gantt", 1, "", "Gantt header is required")
+  return { ...(title === undefined ? {} : { title }), dateFormat, axisFormat,
+    ...(tickInterval === undefined ? {} : { tickInterval }), tasks, entries }
+}
+
+function parseStart(
+  value: string,
+  format: string,
+  tasksById: Map<string, GanttTask>,
+  lineNumber: number,
+  sourceLine: string,
+): number {
+  const relative = value.match(/^(\d+(?:\.\d+)?)\s*(ms|s|m|h|d|w)$/i)
+  if (relative && (format === "HH:mm" || format === "HH:mm:ss")) {
+    const units = { ms: 1, s: 1_000, m: 60_000, h: 3_600_000, d: 86_400_000, w: 604_800_000 }
+    return Date.UTC(1970, 0, 1) + Number(relative[1]) * units[relative[2]!.toLowerCase() as keyof typeof units]
+  }
+  if (!/^after\s+/i.test(value)) return parseDate(value, format, lineNumber, sourceLine)
+  const dependencies = value
+    .replace(/^after\s+/i, "")
+    .trim()
+    .split(/\s+/)
+  const tasks = dependencies.map((id) => tasksById.get(id))
+  const missing = dependencies.find((_, index) => !tasks[index])
+  if (missing) throw syntaxError(lineNumber, sourceLine, `Unknown Gantt task id "${missing}"`)
+  return Math.max(...tasks.map((task) => task!.end))
+}
+
+function parseEnd(value: string, start: number, format: string, lineNumber: number, sourceLine: string): number {
+  const duration = value.match(/^(\d+(?:\.\d+)?)\s*(ms|s|m|h|d|w)$/i)
+  if (!duration) return parseDate(value, format, lineNumber, sourceLine)
+  const units = { ms: 1, s: 1_000, m: 60_000, h: 3_600_000, d: 86_400_000, w: 604_800_000 }
+  return start + Number(duration[1]) * units[duration[2]!.toLowerCase() as keyof typeof units]
+}
+
+function parseDate(value: string, format: string, lineNumber: number, sourceLine: string): number {
+  const numeric = Number(value)
+  if (format === "s" && Number.isFinite(numeric)) return numeric * 1_000
+  if (format === "X" && Number.isFinite(numeric)) return numeric * 1_000
+  if (format === "x" && Number.isFinite(numeric)) return numeric
+
+  const clock = value.match(/^(\d{2}):(\d{2})(?::(\d{2}))?$/)
+  if (clock && ["HH:mm", "HH:mm:ss"].includes(format)) {
+    const hours = Number(clock[1])
+    const minutes = Number(clock[2])
+    const seconds = Number(clock[3] ?? 0)
+    if (hours < 24 && minutes < 60 && seconds < 60 && (format === "HH:mm:ss") === (clock[3] !== undefined)) {
+      return Date.UTC(1970, 0, 1, hours, minutes, seconds)
+    }
+  }
+
+  const calendar = value.match(/^(\d{4})-(\d{2})-(\d{2})(?:[ T](\d{2}):(\d{2})(?::(\d{2}))?)?$/)
+  if (calendar && ["YYYY-MM-DD", "YYYY-MM-DD HH:mm", "YYYY-MM-DD HH:mm:ss", "YYYY-MM-DDTHH:mm", "YYYY-MM-DDTHH:mm:ss"].includes(format)) {
+    return Date.UTC(
+      Number(calendar[1]),
+      Number(calendar[2]) - 1,
+      Number(calendar[3]),
+      Number(calendar[4] ?? 0),
+      Number(calendar[5] ?? 0),
+      Number(calendar[6] ?? 0),
+    )
+  }
+  throw syntaxError(lineNumber, sourceLine, `Unsupported date "${value}" for dateFormat ${format}`)
+}
+
+function taskState(flags: Set<string>): GanttTaskState {
+  if (flags.has("milestone")) return "milestone"
+  if (flags.has("crit")) return "critical"
+  if (flags.has("done")) return "done"
+  if (flags.has("active")) return "active"
+  return "task"
+}
+
+function stripComment(value: string): string {
+  const comment = value.indexOf("%%")
+  return (comment < 0 ? value : value.slice(0, comment)).trim()
+}
+
+function syntaxError(lineNumber: number, sourceLine: string, reason?: string): MermaidSyntaxError {
+  return new MermaidSyntaxError("gantt", lineNumber, sourceLine, reason)
+}

package/src/merman/gantt/render-grid.ts

@@ -0,0 +1,17 @@
+import type { StyledText } from "@opentui/core"
+import type { DiagramCanvas } from "../core/canvas.js"
+import { renderDiagramGridStyledText } from "../core/render-grid.js"
+import type { GanttStyleColors } from "./style.js"
+import type { GanttCellStyle } from "./types.js"
+
+export type GanttGrid = DiagramCanvas<GanttCellStyle>
+
+export function renderGanttGridText(grid: GanttGrid): string {
+  return grid.toString({ trimBottom: true })
+}
+
+export function renderGanttGridStyledText(grid: GanttGrid, colors: GanttStyleColors): StyledText {
+  return renderDiagramGridStyledText(grid, (run) => (run.style ? colors[run.style] : undefined), undefined, {
+    trimBottom: true,
+  })
+}

package/src/merman/gantt/style.ts

@@ -0,0 +1,36 @@
+import { RGBA } from "@opentui/core"
+import { blendColor, rgba, type DiagramRgb } from "../core/color/style.js"
+import type { GanttBaseCellStyle, GanttCellStyle } from "./types.js"
+
+const DEFAULT_THEME_RGB = {
+  title: [228, 239, 232],
+  axis: [111, 138, 126],
+  section: [154, 184, 169],
+  task: [134, 225, 200],
+  active: [134, 225, 200],
+  critical: [230, 177, 126],
+  done: [111, 138, 126],
+  milestone: [198, 160, 246],
+} as const satisfies Record<GanttBaseCellStyle, DiagramRgb>
+
+export type GanttStyleColors = Required<Record<GanttCellStyle, RGBA>>
+
+export function resolveGanttStyleColors(
+  colors: Partial<Record<GanttBaseCellStyle | "background", RGBA | undefined>> = {},
+): GanttStyleColors {
+  const axis = colors.axis ?? rgba(DEFAULT_THEME_RGB.axis)
+  const background = colors.background ?? rgba([13, 17, 23])
+  return {
+    title: colors.title ?? rgba(DEFAULT_THEME_RGB.title),
+    axis,
+    section: colors.section ?? rgba(DEFAULT_THEME_RGB.section),
+    task: colors.task ?? rgba(DEFAULT_THEME_RGB.task),
+    active: colors.active ?? rgba(DEFAULT_THEME_RGB.active),
+    critical: colors.critical ?? rgba(DEFAULT_THEME_RGB.critical),
+    done: colors.done ?? rgba(DEFAULT_THEME_RGB.done),
+    milestone: colors.milestone ?? rgba(DEFAULT_THEME_RGB.milestone),
+    trackMedium: blendColor(axis, background, 0.35),
+    trackDim: blendColor(axis, background, 0.55),
+    trackFaint: blendColor(axis, background, 0.72),
+  }
+}

package/src/merman/gantt/types.ts

@@ -0,0 +1,45 @@
+export type GanttTaskState = "task" | "active" | "critical" | "done" | "milestone"
+
+export interface GanttSection {
+  label: string
+}
+
+export interface GanttTask {
+  label: string
+  id?: string
+  section?: GanttSection
+  start: number
+  end: number
+  state: GanttTaskState
+}
+
+export type GanttEntry = { type: "section"; section: GanttSection } | { type: "task"; task: GanttTask }
+
+export interface GanttDiagram {
+  title?: string
+  dateFormat: string
+  axisFormat: string
+  tickInterval?: number
+  tasks: GanttTask[]
+  entries: GanttEntry[]
+}
+
+export interface GanttDiagramRenderOptions {
+  layoutMaxWidth?: number
+  style?: GanttRenderStyle
+  track?: "dots" | "line"
+  endpoints?: "plain" | "points"
+  line?: GanttLineStyle
+  labels?: GanttLabelLayout
+  sections?: "compact" | "spaced"
+  trackTone?: GanttTrackTone
+}
+
+export type GanttRenderStyle = "rail" | "block" | "capsule" | "points" | "track"
+export type GanttLineStyle = "heavy" | "thin" | "double" | "dashed"
+export type GanttLabelLayout = "right" | "left" | "tree"
+export type GanttTrackTone = "medium" | "dim" | "faint"
+
+export type GanttBaseCellStyle = "title" | "axis" | "section" | GanttTaskState
+export type GanttTrackCellStyle = "trackMedium" | "trackDim" | "trackFaint"
+export type GanttCellStyle = GanttBaseCellStyle | GanttTrackCellStyle

package/src/merman/gitgraph/diagram.ts

@@ -0,0 +1,8 @@
+import { drawGitGraphDiagramGrid } from "./drawing.js"
+import { parseMermaidGitGraphDiagram } from "./parser.js"
+import { renderGitGraphGridText } from "./render-grid.js"
+import type { GitGraphDiagramRenderOptions } from "./types.js"
+
+export function renderGitGraphDiagram(content: string, options: GitGraphDiagramRenderOptions = {}): string {
+  return renderGitGraphGridText(drawGitGraphDiagramGrid(parseMermaidGitGraphDiagram(content), options))
+}