pitchdeck

Deterministic layout engine & visual presentation builder for PowerPoint presentations.

pitchdeck is an opinionated TypeScript presentation generator built on top of pptxgenjs and Flexbox (yoga-layout). It replaces manual coordinate calculation and plain text boxes with executive-grade shape aesthetics, automatic typography scaling, and design DNA resolution.

Features

• 🎨 11 Implemented Slide Archetypes: titleSlide, agendaSlide, sectionDividerSlide, bulletSlide, comparisonSlide, resultsSlide, statGrid, processSteps, diagramSlide, screenshotSlide, referencesSlide.
• 📊 System & Architecture Diagrams: Flowcharts with decision branches, Entity-Relationship (ER) database schemas with attribute cards, Microservices Component Architectures, and Sequence diagrams.
• 🖼️ Multi-Provider Stock Asset Engine: Integrated support for Unsplash (photos), Pexels (photos), Pixabay (vectors, illustrations, photos), and Freepik (vectors, icons) with unified caching and automatic fallback.
• 📐 Yoga Flexbox Engine: Deterministic spatial layout calculation without hand-picking coordinates.
• ✨ Built-in Modern Visual Hierarchy: Rounded container cards (roundRect), 4px primary left accent strips, category tag pills, vector step connectors, solid header banners, and title divider lines.
• 🎯 fromSpec() Pipeline: Declaratively map mandated section lists to slide archetypes in a single call.
• 🔍 Strict Validation Engine: Catches text overflows, contrast violations, overlapping elements, and min-gap collisions before saving.

Installation

npm install pitchdeck pptxgenjs yoga-layout-prebuilt

Quick Start

import { create } from 'pitchdeck';

// 1. Initialize builder with a content profile and optional stock provider keys
const deck = create({
  profile: { domain: 'systems', tone: 'technical', density: 'normal' },
  stockKeys: {
    unsplashKey: process.env.UNSPLASH_ACCESS_KEY,
    pexelsKey: process.env.PEXELS_API_KEY,
    pixabayKey: process.env.PIXABAY_API_KEY,
    freepikKey: process.env.FREEPIK_API_KEY,
  },
});

// 2. Build slides declaratively
deck
  .titleSlide({
    variant: 'formal-college',
    title: 'VoCall: India-First Voice Agent Builder',
    subtitle: 'Autonomous Multilingual Conversational AI',
    groupNumber: 'Group CS-14',
    supervisorName: 'Dr. Sandeep Kumar',
    institutionName: 'GNIOT College of Engineering',
  })
  .agendaSlide({
    sections: ['System Architecture', 'Database Schema', 'Results'],
  })
  // Flowchart Diagram
  .diagramSlide({
    title: 'Inbound Audio Stream Processing',
    diagramType: 'flowchart',
    nodes: [
      { id: 'start', label: 'SIP Inbound', shape: 'ellipse' },
      { id: 'auth', label: 'Validate Token', shape: 'diamond' },
      { id: 'stream', label: 'Audio Ingestion', shape: 'roundRect' },
      { id: 'asr', label: 'ASR Inference', shape: 'roundRect' },
    ],
    edges: [
      { from: 'start', to: 'auth', label: 'SIP INVITE' },
      { from: 'auth', to: 'stream', label: 'Valid' },
      { from: 'stream', to: 'asr', label: 'Opus Frames' },
    ],
  })
  // Entity-Relationship (ER) Diagram
  .diagramSlide({
    title: 'Database Schema (ER Diagram)',
    diagramType: 'er',
    nodes: [
      {
        id: 'USERS',
        label: 'Users Table',
        attributes: [
          { name: 'user_id', type: 'UUID', isPrimary: true },
          { name: 'email', type: 'VARCHAR(255)' },
          { name: 'org_id', type: 'UUID', isForeign: true },
        ],
      },
      {
        id: 'AGENTS',
        label: 'Voice Agents',
        attributes: [
          { name: 'agent_id', type: 'UUID', isPrimary: true },
          { name: 'user_id', type: 'UUID', isForeign: true },
          { name: 'prompt', type: 'TEXT' },
        ],
      },
    ],
    edges: [
      { from: 'USERS', to: 'AGENTS', cardinality: '1:N', label: 'provisions' },
    ],
  })
  // Component & Infrastructure Topology
  .diagramSlide({
    title: 'Microservices Topology',
    diagramType: 'component',
    groups: [
      { id: 'edge', label: 'Edge Layer' },
      { id: 'data', label: 'Persistence Layer' },
    ],
    nodes: [
      { id: 'client', label: 'Web Client', shape: 'user' },
      { id: 'gateway', label: 'API Gateway', shape: 'component', group: 'edge' },
      { id: 'db', label: 'PostgreSQL DB', shape: 'cylinder', group: 'data' },
    ],
    edges: [
      { from: 'client', to: 'gateway', label: 'HTTPS' },
      { from: 'gateway', to: 'db', label: 'TCP 5432' },
    ],
  });

// 3. Save presentation
await deck.save('output.pptx');

Stock Image & Vector Asset Integration

pitchdeck includes a unified multi-provider asset client supporting:

• Unsplash: High-resolution photography with color tone matching.
• Pexels: Curated photography and background visuals.
• Pixabay: Photos, vector graphics (type: 'vector'), and illustrations.
• Freepik: UI icons (type: 'icon'), vectors, and graphic assets.

const asset = await deck.fetchStockAsset({
  query: 'cloud database server',
  type: 'vector', // 'photo' | 'vector' | 'illustration' | 'icon'
  provider: 'pixabay', // optional specific provider
  fallbackProviders: ['freepik', 'unsplash', 'pexels'],
});

console.log(asset.url, asset.mimeType, asset.data.length);

License

MIT © Priyanshu