Workflow Templates

Explore ready-to-use templates organized by use case. Each template can be opened in Studio, customized for your needs, or integrated via code.

28 Templates

4 Categories

Want inspiration? Check out the Community Showcase →

📊

Data Viz

Charts, graphs, diagrams, and data visualization

Open in Studio

Revenue Dashboard

4 nodes quickchart

Quarterly revenue chart with caption and web-optimized export

Claude Code Pipeline

Open in Studio

const chart = await floimg
  .generate('quickchart', {
    chart: {
      type: 'bar',
      data: {
        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
        datasets: [{ label: 'Revenue ($K)', data: [120, 190, 175, 240] }]
      }
    }
  })
  .transform('resize', { width: 800, height: 500, fit: 'inside' })
  .transform('addCaption', {
    text: 'Source: Finance Dashboard',
    position: 'bottom-right',
    fontSize: 12
  })
  .transform('convert', { to: 'image/webp', quality: 90 })
  .toBlob();

# Revenue Dashboard
name: "Revenue Dashboard"
steps:
  - kind: generate
    generator: quickchart
    out: result

# Revenue Dashboard
floimg generate quickchart \
  --output result.png

Open in Studio

User Growth Chart

4 nodes quickchart

Polished user growth chart ready for investor decks and presentations

Claude Code Pipeline

Open in Studio

const chart = await floimg
  .generate('quickchart', {
    chart: {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{ label: 'Active Users', data: [1200, 1900, 3000, 5000, 6200, 8100] }]
      }
    }
  })
  .transform('resize', { width: 1200, height: 675 }) // 16:9 for slides
  .transform('roundCorners', { radius: 16 })
  .transform('convert', { to: 'image/png' })
  .toBlob();

# User Growth Chart
name: "User Growth Chart"
steps:
  - kind: generate
    generator: quickchart
    out: result

# User Growth Chart
floimg generate quickchart \
  --output result.png

Open in Studio

Framework Usage Stats

4 nodes quickchart

Blog-ready comparison chart with optimized sizing and fast web loading

Claude Code Pipeline

Open in Studio

const chart = await floimg
  .generate('quickchart', {
    chart: {
      type: 'horizontalBar',
      data: {
        labels: ['React', 'Vue', 'Angular', 'Svelte', 'Solid'],
        datasets: [{ label: 'Usage %', data: [42, 18, 15, 8, 4] }]
      }
    }
  })
  .transform('resize', { width: 800, height: 450 }) // Blog content width
  .transform('extend', { top: 16, bottom: 16, left: 16, right: 16, background: '#ffffff' })
  .transform('convert', { to: 'image/webp', quality: 85 })
  .toBlob();

# Framework Usage Stats
name: "Framework Usage Stats"
steps:
  - kind: generate
    generator: quickchart
    out: result

# Framework Usage Stats
floimg generate quickchart \
  --output result.png

Open in Studio

Traffic by Device

4 nodes quickchart

Analytics breakdown optimized for Slack sharing and weekly reports

Claude Code Pipeline

Open in Studio

const chart = await floimg
  .generate('quickchart', {
    chart: {
      type: 'doughnut',
      data: {
        labels: ['Desktop', 'Mobile', 'Tablet'],
        datasets: [{ data: [55, 35, 10] }]
      }
    }
  })
  .transform('resize', { width: 500, height: 500 }) // Square for Slack preview
  .transform('addCaption', {
    text: 'Week of Jan 1, 2026',
    position: 'bottom-center',
    fontSize: 14,
    color: '#6B7280'
  })
  .transform('convert', { to: 'image/png' })
  .toBlob();

# Traffic by Device
name: "Traffic by Device"
steps:
  - kind: generate
    generator: quickchart
    out: result

# Traffic by Device
floimg generate quickchart \
  --output result.png

Open in Studio

API Request Flow

4 nodes mermaid

Sequence diagram ready for API documentation and README files

Claude Code Pipeline

Open in Studio

const diagram = await floimg
  .generate('mermaid', {
    code: `sequenceDiagram
    participant Client
    participant API
    participant Auth
    Client->>API: POST /login
    API->>Auth: Validate
    Auth-->>API: JWT token
    API-->>Client: 200 OK`
  })
  .transform('resize', { width: 800, fit: 'inside' })
  .transform('extend', { top: 24, bottom: 24, left: 24, right: 24, background: '#ffffff' })
  .transform('convert', { to: 'image/png' })
  .toBlob();

# API Request Flow
name: "API Request Flow"
steps:
  - kind: generate
    generator: mermaid
    out: result

# API Request Flow
floimg generate mermaid \
  --output result.png

Open in Studio

System Architecture

4 nodes mermaid

