Domphy

ER, Gantt, Pie & Git Graphs

Entity-relationship diagrams

ER diagrams model the data structure of a system — entities, their attributes, and how they relate.

Basic syntax

<div class="dp-mermaid language-mermaid">erDiagram USER ||--o{ ORDER : places ORDER ||--|{ LINE_ITEM : contains PRODUCT }|..|{ LINE_ITEM : &quot;included in&quot;</div>

Cardinality notation

Cardinality is written on both sides of the -- connector:

SymbolMeaning
||Exactly one
o|Zero or one
}|One or more
}oZero or more

Combine left and right sides with -- (identifying) or .. (non-identifying):

<div class="dp-mermaid language-mermaid">erDiagram PERSON ||--|| PASSPORT : &quot;has one&quot; CUSTOMER ||--o{ ADDRESS : &quot;can have&quot; ORDER ||--|{ LINE_ITEM : &quot;must have&quot; AUTHOR }|..|{ BOOK : &quot;writes&quot;</div>

Entity attributes

List attributes inside { }. Each attribute declares a type, a name, and optional key / comment:

<div class="dp-mermaid language-mermaid">erDiagram USER { int id PK string email UK string name date createdAt } SESSION { int id PK int userId FK string token UK datetime expiresAt } ORDER { int id PK int userId FK decimal total string status } USER ||--o{ SESSION : &quot;authenticated by&quot; USER ||--o{ ORDER : places</div>

Key markers: PK (primary key), FK (foreign key), UK (unique key). You can append a comment string after the key marker:

USER {
  int id PK "Auto-increment"
  string email UK "Normalized lowercase"
}

Gantt charts

Gantt charts display project schedules with tasks laid out on a time axis.

Basic syntax

<div class="dp-mermaid language-mermaid">gantt title Release 2.0 dateFormat YYYY-MM-DD section Design Wireframes :done, w1, 2025-01-06, 7d Prototypes :active, p1, 2025-01-13, 14d section Development Core API : c1, after p1, 21d UI components: u1, after c1, 14d section Release QA :crit, q1, after u1, 7d Deploy :milestone, m1, after q1, 0d</div>

Date formats

The dateFormat directive controls how dates are parsed in task definitions:

Format tokenExample
YYYY-MM-DD2025-03-15
DD/MM/YYYY15/03/2025
MM/DD/YYYY03/15/2025
XUnix timestamp (seconds)

Control the display format on the axis with axisFormat:

axisFormat %Y-%m

Common axisFormat tokens: %Y year, %m month (0-padded), %b abbreviated month name, %d day.

Task syntax

Task label  :status, taskId, startDate, duration
Task label  :status, taskId, after otherTaskId, duration
  • startDate — absolute date matching dateFormat, or after taskId for a dependency
  • duration — number followed by d (days), w (weeks), h (hours), or m (minutes)
  • taskId — optional identifier used by after references
  • status — optional comma-separated flags

Task status flags

FlagMeaning
doneCompleted task (gray fill)
activeIn progress (blue fill)
critCritical path (red fill)
milestoneZero-duration diamond marker

Flags are combinable: :done, crit, renders a completed critical task.

Sections

Group tasks under a named section with the section keyword. Each section is a horizontal band:

<div class="dp-mermaid language-mermaid">gantt title Feature timeline dateFormat YYYY-MM-DD section Research Competitor analysis :done, r1, 2025-01-01, 5d User interviews :done, r2, after r1, 3d section Implementation Backend :active, i1, after r2, 14d Frontend : i2, after i1, 10d section Launch Beta release :crit, milestone, l1, after i2, 0d</div>

Exclude weekends and specific days

excludes weekends
excludes monday wednesday 2025-12-25

Place excludes before the first section.

Today marker

Show a vertical line at the current date:

todayMarker on

Pie charts

Simple proportional charts with labeled slices.

Basic syntax

<div class="dp-mermaid language-mermaid">pie title Browser market share &quot;Chrome&quot; : 65.2 &quot;Safari&quot; : 18.9 &quot;Firefox&quot; : 4.0 &quot;Edge&quot; : 4.1 &quot;Other&quot; : 7.8</div>

Show raw values

Append showData after pie to display numeric values alongside percentages:

<div class="dp-mermaid language-mermaid">pie showData title Weekly active users &quot;Mon&quot; : 8200 &quot;Tue&quot; : 9100 &quot;Wed&quot; : 9400 &quot;Thu&quot; : 8800 &quot;Fri&quot; : 7600 &quot;Sat&quot; : 4300 &quot;Sun&quot; : 3900</div>

Values are proportional (not percentages) — Mermaid normalizes them.

Git graphs

Git graphs visualize branch and merge history.

Basic syntax

<div class="dp-mermaid language-mermaid">gitGraph commit commit branch feature checkout feature commit commit checkout main merge feature commit</div>

Commit metadata

Add an id label, a tag, or a type to a commit:

<div class="dp-mermaid language-mermaid">gitGraph commit id: &quot;init&quot; commit id: &quot;feat: add auth&quot; branch release checkout release commit id: &quot;v1.0.0&quot; tag: &quot;v1.0.0&quot; type: HIGHLIGHT checkout main merge release id: &quot;merge v1.0.0&quot; commit id: &quot;feat: next&quot; type: REVERSE</div>

Commit types: NORMAL (default), REVERSE (dotted border), HIGHLIGHT (filled).

Multiple branches

<div class="dp-mermaid language-mermaid">gitGraph commit branch develop checkout develop commit commit branch feature/login checkout feature/login commit commit checkout develop merge feature/login checkout main merge develop tag: &quot;v2.0.0&quot;</div>

Cherry-pick

Copy a specific commit to the current branch:

<div class="dp-mermaid language-mermaid">gitGraph commit id: &quot;A&quot; branch hotfix checkout hotfix commit id: &quot;fix&quot; checkout main cherry-pick id: &quot;fix&quot; commit id: &quot;B&quot;</div>

Orientation

Switch from the default left-to-right to top-to-bottom with LR → TB:

<div class="dp-mermaid language-mermaid">gitGraph TB commit branch develop checkout develop commit checkout main merge develop</div>

Rendering with @domphy/mermaid

All four diagram types use the same API. Build-time with cache:

import { renderMermaidCached } from "@domphy/mermaid"

const erSvg = await renderMermaidCached(`erDiagram
  USER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains`, { theme: "neutral" })

const ganttSvg = await renderMermaidCached(`gantt
  title Sprint 12
  dateFormat YYYY-MM-DD
  section Backend
    Auth refactor :done, a1, 2025-06-01, 5d
    API v2        :active, a2, after a1, 10d`, { theme: "default" })

const pieSvg = await renderMermaidCached(`pie title Errors by type
  "Validation" : 42
  "Network"    : 28
  "Auth"       : 18
  "Other"      : 12`, { theme: "neutral" })

Embed the resulting SVG strings in Domphy elements:

const DiagramRow = {
  div: [
    { div: erSvg, class: "mermaid", ariaLabel: "Entity relationships" },
    { div: ganttSvg, class: "mermaid", ariaLabel: "Sprint timeline" },
    { div: pieSvg, class: "mermaid", ariaLabel: "Error breakdown" },
  ],
  style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1.5rem" },
}

Client-side for any of these types:

import { mermaidClient } from "@domphy/mermaid"

const PieChart = {
  pre: [{ code: `pie title Q1 Revenue\n  "Product A" : 40\n  "Product B" : 35\n  "Other" : 25` }],
  $: [mermaidClient({ theme: "neutral" })],
}