FlowBoard
← Back to FlowBoard

Quick Start Guide

Get up and running with FlowBoard in minutes.

Setup

1. Access FlowBoard

Visit the live application at: https://jweese001.github.io/flow-board/

2. Configure API Keys

Click Settings in the left sidebar to add your API keys:

ProviderWhere to Get Key
Google GeminiGoogle AI Studio
fal.aifal.ai Dashboard

You need at least one API key to generate images.

Your First Scene

Step 1: Add a Character

  1. Find Character in the left sidebar under "Add Nodes"
  2. Click the + button to add it to the canvas
  3. Click the node to select it
  4. In the Properties panel (right side), fill in:
    • Name: "Detective Marcus Cole"
    • Description: "A weathered detective in his 50s, graying hair, worn trench coat, world-weary eyes"

Step 2: Add a Setting

  1. Add a Setting node from the sidebar
  2. Configure:
    • Name: "City Streets"
    • Description: "Rain-slicked city streets at night, neon signs reflecting in puddles, 1940s urban atmosphere"

Step 3: Add Style

  1. Add a Style node
  2. Configure:
    • Name: "Noir"
    • Description: "High contrast black and white, dramatic shadows, film noir cinematography, moody lighting"

Step 4: Add Action

  1. Add an Action node
  2. Configure:
    • Description: "Standing under a streetlight, lighting a cigarette, watching the entrance to a jazz club across the street"

Step 5: Add Output

  1. Add an Output node
  2. This is where you'll generate your image

Step 6: Connect Everything

Drag from the right handle (output) of each node to the left handle (input) of the next:

Character ─┐ Setting ───┼──→ Action ──→ Output Style ─────┘

Step 7: Generate

  1. Click the Output node to select it
  2. Add a Parameters node and connect it to Output (to the "config" handle)
  3. Choose your model (Gemini or Flux)
  4. Click Generate on the Output node

Key Concepts

Pull-Based Assembly

Only nodes connected to an Output contribute to the prompt. Unconnected nodes on the canvas are just available assets—they don't affect generation.

Node Colors

ColorNode TypePurpose
BlueCharacterWho
GreenSettingWhere
PurpleStyleHow it looks
AmberPropConsistent objects
OrangeActionWhat's happening
LimeTextDialogue & captions
PinkShotCamera framing
TealParametersGeneration settings
RoseNegativeWhat to avoid
RedOutputGenerate image
CyanReferenceImport images
IndigoTransformPosition/scale/rotate
VioletTimelineAnimation control
SkyCompLayer compositing
EmeraldPageComic layouts

Grouping Nodes

Select multiple nodes and press Cmd+G (Mac) or Ctrl+G (Windows) to group them. Groups move together and display a labeled bounding box.

Press Cmd+Shift+G to ungroup.

Isolation Mode

Double-click a group's border to isolate it—other nodes fade out so you can focus. Press Escape or double-click again to exit.

Building a Comic Page

1. Create Multiple Scenes

Build several complete node trees, each ending in an Output node. Generate an image for each.

2. Add a Page Node

Add a Page node from the sidebar.

3. Connect Outputs to Page

Wire each Output node to a panel slot on the Page node. The Page shows a preview of your layout.

4. Configure Layout

In the Page properties:

5. Export

Click Export Page to download your composed comic page as a PNG.

Animation Basics

FlowBoard can animate your generated images using the Timeline and Transform nodes.

Creating an Animation

Step 1: Set Up Your Image

Start with an image you want to animate:

Step 2: Add a Transform Node

  1. Add a Transform node from the Animation section in the sidebar
  2. Connect your image source (Output or Reference) to the Transform's input
  3. The Transform controls: Scale, Offset X/Y, Rotation, and Opacity

Step 3: Add a Timeline Node

  1. Add a Timeline node
  2. Connect the Timeline's output to the Transform's "timeline-in" handle
  3. Configure the Timeline:
    • FPS: 24, 30, or 60 frames per second
    • Duration: Length in seconds
    • Easing: How keyframes interpolate

Step 4: Add Keyframes

  1. Check the Transform in the Timeline's "TRANSFORMS" list
  2. Set the playhead to time 0s
  3. Adjust the Transform values (e.g., Scale = 1.0)
  4. Click + Add to add a keyframe
  5. Move playhead to end (e.g., 1.0s)
  6. Change Transform values (e.g., Scale = 1.2)
  7. Click + Add again

Step 5: Preview & Export

Click the Play button on the Timeline to preview. Click Export Frames to download a ZIP of PNG frames.

Convert to video using ffmpeg:

ffmpeg -framerate 30 -i frames/frame_%05d.png -c:v libx264 -pix_fmt yuv420p output.mp4

Compositing with Comp Node

The Comp node layers multiple images together, perfect for parallax effects or compositing characters over backgrounds.

Layer Order (back to front)

HandleLayerTypical Use
backBackgroundSky, distant scenery
midMidgroundMain environment
foreForegroundCharacters, main subjects
extExtensionOverlays, effects

Tip: Connect each layer through its own Transform node, then connect all Transforms to the same Timeline. This enables parallax scrolling, independent character animation, and zoom effects.

Keyboard Shortcuts

ShortcutAction
Cmd+GGroup selected nodes
Cmd+Shift+GUngroup
Cmd+CCopy selected nodes
Cmd+VPaste
Cmd+SSave project
EscapeExit isolation mode
Delete/BackspaceDelete selected nodes

Troubleshooting

"API key not configured"

→ Go to Settings and add your API key for the model you're trying to use

Wire connects to wrong spot

→ If you changed a Page node's panel count, the handles may need to refresh. Try deselecting and reselecting the node.

Image not appearing in Page

→ Make sure the Output node has a generated image (shows in the Output preview) before connecting to Page

Tips