Architecture diagram optimized for Confluence, Notion, and technical documentation

Claude Code Pipeline

Open in Studio

const diagram = await floimg
  .generate('mermaid', {
    code: `flowchart TB
    subgraph Gateway
        LB[Load Balancer]
        API[API Gateway]
    end
    subgraph Services
        Auth[Auth]
        Users[Users]
    end
    LB --> API --> Auth & Users`
  })
  .transform('resize', { width: 1000, fit: 'inside' })
  .transform('extend', { top: 32, bottom: 32, left: 32, right: 32, background: '#ffffff' })
  .transform('convert', { to: 'image/webp', quality: 90 })
  .toBlob();

# System Architecture
name: "System Architecture"
steps:
  - kind: generate
    generator: mermaid
    out: result

# System Architecture
floimg generate mermaid \
  --output result.png

Open in Studio

Git Branch Workflow

4 nodes mermaid

Git branching diagram for team onboarding and CONTRIBUTING.md

Claude Code Pipeline

Open in Studio

const diagram = await floimg
  .generate('mermaid', {
    code: `gitGraph
    commit id: "Initial"
    branch develop
    commit id: "Setup"
    branch feature/auth
    commit id: "Add login"
    checkout develop
    merge feature/auth tag: "v1.0.0"`
  })
  .transform('resize', { width: 900, fit: 'inside' })
  .transform('addCaption', {
    text: 'Our Git Branching Strategy',
    position: 'top-center',
    fontSize: 16
  })
  .transform('convert', { to: 'image/png' })
  .toBlob();

# Git Branch Workflow
name: "Git Branch Workflow"
steps:
  - kind: generate
    generator: mermaid
    out: result

# Git Branch Workflow
floimg generate mermaid \
  --output result.png

🤖

AI Workflows

AI-powered image generation with DALL-E and other models

Open in Studio

AI Product Photography

4 nodes openai

Generate AI product photos with background removal and e-commerce-ready sizing

Pipeline

Open in Studio

const product = await floimg
  .generate('openai', {
    prompt: 'Professional product photo of headphones on white background',
    model: 'dall-e-3',
    size: '1024x1024'
  })
  .transform('removeBackground')
  .transform('resize', { width: 800, height: 800, fit: 'contain', background: '#ffffff' })
  .transform('addCaption', { text: 'SKU-12345', position: 'bottom-right', fontSize: 12 })
  .toBlob();

# AI Product Photography
name: "AI Product Photography"
steps:
  - kind: generate
    generator: openai
    out: result

# AI Product Photography
floimg generate openai \
  --output result.png

Open in Studio

AI Hero Image

4 nodes openai

Generate landing page hero images optimized for web and social sharing

Pipeline

Open in Studio

const hero = await floimg
  .generate('openai', {
    prompt: 'Futuristic city skyline at sunset, cinematic lighting',
    model: 'dall-e-3',
    size: '1792x1024'
  })
  .transform('resize', { width: 1200, height: 630 }) // OG image dimensions
  .transform('roundCorners', { radius: 8 })
  .transform('convert', { to: 'image/webp', quality: 85 })
  .toBlob();

# AI Hero Image
name: "AI Hero Image"
steps:
  - kind: generate
    generator: openai
    out: result

# AI Hero Image
floimg generate openai \
  --output result.png

Open in Studio

AI Mascot Generator

4 nodes openai

Generate mascot with transparent background and multiple export sizes

Pipeline

Open in Studio

const mascot = await floimg
  .generate('openai', {
    prompt: 'Friendly robot mascot, modern flat design, teal colors, white background',
    model: 'dall-e-3',
    size: '1024x1024'
  })
  .transform('removeBackground')
  .transform('resize', { width: 512, height: 512, fit: 'contain' })
  .transform('convert', { to: 'image/png' })
  .toBlob();

# AI Mascot Generator
name: "AI Mascot Generator"
steps:
  - kind: generate
    generator: openai
    out: result

# AI Mascot Generator
floimg generate openai \
  --output result.png

🎨

Preview coming soon

Open in Studio

AI Logo to Brand Kit

3 nodes openai

Generate a logo with AI, then create production-ready brand assets

Pipeline

Open in Studio

Preview coming soon

Open in Studio

Product Photo Enhancement

3 nodes input

Remove background and add professional product labeling

Pipeline

Open in Studio

🎨

Preview coming soon

Open in Studio

AI Art to Social Post

4 nodes openai

Generate creative AI art, optimize for social media

Pipeline

Open in Studio

🎨

Marketing

Social media assets, branding, and promotional images

Open in Studio

Social Media Kit

4 nodes pipeline

Generate optimized images for all social platforms from one source

Claude Code Pipeline

Open in Studio

