Branch and merge

No. 32 · SVG · Model railway

Drag to committap to merge

A model railway on a baseboard. Each commit is a station with one stud per parent; committing lays track, and a merge joins feature's line back into main.

Prompt

/anatomy explain how git branches and merges, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { GitMerge } from "anatomy-figures";

<GitMerge theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import GitMerge from "anatomy-figures/git-merge";

Theme it

Five themes (dark, light, paper, blueprint, sepia), or your own colours through tokens. Every token.

page.tsx

<GitMerge
  theme="light"
  tokens={{
    "--anatomy-card": "#ffffff",
    "--anatomy-lit": "#e5484d",
  }}
/>

Without React

index.html

import { define } from "anatomy-figures/element/git-merge";

define();

<anatomy-git-merge theme="light"></anatomy-git-merge>