Tldraw Whiteboard Guide

Example: Conceptual Framework for Mixed-Methods Study

1. Create a Frame labeled "Research Design"
2. Add rectangles for each research phase:
   - "Literature Review" -> "Hypothesis Formation"
   - "Quantitative Study" -> "Statistical Analysis"
   - "Qualitative Study" -> "Thematic Analysis"
   - "Integration" -> "Conclusions"
3. Connect phases with arrows showing sequence and relationships
4. Use color coding:
   - Blue rectangles: quantitative components
   - Green rectangles: qualitative components
   - Purple rectangles: integration points
5. Add text labels for key variables and relationships
6. Use sticky notes for annotations about methods and tools

import { Tldraw, createTLStore } from 'tldraw';
import { useSync } from '@tldraw/sync';

function CollaborativeWhiteboard({ roomId }) {
  const store = useSync({
    uri: `wss://collaboration-server.lab.internal/connect/${roomId}`,
    assets: { /* asset configuration */ }
  });

  return (
    <div style={{ width: '100%', height: '80vh' }}>
      <Tldraw store={store} />
    </div>
  );
}

import {
  ShapeUtil,
  TLBaseShape,
  HTMLContainer,
  BaseBoxShapeUtil,
} from 'tldraw';

// Define the shape type
type ResearchNodeShape = TLBaseShape<
  'research-node',
  {
    w: number;
    h: number;
    label: string;
    nodeType: 'hypothesis' | 'method' | 'finding' | 'conclusion';
    status: 'planned' | 'in-progress' | 'complete';
  }
>;

// Color map for node types
const nodeColors = {
  hypothesis: '#3B82F6',
  method: '#10B981',
  finding: '#F59E0B',
  conclusion: '#EF4444',
};

const statusIcons = {
  planned: '[ ]',
  'in-progress': '[~]',
  complete: '[x]',
};

class ResearchNodeUtil extends BaseBoxShapeUtil<ResearchNodeShape> {
  static override type = 'research-node' as const;

  getDefaultProps(): ResearchNodeShape['props'] {
    return {
      w: 200,
      h: 80,
      label: 'New Node',
      nodeType: 'hypothesis',
      status: 'planned',
    };
  }

  component(shape: ResearchNodeShape) {
    const { label, nodeType, status } = shape.props;
    const color = nodeColors[nodeType];

    return (
      <HTMLContainer>
        <div style={{
          width: '100%',
          height: '100%',
          backgroundColor: color + '20',
          border: `2px solid ${color}`,
          borderRadius: '8px',
          padding: '8px 12px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          fontFamily: 'Inter, sans-serif',
        }}>
          <div style={{ fontSize: '10px', color: color, fontWeight: 600 }}>
            {nodeType.toUpperCase()} {statusIcons[status]}
          </div>
          <div style={{ fontSize: '13px', color: '#1F2937', marginTop: '4px' }}>
            {label}
          </div>
        </div>
      </HTMLContainer>
    );
  }

  indicator(shape: ResearchNodeShape) {
    return (
      <rect
        width={shape.props.w}
        height={shape.props.h}
        rx={8}
        ry={8}
      />
    );
  }
}

import { Tldraw } from 'tldraw';

const customShapeUtils = [ResearchNodeUtil];

function ResearchDiagramEditor() {
  return (
    <Tldraw
      shapeUtils={customShapeUtils}
      tools={[/* custom tools */]}
    />
  );
}

Structure:
- Central node: Research Question
- Branch 1: Theoretical Frameworks
  - Sub-nodes for each major theory
  - Connections showing relationships between theories
- Branch 2: Key Findings
  - Grouped by theme or methodology
  - Color-coded by strength of evidence
- Branch 3: Research Gaps
  - Identified gaps linked to existing literature
  - Arrows pointing to proposed research directions

Layout:
1. Start: "Research Question"
2. Diamond: "Experimental or Observational?"
3. Branch A (Experimental):
   - "Control Group Definition"
   - "Treatment Conditions"
   - "Randomization Strategy"
   - "Measurement Protocol"
4. Branch B (Observational):
   - "Sampling Frame"
   - "Data Collection Method"
   - "Confound Identification"
5. Merge: "Data Analysis Plan"
6. End: "Expected Outcomes"

Components arranged in layers:
- Top: User Interface (web dashboard, CLI)
- Middle: Application Logic (API server, task scheduler)
- Bottom: Data Layer (database, file storage, cache)
- Side: External Services (cloud APIs, instrument interfaces)
- Arrows showing data flow between components
- Color coding for different deployment environments

import { Editor } from 'tldraw';

async function exportDiagram(editor: Editor) {
  // Export selected shapes or entire page
  const shapeIds = editor.getSelectedShapeIds();
  const svg = await editor.getSvg(
    shapeIds.length > 0 ? shapeIds : undefined,
    { background: true, padding: 20 }
  );

  if (svg) {
    const svgString = new XMLSerializer().serializeToString(svg);
    const blob = new Blob([svgString], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.download = 'research-diagram.svg';
    link.click();
    URL.revokeObjectURL(url);
  }
}

async function exportAsPng(editor: Editor) {
  const blob = await editor.toImage(
    editor.getSelectedShapeIds(),
    { type: 'png', quality: 1, scale: 3, background: true }
  );

  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'research-diagram.png';
  link.click();
  URL.revokeObjectURL(url);
}

function generateMethodologyDiagram(editor: Editor, steps: string[]) {
  const startX = 100;
  const startY = 100;
  const boxWidth = 200;
  const boxHeight = 60;
  const gap = 40;

  steps.forEach((step, index) => {
    const y = startY + index * (boxHeight + gap);

    // Create a box for each step
    editor.createShape({
      type: 'geo',
      x: startX,
      y: y,
      props: {
        geo: 'rectangle',
        w: boxWidth,
        h: boxHeight,
        text: step,
        fill: 'semi',
        color: 'blue',
      },
    });

    // Connect to next step with an arrow
    if (index < steps.length - 1) {
      editor.createShape({
        type: 'arrow',
        props: {
          start: { x: startX + boxWidth / 2, y: y + boxHeight },
          end: { x: startX + boxWidth / 2, y: y + boxHeight + gap },
        },
      });
    }
  });

  editor.zoomToFit();
}

// Usage
generateMethodologyDiagram(editor, [
  'Data Collection',
  'Preprocessing',
  'Feature Extraction',
  'Model Training',
  'Evaluation',
  'Publication',
]);