// One source -> all platforms
const socialKit = await floimg.pipeline(heroImage, [
  { op: 'resize', params: { width: 1200, height: 630 }, save: 'og-image.png' },
  { op: 'resize', params: { width: 800, height: 418 }, save: 'twitter-card.png' },
  { op: 'resize', params: { width: 1080, height: 1080 }, save: 'instagram.png' },
]);

# Social Media Kit
name: "Social Media Kit"
steps:
  - kind: transform
    op: resize
    params:
      width: 1200
      height: 630
    out: og-image.png
  - kind: transform
    op: resize
    params:
      width: 800
      height: 418
    out: twitter-card.png
  - kind: transform
    op: resize
    params:
      width: 1080
      height: 1080
    out: instagram.png

# Social Media Kit
# Run pipelines via YAML config:
floimg run workflow.yaml

Open in Studio

Avatar Processing

5 nodes pipeline

Generate consistent avatar sizes with circular crop and optimization

Claude Code Pipeline

Open in Studio

const avatars = await floimg.pipeline(photo, [
  { op: 'crop', params: { shape: 'circle' } },
  { op: 'resize', params: { width: 256 }, save: 'avatar-256.png' },
  { op: 'resize', params: { width: 128 }, save: 'avatar-128.png' },
  { op: 'resize', params: { width: 64 }, save: 'avatar-64.png' },
]);

# Avatar Processing
name: "Avatar Processing"
steps:
  - kind: transform
    op: crop
    params:
      shape: "circle"
    out: avatar-256.png
  - kind: transform
    op: resize
    params:
      width: 128
    out: avatar-128.png
  - kind: transform
    op: resize
    params:
      width: 64
    out: avatar-64.png

# Avatar Processing
# Run pipelines via YAML config:
floimg run workflow.yaml

Open in Studio

Branded Watermark

3 nodes pipeline

Add your logo watermark to images automatically

Claude Code Pipeline

Open in Studio

Image Filters

4 nodes pipeline

Apply artistic filters: vintage, dramatic, vibrant, and more

Claude Code Pipeline

Open in Studio

Responsive Image Pipeline

6 nodes pipeline

Generate thumbnail, mobile, tablet, desktop, and retina sizes from one source

Claude Code Pipeline

Open in Studio

// One source → all responsive sizes
const responsive = await floimg.from(source)
  .transform('resize', { width: 320 })   // Mobile
  .transform('resize', { width: 768 })   // Tablet
  .transform('resize', { width: 1024 })  // Desktop
  .transform('resize', { width: 2048 })  // Retina
  .toBlob();

# Responsive Image Pipeline
name: "Responsive Image Pipeline"
steps:
  # See JavaScript example for full pipeline
  - kind: transform
    op: resize
    params:
      width: 800
    out: result

# Responsive Image Pipeline
# Run pipelines via YAML config:
floimg run workflow.yaml

Open in Studio

Team Headshot Standardizer

5 nodes pipeline

Standardize team photos with consistent sizing and professional styling

Claude Code Pipeline

Open in Studio

const headshot = await floimg.from(photo)
  .transform('extract', { width: 400, height: 400, gravity: 'face' })
  .transform('resize', { width: 300, height: 300 })
  .transform('grayscale')
  .transform('convert', { to: 'image/png' })
  .toBlob();

# Team Headshot Standardizer
name: "Team Headshot Standardizer"
steps:
  # See JavaScript example for full pipeline
  - kind: transform
    op: resize
    params:
      width: 800
    out: result

# Team Headshot Standardizer
# Run pipelines via YAML config:
floimg run workflow.yaml

Open in Studio

Screenshot to Docs

5 nodes screenshot

Prepare screenshots for documentation with borders and optimization

Claude Code Pipeline

Open in Studio

const docImage = await floimg
  .generate('screenshot', { url: 'https://example.com', width: 1280 })
  .transform('resize', { width: 800, fit: 'inside' })
  .transform('extend', { top: 16, bottom: 16, left: 16, right: 16, background: '#f3f4f6' })
  .transform('roundCorners', { radius: 8 })
  .transform('convert', { to: 'image/png' })
  .toBlob();

# Screenshot to Docs
name: "Screenshot to Docs"
steps:
  - kind: generate
    generator: screenshot
    out: result

# Screenshot to Docs
floimg generate screenshot \
  --output result.png

Open in Studio

Blog Post OG Image

4 nodes pipeline

Create social sharing images for blog posts with title overlay

Claude Code Pipeline

Open in Studio

const ogImage = await floimg.from(heroImage)
  .transform('resize', { width: 1200, height: 630, fit: 'cover' })
  .transform('addCaption', {
    text: 'How to Build Image Pipelines',
    position: 'center',
    fontSize: 48,
    color: '#ffffff'
  })
  .transform('convert', { to: 'image/webp', quality: 85 })
  .toBlob();

