Skip to main content

YouTube to diagram: the steps of a video, drawn as a flow

Explainers usually walk through a sequence: a cause, what follows, what it leads to. A flow diagram shows that sequence faster than any paragraph.

BlogPen draws the diagram from the note. Each card is a step, and a time chip on the card plays the moment it comes from, so the drawing stays tied to the source.

Create a note

A real example

NOAA SciJinks · What Causes Tides? · 3:32 · Public domain: US government work (NOAA)

Watch the source

TL;DR from the note

  • The moon’s gravity drives ocean tides by pulling water into bulges on Earth.0:42
  • Two water bulges explain why most places experience two high tides each day.2:28
  • As oceans rise, higher tides can flood coastal communities, which can use scientific information to plan ahead.3:13
Flow of “What Causes Tides?” by its key momentsThe moon is the main force behind… → The moon’s pull creates a high-tide… → The tidal force creates two water… → Warming and rising oceans are making… → Coastal communities can use…The moon is the main force behind…0:42The moon’s pull creates a high-tide…1:22The tidal force creates two water…2:12Warming and rising oceans are making…2:38Coastal communities can use…3:13Flow of “What Causes Tides?” by its key momentsThe moon is the main force behind… → The moon’s pull creates a high-tide… → The tidal force creates two water… → Warming and rising oceans are making… → Coastal communities can use…The moon is the main force behind…0:42The moon’s pull creates a high-tide…1:22The tidal force creates two water…2:12Warming and rising oceans aremaking…2:38Coastal communities can use…3:13

Written by BlogPen (note:v1) on 2026-11-05 and shown unedited. Times open the video at that second.

What you get

  • A flow of rounded cards, one per step
  • A time chip on each card that cites the video
  • A left-to-right row on wide screens, a stack on phones
  • Comparison and timeline diagrams on request
  • The same drawing in the PPT, Notion and Word outputs

How it works

  1. Create a note from the YouTube link.
  2. Open the Diagram tab to see the flow of the note's sections.
  3. Ask for a different shape, such as a comparison or a timeline, and check each card's time.

Good to know

Is the diagram an image or editable?

In BlogPen it is a drawing you can change from the note. Exports carry it as an image so it looks the same everywhere.

How many steps can a flow have?

Up to five fit on one row; longer flows wrap onto a second row so the labels stay readable.

Where do the times on the cards come from?

From the note. A card's time is the transcript time of the section or quote it draws on.