> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Hand-Drawn Flowchart > Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list # Hand-Drawn Flowchart Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list **Hand-Drawn Flowchart** ```html hw-pipeline.html

``` Copy npx hyperframes add hw-pipeline to the clipboard That writes `compositions/hw-pipeline.html`, plus 1 supporting file under `assets/fonts/`. ## Add it to your video It runs for 7 seconds at 1920×1080. Paste this into your composition: ```html index.html

``` Move it in time with `data-start`. Put it on a different timeline row with `data-track-index`. See [data attributes](/concepts/data-attributes.md) for the rest. {/* hf:generated-footer */} Tagged `handwritten` `diagram` `data-viz` `overlay`. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md)