# Blog Post OG Image
name: "Blog Post OG Image"
steps:
  # See JavaScript example for full pipeline
  - kind: transform
    op: resize
    params:
      width: 800
    out: result

# Blog Post OG Image
# Run pipelines via YAML config:
floimg run workflow.yaml

Open in Studio

Email Banner

4 nodes pipeline

Create email header banners with consistent dimensions for newsletters

Claude Code Pipeline

Open in Studio

const banner = await floimg.from(image)
  .transform('resize', { width: 600, height: 200, fit: 'cover' })
  .transform('addCaption', {
    text: 'Weekly Newsletter',
    position: 'center',
    fontSize: 32,
    color: '#ffffff'
  })
  .transform('convert', { to: 'image/png' })
  .toBlob();

# Email Banner
name: "Email Banner"
steps:
  # See JavaScript example for full pipeline
  - kind: transform
    op: resize
    params:
      width: 800
    out: result

# Email Banner
# Run pipelines via YAML config:
floimg run workflow.yaml

Open in Studio

App Icon Generator

6 nodes pipeline

Generate iOS and Android app icon sizes from one source image

Claude Code Pipeline

Open in Studio

const icons = await floimg.from(logo)
  .transform('removeBackground')
  .transform('resize', { width: 180, height: 180 })  // iOS
  .transform('resize', { width: 192, height: 192 })  // Android
  .transform('resize', { width: 512, height: 512 })  // Store
  .toBlob();

# App Icon Generator
name: "App Icon Generator"
steps:
  # See JavaScript example for full pipeline
  - kind: transform
    op: resize
    params:
      width: 800
    out: result

# App Icon Generator
# Run pipelines via YAML config:
floimg run workflow.yaml

🔧

Utilities

QR codes, thumbnails, format conversion, and more

Open in Studio

Branded QR Code

4 nodes qr

QR code with custom colors, rounded corners, and optimized for print or digital

Claude Code Pipeline

Open in Studio

const qr = await floimg
  .generate('qr', {
    text: 'https://floimg.com',
    color: { dark: '#0d9488', light: '#ffffff' }
  })
  .transform('resize', { width: 300, height: 300 })
  .transform('roundCorners', { radius: 16 })
  .transform('convert', { to: 'image/png' })
  .toBlob();

# Branded QR Code
name: "Branded QR Code"
steps:
  - kind: generate
    generator: qr
    out: result

# Branded QR Code
floimg generate qr \
  --output result.png

Open in Studio

Dark Mode QR

4 nodes qr

QR code optimized for dark backgrounds with subtle border and web-optimized export

Claude Code Pipeline

Open in Studio

const qr = await floimg
  .generate('qr', {
    text: 'https://floimg.com',
    color: { dark: '#ffffff', light: '#18181b' }
  })
  .transform('resize', { width: 300, height: 300 })
  .transform('extend', {
    top: 8, bottom: 8, left: 8, right: 8,
    background: '#27272a'
  })
  .transform('convert', { to: 'image/webp', quality: 90 })
  .toBlob();

# Dark Mode QR
name: "Dark Mode QR"
steps:
  - kind: generate
    generator: qr
    out: result

# Dark Mode QR
floimg generate qr \
  --output result.png

Open in Studio

WiFi QR Code

4 nodes qr

Scannable WiFi QR code with network name label and professional styling

Claude Code Pipeline

Open in Studio

const qr = await floimg
  .generate('qr', {
    text: 'WIFI:T:WPA;S:GuestNetwork;P:welcome123;;',
    color: { dark: '#059669', light: '#ffffff' }
  })
  .transform('resize', { width: 300, height: 300 })
  .transform('addCaption', {
    text: 'Scan for WiFi',
    position: 'bottom-center',
    fontSize: 18,
    color: '#059669'
  })
  .transform('roundCorners', { radius: 12 })
  .toBlob();

# WiFi QR Code
name: "WiFi QR Code"
steps:
  - kind: generate
    generator: qr
    out: result

# WiFi QR Code
floimg generate qr \
  --output result.png

Open in Studio

Thumbnail Generator

4 nodes pipeline

Create multiple thumbnail sizes with automatic optimization

Claude Code Pipeline

Open in Studio

📐

Preview coming soon

Open in Studio

Diagram to WebP

2 nodes mermaid

Mermaid diagram converted to optimized WebP format

Claude Code Pipeline

Open in Studio

Build Your Own

Ready to create images like these? Use FloImg Studio's visual editor or integrate the library directly into your code.

Launch Studio Quick Start Guide