Home› Guide

Guide

How to use slicerflow

A practical, step-by-step walkthrough of every workspace — from your first diagram to a narrated, exported video. Everything runs in your browser; nothing is uploaded.

Getting started

Open the studio at slicerflow.live — no account, no install. Across the top you'll find the workspaces: Build (visual canvas), Code (the YAML editor), Prototype, Video, Docs and Library. Everything you make stays on your device.

  1. Pick Simple mode for a clean, drag-and-drop canvas, or Advanced for the full inspector, panels and timeline.
  2. Start from a blank canvas, an example in the Library, or by importing an existing draw.io / mermaid diagram.
  3. Press 🎓 Learn in the header any time for an interactive, spotlighted walkthrough.

Build studio

The Build studio is a draw.io / Excalidraw-style canvas that lays out and animates your diagram for you.

  1. Drag a shape, icon or ready-made diagram from the left sidebar onto the canvas — or double-click empty space to drop a default shape.
  2. Click an element to select it; drag the corner handles to resize, marquee-drag to select several, and group them together.
  3. Use the Arrow tool to connect shapes — arrows route themselves around obstacles and re-flow as you move things.
  4. Open the inspector to set color, theme, fill, border and the reveal step. Pick an animation (pop, fade, rise, draw, motion…) from the dropdown.
  5. Group related shapes into a band/frame with its own title and tint; save a group as a reusable component to stamp anywhere.
Tip: the canvas and the code stay in sync — anything you draw is editable as YAML in the Code tab, and vice-versa.

Code editor YAML

Prefer typing? The Code tab is a live YAML editor — every keystroke recompiles and re-renders instantly, with inline errors.

# the whole animation in a few lines title: How it works animation: pop items: user: { icon: user, show: 0 } brain: { text: The brain, show: 1 } out: { text: Result ✨, show: 2 } arrows: - { from: user, to: brain, say: asks } - { from: brain, to: out }

show: sets the reveal order, animation: the entrance style, and arrows: the connections. See the full reference in the Docs.

Import draw.io & mermaid

Already have a diagram? Bring it in and slicerflow converts it to editable, animatable YAML.

  1. Open the Import dialog from the toolbar.
  2. Paste mermaid code (flowchart, sequence, class, ER, state, mindmap, journey, pie, gantt and more) or a draw.io export (plain XML or a compressed .drawio file).
  3. slicerflow lays it out, then you tweak, theme and animate it like any other diagram.

Prototype & wireframes

The Prototype tool turns the canvas into a sketch-style wireframing and clickable-prototype builder — also available on its own at slicerflow.live/prototype.

  1. Choose a device frame — phone, Android, tablet or desktop — and add screens.
  2. Drag hand-drawn widgets (buttons, inputs, lists, nav bars…) or drop a prebuilt block like a login or checkout.
  3. Link elements to other screens with a Figma-style goto — pick a slide, push or fade transition.
  4. Toggle the Sketch look for a hand-drawn feel, then press Play to click through with real ripples and transitions.
  5. Export the flow as an animated GIF walkthrough.

Video studio new

The Video studio sequences your animation pages into one narrated, shareable video — Loom-style, entirely in the browser.

  1. Add pages to your reel — from the current Build diagram, from other saved diagrams, or by importing images/GIFs. Set each page's duration, speed and aspect ratio (16:9, 9:16 or 1:1).
  2. Add narration: upload an audio clip per page, or record your voice with the microphone.
  3. To record with your camera, press Record → Set up camera: choose the pages to record, face + screen or audio-only, and Auto vs Step-by-step. Frame your face and adjust contrast, then a 3-2-1 countdown starts the take.
  4. Record all at once or one page at a time and merge — pages you don't record are still included as-is; only pages set to “Skip” are left out.
  5. Layer background music from the built-in library (Calm, Uplift, Lo-fi) or your own files — across the whole video or a page range.
  6. Export to MP4 (H.264) or WebM (VP9) — frame-accurate, watermark-free.
Per-page control: each page can be Video + audio, Gif / animation only (no narration), Audio only (blank frame), or Skip.

Text overlays

Add captions and titles over any Video page — they wrap to stay on-screen and can animate in and out.

  1. Select a page and press ＋ Add under Text overlays. Type your text — long lines wrap automatically inside the frame.
  2. Set the animation (Fade, Rise, Pop, Slide or Typewriter) and its speed, plus font, size, weight, color, alignment and a pill or shadow background.
  3. Position it with the x/y sliders, or scrub the video and use Appear @ / Hide @ to time it to your narration.
Stays clear: overlays sit below the animation and are nudged out of the way of the webcam bubble so text never covers your face.

Export

Every workspace exports without an account or a watermark (a slicerflow corner mark is optional and off by default).

  1. Diagrams: export an animated GIF, or a crisp PNG / JPEG still at 3× resolution.
  2. Prototypes: export the click-through flow as a GIF walkthrough.
  3. Video: export MP4 or WebM; or save individual page takes and merge them.

Ready to make something?

Open the studio and start with a blank canvas or an example.

Open studio → Read the docs