# mng-dev-ai/explainer-video architecture

> Architecture diagram of the GitHub repository mng-dev-ai/explainer-video, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mng-dev-ai/explainer-video
- Repository: https://github.com/mng-dev-ai/explainer-video

## Overview

Explainer-video is a local, agent-driven tool that turns a topic into an animated, narrated MP4. The agent prepares narration and a custom animation page, then runs the pipeline, which generates or reuses voice audio, provides timing data to the page, records it in a headless browser, and merges the audio into the final video. The graph reflects the documented workflow and sampled runtime code; authoring details beyond the README are not verified from SKILL.md.

Main entry points: [`lib/pipeline.js`](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js) (Pipeline CLI), [`lib/render.js`](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/render.js) (Browser rendering), [`lib/edge-tts.js`](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/edge-tts.js) (Voice generation), [`SKILL.md`](https://github.com/mng-dev-ai/explainer-video/blob/main/SKILL.md) (Skill instructions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Agent authoring"]
  node_skill["Skill instructions<br/>[SKILL.md]"]
  node_narration["Narration script"]
  node_animation["Custom animation page"]
end

subgraph group_pipeline["Pipeline orchestration"]
  node_cli["Pipeline CLI<br/>[pipeline.js]"]
  node_config["Config and inputs<br/>[pipeline.js]"]
  node_htmlprep["Timing injection<br/>[pipeline.js]"]
end

subgraph group_audio["Narration audio"]
  node_cache[("Voice cache<br/>[pipeline.js]")]
  node_tts["Voice generation<br/>[edge-tts.js]"]
  node_audio["Audio and durations<br/>[pipeline.js]"]
end

subgraph group_video["Video rendering"]
  node_render["Browser rendering<br/>[render.js]"]
  node_rawvideo["Recorded animation"]
  node_mux["Audio-video merge<br/>[pipeline.js]"]
  node_mp4["Finished MP4"]
end

node_user(("Topic requester"))
node_agent(("Coding agent"))
node_edge["Microsoft Edge TTS"]
node_ffprobe["Duration probing"]
node_chromium["Headless Chromium"]
node_ffmpeg["FFmpeg"]

node_user -->|"requests topic"| node_agent
node_agent -->|"reads guidance"| node_skill
node_agent -->|"writes script"| node_narration
node_agent -->|"writes page"| node_animation
node_agent -->|"runs pipeline"| node_cli
node_cli -->|"loads inputs"| node_config
node_config -->|"provides script"| node_narration
node_config -->|"provides HTML"| node_animation
node_cli -->|"checks and writes"| node_cache
node_cli -->|"requests speech"| node_tts
node_tts -->|"generates audio"| node_edge
node_cli -->|"concatenates segments"| node_audio
node_cli -->|"probes duration"| node_ffprobe
node_audio -->|"provides timing"| node_htmlprep
node_animation -->|"supplies page"| node_htmlprep
node_htmlprep -->|"passes prepared page"| node_render
node_render -->|"records page"| node_chromium
node_chromium -->|"produces recording"| node_rawvideo
node_render -->|"returns video path"| node_rawvideo
node_cli -->|"merges media"| node_mux
node_rawvideo -->|"provides video"| node_mux
node_audio -->|"provides audio"| node_mux
node_mux -->|"invokes merge"| node_ffmpeg
node_ffmpeg -->|"writes output"| node_mp4

click node_skill "https://github.com/mng-dev-ai/explainer-video/blob/main/SKILL.md"
click node_cli "https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js"
click node_config "https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js"
click node_cache "https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js"
click node_tts "https://github.com/mng-dev-ai/explainer-video/blob/main/lib/edge-tts.js"
click node_audio "https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js"
click node_htmlprep "https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js"
click node_render "https://github.com/mng-dev-ai/explainer-video/blob/main/lib/render.js"
click node_mux "https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_skill,node_narration,node_animation toneBlue
class node_cli,node_config,node_htmlprep toneAmber
class node_cache,node_tts,node_audio,node_user toneMint
class node_render,node_rawvideo,node_mux,node_mp4 toneRose
class node_agent,node_edge,node_ffprobe,node_chromium,node_ffmpeg toneIndigo
```

## Components

### Agent authoring

- [Skill instructions](https://github.com/mng-dev-ai/explainer-video/blob/main/SKILL.md): `SKILL.md`
- **Narration script**
- **Custom animation page**

### Pipeline orchestration

- [Pipeline CLI](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js): `lib/pipeline.js`
- [Config and inputs](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js): `lib/pipeline.js`
- [Timing injection](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js): `lib/pipeline.js`

### Narration audio

- [Voice cache](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js): `lib/pipeline.js`
- [Voice generation](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/edge-tts.js): `lib/edge-tts.js`
- [Audio and durations](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js): `lib/pipeline.js`

### Video rendering

- [Browser rendering](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/render.js): `lib/render.js`
- **Recorded animation**
- [Audio-video merge](https://github.com/mng-dev-ai/explainer-video/blob/main/lib/pipeline.js): `lib/pipeline.js`
- **Finished MP4**

### Other components

- **Topic requester**
- **Coding agent**
- **Microsoft Edge TTS**
- **Duration probing**
- **Headless Chromium**
- **FFmpeg**

## Connections

- Topic requester → Coding agent: requests topic
- Coding agent → Skill instructions: reads guidance
- Coding agent → Narration script: writes script
- Coding agent → Custom animation page: writes page
- Coding agent → Pipeline CLI: runs pipeline
- Pipeline CLI → Config and inputs: loads inputs
- Config and inputs → Narration script: provides script
- Config and inputs → Custom animation page: provides HTML
- Pipeline CLI → Voice cache: checks and writes
- Pipeline CLI → Voice generation: requests speech
- Voice generation → Microsoft Edge TTS: generates audio
- Pipeline CLI → Audio and durations: concatenates segments
- Pipeline CLI → Duration probing: probes duration
- Audio and durations → Timing injection: provides timing
- Custom animation page → Timing injection: supplies page
- Timing injection → Browser rendering: passes prepared page
- Browser rendering → Headless Chromium: records page
- Headless Chromium → Recorded animation: produces recording
- Browser rendering → Recorded animation: returns video path
- Pipeline CLI → Audio-video merge: merges media
- Recorded animation → Audio-video merge: provides video
- Audio and durations → Audio-video merge: provides audio
- Audio-video merge → FFmpeg: invokes merge
- FFmpeg → Finished MP4: writes output