173 lines
8.4 KiB
Markdown
173 lines
8.4 KiB
Markdown
# 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
|