Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Hand-drawn process flowchart v1.0.0

Use this resource to animate a process diagram or a sequence of steps

New

  • 472 downloads
  • 224 likes
  • 104 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install hand-drawn-flowchart

First time: connect the CLI with

npx --yes palatekit@latest login

The agent builds an animated flowchart from a list of steps: each box draws with a slightly wobbly stroke, its handwritten label appears, then a curved connector links it to the next. You supply the steps and it sets size and spacing. The result works as an explanatory overlay in a video.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames (Node.js 22 and FFmpeg)
Licence
Apache-2.0

Similar resources

View all

What you get

  • README.md: usage guide (CONFIG, duration, render)
  • hw-pipeline.html: 7-second composition with three sample steps
  • assets/fonts/Caveat-700-latin.woff2: handwriting font

Good fit for

  • Educational videos explaining a method in steps
  • Client-process or offer presentations
  • Tutorials and diagrams for social media

Not for

  • Precise technical diagrams (networks, UML)
  • More than five or six steps on one row

Tags

  • flowchart
  • handwritten
  • process
  • teaching
  • animation

About

You say

"Animate a four-step diagram: Idea, Script, Shoot, Edit, with hand-drawn boxes."

Three wobbly hand-drawn boxes joined by curved arrows with handwritten labels.

Block published by HeyGen (HyperFrames) under the Apache-2.0 license.

Show more

Prerequisites

You bring
The list of steps to show and Your brand colours if you want them
Dependencies
HyperFrames (Node.js 22 and FFmpeg)

How to use it

  1. Install the block and its font in your HyperFrames project
  2. Edit the CONFIG.nodes list with your steps
  3. Render the video with the HyperFrames render command

Content preview

Files

  • assets/fonts/Caveat-700-latin.woff273.2 KB
  • hw-pipeline.html10.8 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.8 KB
  • registry-item.json0.7 KB

Origin and licence

Modified by PalateKit

Author
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/blocks/hw-pipeline
Licence
Apache-2.0

Notice

Version modifiée de « Hand-Drawn Flowchart » (HeyGen (HyperFrames), Apache-2.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

How many steps can I show?

Boxes are centred automatically; beyond five, reduce boxW, gap and fontSize in CONFIG.

Is the font included?

Yes, Caveat 700 ships in assets/fonts and must stay at that relative path.