ExplainGit for LiaScript: Visualize Git Repositories Interactively

Git is notoriously difficult to teach with text alone. The ExplainGit template embeds onlywei’s explain-git-with-d3 into LiaScript, visualizing commits, branches, merges, and checkouts as animated D3 diagrams.

Define a sequence of git commands in a code block, or present an empty repository for live interaction.

Quick Start

<!--
import: https://raw.githubusercontent.com/LiaTemplates/ExplainGit/master/README.md
-->

Macro 1: @ExplainGit — Empty Repository Sandbox

Inserts a blank git visualization that students can type commands into:

@ExplainGit

An input prompt appears below the diagram. Students can type git commands and watch the graph update in real time.

Macro 2: @ExplainGit.eval — Pre-define a Command Sequence

Place @ExplainGit.eval in the header of a code block. The block content is a sequence of git commands — one per line. The simulation runs them in order when the slide loads.

```text @ExplainGit.eval
git commit
git commit
git branch feature
git checkout feature
git commit
git commit
git checkout main
git merge feature
```

Supported Commands

Limitation: Branches in the remote origin are not supported. The create origin command enables remote tracking, but branching and merging on the remote side cannot be visualized.

Examples

Feature Branch and Merge

```text @ExplainGit.eval
git commit -m "Initial commit"
git commit -m "Add README"
git branch feature-login
git checkout feature-login
git commit -m "Add login form"
git commit -m "Add auth logic"
git checkout main
git merge feature-login
git commit -m "Post-merge cleanup"
```

Try it live — watch the feature branch grow and merge back into main:

Diverged Branches

```text @ExplainGit.eval
git commit
git branch hotfix
git checkout hotfix
git commit -m "Fix bug"
git checkout main
git commit -m "Continue feature work"
git merge hotfix
```

Try it live — observe main and hotfix diverge then converge at the merge commit:

Remote Tracking

```text @ExplainGit.eval
git commit
create origin
git commit
git commit
```

Full Template Demo

Use Cases

Version control courses — Walk through commit history, branching, and merging with animated diagrams that update command by command.

Software engineering lectures — Teach common git workflows (feature branch, gitflow, trunk-based development) by visualizing the DAG step by step.

Student practice — Leave an empty @ExplainGit sandbox for students to experiment with commands before applying them in a real repository.

Code review training — Show the history of a simulated project with realistic commit messages and branch names.

Technical Facts

Try It

Related Templates

• LogicEmu — logic circuit visualization with ASCII diagrams
• DigiSim — digital logic simulation with gates and latches
• LiveEdit-Embeddings — embed live LiaScript examples inline