Visual Learning: what it is and how to make a lesson

A Visual Learning lesson is a diagram that teaches. You write one idea per card, write what the voice should say, and press Explain: the lesson draws itself, reads itself, and exports as a narrated video. This page is the reference — what a lesson is made of, how it plays, and how to make one in the Visual Learning editor.

What a lesson is

Most diagram types are notations: a flowchart says what a diamond means. Visual Learning is a format: a sequence of cards, in reading order, each carrying one idea and the words that explain it. The picture and the narration live in one file, so the same document is the slide deck, the script, the subtitle track and the video.

• Spotlight Card — the everyday building block. A heading, a short story text, bullets, and optionally a picture or a small diagram drawn right on the card.
• Explainer scene — a full video frame for the moments that want one: a hook, a comparison, a hero diagram, a payoff. Six layouts, chosen per scene or left on automatic.
• Narration — one paragraph per card, written in the Notes panel. It is spoken, shown as subtitles, and highlighted word by word as the voice reads.
• A look — the Drawing Book theme turns the deck into a notebook that inks itself; Studio is the dark video edition; any of the other themes works too.

Anatomy of a lesson

Open any of the published lessons and this is what you will find inside:

• A title. The document title is the lesson title; it opens the show on the title slide and names the exported video.
• Seven to ten cards, one per idea, in the order they should be read. Each card has a heading (the claim), two or three sentences (the story), bullets where a list is clearer than prose, and often a picture or a mini diagram — a few boxes and arrows drawn on the card itself.
• Narration per card, forty to eighty words each, so a card holds the screen for twenty to thirty seconds. The whole lesson lands between three and six minutes.
• A “why this matters” note on the cards that need one — a single sentence shown as a quiet tile while the card plays.
• The frame slides: an optional intro, an index of the cards, and the closing “thank you” slide. Each is a checkbox on the Slides tab.

How it plays

Press Explain and the lesson plays itself, card by card. The pen inks the card outline, the heading and bullets arrive in order, and a diagram on the card wires itself box by box. The narration for that card is read aloud, its words highlighted as they are spoken, and the highlight follows the voice — it pauses when the speaker pauses. When the card is done, the next one slides in. The frame grows with the reveal, so the first card is never a speck on an empty page. At the end, the closing slide holds for a moment and the show ends, or loops if you ask it to.

The same playback is what the exports record: the video is not a screen capture of the editor, it is the show rendered frame by frame with the narration muxed in.

How to make one

1. Open the editor. Go to /learn — or press Start creating on the home page and pick Visual Learning. The palette opens on the Spotlight Card group.
2. Add a card per idea. Click Spotlight Card once for every point you want to make. Cards land in a row in reading order; drag to reorder, or use present-order mode (O) to renumber them by clicking.
3. Fill the card. Select a card and use the inspector: heading, story text, bullets. Add a picture with the picture block, or draw a mini diagram straight on the card with the arrow text — Question -> Answer draws two boxes and an arrow.
4. Write the narration. Open the Notes panel. Each card has its own note: write what the voice should say, in full sentences, as you would say it out loud. Add the one-line “why this matters” where a card needs it.
5. Use a scene where a card is too small. For the hook, a side-by-side comparison or the payoff, add an Explainer scene instead of a card. Pick a layout in the inspector, or leave it on automatic and let the content decide.
6. Choose the look. On the Theme tab, pick Drawing Book for the hand-drawn notebook or Studio for the dark video edition. The two book themes ask for a free account — no subscription — and unlock the moment you sign in.
7. Set the frame. On the Slides tab, switch the title slide, the intro, the index and the thank-you slide on or off, and untick any card you want to keep in the file but out of this show.
8. Preview with Explain. Press Explain, watch the whole thing, and fix what reads wrong. Timing follows the narration, so a card that lingers wants shorter words, not a slider. Under Settings you can pick the device voice, the pace, subtitles and the spotlight.
9. Export. Press Export: a narrated video, an animated GIF or SVG, or still PNG. The simple hub covers the common cases; “All formats & advanced options” opens the full modal. Animated exports need a free account.
10. Save the file. The lesson is one plain-text file — cards, pictures, narration and all. It stays in your browser between visits and downloads with Save. Nothing is uploaded.

Writing a lesson that teaches

The published lessons follow a short brief, and it is a good one to borrow:

• One idea per card. If a card needs two headings, it is two cards.
• Open with the question. The first card or scene is the thing the viewer wants answered, in their words, not the definition.
• Keep one running example. A single concrete case — one order, one document, one question — carried through every card beats a fresh example on each.
• Draw the relationship, list the rest. A mini diagram where things connect, bullets where it is simply a list, prose where it is a story.
• Say one limitation. One card on when the idea does not apply, or what it cannot do, is what makes the rest believable.
• End with a decision rule. The last card tells the viewer what to do differently now.
• Write the narration for the ear. Short sentences, contractions, no bullet-speak. Read it aloud once before you press Explain.

Export, save and share

A lesson leaves the editor in four ways. A narrated video for YouTube, a course platform or a slide deck. An animated GIF or SVG for a page or a README — the SVG plays anywhere an image does. A PNG or SVG still of the finished deck. And the file itself, which anyone can open in Diagramium and edit — the lessons on Visual Learning are exactly such files, published so they play read-only in the browser.

The narration in your own lesson is read by the voice on your device when it plays and when it exports. The published lessons carry a baked studio voice, so every viewer hears the same take.

Examples to learn from

Visual Learning carries the course AI for Beginners — Visual Edition: seven lessons so far, each a Drawing Book deck of eight or nine cards with a studio voice, three to six minutes long. Hover a lesson on the home page to watch it draw itself; press Start this lesson for the full narrated show. They are made in this editor, with this workflow, and they are the best picture of what a finished lesson looks like.

Create a lesson Watch the lessons

Questions

Do I need an account?

Not to make a lesson, play it or export stills. The two book themes and the animated exports (video, GIF, animated SVG) ask for a free account — no subscription.

Does it work offline?

Yes. After the first load the editor runs on your device, and the lesson file is yours.

Who owns the lesson?

You do. Diagramium never receives it — it lives in your browser and in the files you export.

Can I use an existing diagram?

Yes. Spotlight Cards exist in every diagram type, so a card-based deck made in, say, the Architecture editor plays the same way. Visual Learning is the editor set up for lessons from the start: cards first, the book look by default.