Feature Film Production Pipeline

A phased workflow showing the five stages of filmmaking, using containers with inner nodes and horizontal sub-flows within a phase.

Key Patterns Used

Phase containers: Large rounded rectangles with neutral background and dashed borders
Inner task nodes: Smaller colored nodes inside containers for sub-tasks
Horizontal flow within container: Post-production shows sequential pipeline with arrows (Editing → Color → VFX → Sound → Score)
Consistent phase spacing: ~30px gap between phase containers
Phase labels with subtitles: Each container has title + description

Diagram

xml

<svg width="100%" viewBox="0 0 680 780" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
            markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </marker>
  </defs>

  <!-- Phase 1: Development -->
  <g>
    <rect x="40" y="30" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
    <text class="th" x="66" y="56">Development</text>
    <text class="ts" x="66" y="74">Concept to greenlight</text>
  </g>
  <g class="node c-purple">
    <rect x="70" y="90" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="150" y="108" text-anchor="middle" dominant-baseline="central">Script / screenplay</text>
  </g>
  <g class="node c-purple">
    <rect x="260" y="90" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="340" y="108" text-anchor="middle" dominant-baseline="central">Financing / budget</text>
  </g>
  <g class="node c-purple">
    <rect x="450" y="90" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="530" y="108" text-anchor="middle" dominant-baseline="central">Casting leads</text>
  </g>

  <!-- Arrow to Phase 2 -->
  <line x1="340" y1="140" x2="340" y2="170" class="arr" marker-end="url(#arrow)"/>

  <!-- Phase 2: Pre-production -->
  <g>
    <rect x="40" y="170" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
    <text class="th" x="66" y="196">Pre-production</text>
    <text class="ts" x="66" y="214">Planning and preparation</text>
  </g>
  <g class="node c-teal">
    <rect x="70" y="230" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="150" y="248" text-anchor="middle" dominant-baseline="central">Storyboards</text>
  </g>
  <g class="node c-teal">
    <rect x="260" y="230" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="340" y="248" text-anchor="middle" dominant-baseline="central">Location scouting</text>
  </g>
  <g class="node c-teal">
    <rect x="450" y="230" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="530" y="248" text-anchor="middle" dominant-baseline="central">Crew hiring</text>
  </g>

  <!-- Arrow to Phase 3 -->
  <line x1="340" y1="280" x2="340" y2="310" class="arr" marker-end="url(#arrow)"/>

  <!-- Phase 3: Production -->
  <g>
    <rect x="40" y="310" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
    <text class="th" x="66" y="336">Production</text>
    <text class="ts" x="66" y="354">Principal photography</text>
  </g>
  <g class="node c-coral">
    <rect x="70" y="370" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="150" y="388" text-anchor="middle" dominant-baseline="central">Filming / shooting</text>
  </g>
  <g class="node c-coral">
    <rect x="260" y="370" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="340" y="388" text-anchor="middle" dominant-baseline="central">Production sound</text>
  </g>
  <g class="node c-coral">
    <rect x="450" y="370" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="530" y="388" text-anchor="middle" dominant-baseline="central">VFX plates</text>
  </g>

  <!-- Arrow to Phase 4 -->
  <line x1="340" y1="420" x2="340" y2="450" class="arr" marker-end="url(#arrow)"/>

  <!-- Phase 4: Post-production -->
  <g>
    <rect x="40" y="450" width="600" height="150" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
    <text class="th" x="66" y="476">Post-production</text>
    <text class="ts" x="66" y="494">Assembly and finishing</text>
  </g>
  <g class="node c-amber">
    <rect x="70" y="510" width="110" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="125" y="528" text-anchor="middle" dominant-baseline="central">Editing</text>
  </g>
  <g class="node c-amber">
    <rect x="195" y="510" width="110" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="250" y="528" text-anchor="middle" dominant-baseline="central">Color grade</text>
  </g>
  <g class="node c-amber">
    <rect x="320" y="510" width="90" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="365" y="528" text-anchor="middle" dominant-baseline="central">VFX</text>
  </g>
  <g class="node c-amber">
    <rect x="425" y="510" width="100" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="475" y="528" text-anchor="middle" dominant-baseline="central">Sound mix</text>
  </g>
  <g class="node c-amber">
    <rect x="540" y="510" width="80" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="580" y="528" text-anchor="middle" dominant-baseline="central">Score</text>
  </g>
  <!-- Flow arrows within post -->
  <line x1="180" y1="528" x2="195" y2="528" class="arr" marker-end="url(#arrow)"/>
  <line x1="305" y1="528" x2="320" y2="528" class="arr" marker-end="url(#arrow)"/>
  <line x1="410" y1="528" x2="425" y2="528" class="arr" marker-end="url(#arrow)"/>
  <line x1="525" y1="528" x2="540" y2="528" class="arr" marker-end="url(#arrow)"/>
  <!-- Final delivery label -->
  <g class="node c-amber">
    <rect x="240" y="556" width="200" height="32" rx="6" stroke-width="0.5"/>
    <text class="ts" x="340" y="572" text-anchor="middle" dominant-baseline="central">Final master / DCP</text>
  </g>
  <line x1="340" y1="546" x2="340" y2="556" class="arr" marker-end="url(#arrow)"/>

  <!-- Arrow to Phase 5 -->
  <line x1="340" y1="600" x2="340" y2="630" class="arr" marker-end="url(#arrow)"/>

  <!-- Phase 5: Distribution -->
  <g>
    <rect x="40" y="630" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
    <text class="th" x="66" y="656">Distribution</text>
    <text class="ts" x="66" y="674">Release and exhibition</text>
  </g>
  <g class="node c-blue">
    <rect x="70" y="690" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="150" y="708" text-anchor="middle" dominant-baseline="central">Film festivals</text>
  </g>
  <g class="node c-blue">
    <rect x="260" y="690" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="340" y="708" text-anchor="middle" dominant-baseline="central">Theatrical release</text>
  </g>
  <g class="node c-blue">
    <rect x="450" y="690" width="160" height="36" rx="6" stroke-width="0.5"/>
    <text class="ts" x="530" y="708" text-anchor="middle" dominant-baseline="central">Streaming / VOD</text>
  </g>
</svg>

Color Assignments

Element	Color	Reason
Phase containers	Neutral (dashed)	Subtle grouping, doesn't compete with content
Development tasks	`c-purple`	Creative/concept work
Pre-production tasks	`c-teal`	Planning and preparation
Production tasks	`c-coral`	Active filming (main event)
Post-production tasks	`c-amber`	Processing/refinement
Distribution tasks	`c-blue`	Outward delivery/release

Layout Notes

ViewBox: 680×780 (standard width, tall for 5 phases)
Container style: Dashed border (stroke-dasharray="6 4"), neutral fill (var(--bg-secondary)), stroke-width="1"
Container height: 110px for 3-node phases, 150px for post-production (more complex)
Inner node dimensions: 160×36px for standard tasks, variable width for post-production sequential flow
Phase gap: 30px between containers
Horizontal sub-flow: Post-production uses tightly packed nodes with arrows between them to show sequence
Convergence node: "Final master / DCP" sits below the horizontal flow, collecting all post outputs