playbooks

home / skills / yonatangross / orchestkit / manim-visualizer

manim-visualizer skill

/plugins/ork/skills/manim-visualizer

This skill creates Manim visualizations of agent workflows, pipelines, and architecture, producing MP4s ready for Remotion integration.

npx playbooks add skill yonatangross/orchestkit --skill manim-visualizer

Review the files below or copy the command above to add this skill to your agents.

Files (8)
SKILL.md
1.8 KB
---
name: manim-visualizer
description: Create Manim animations visualizing agent workflows, skill pipelines, and architecture diagrams. Produces MP4 animations for integration with Remotion.
context: fork
version: 1.0.0
author: OrchestKit
tags: [manim, animation, visualization, diagram, video]
user-invocable: false
---

# Manim Visualizer

Creates animated visualizations using Manim (3Blue1Brown's animation engine).

## Quick Start

```bash
# Install manim
pip install manim

# Generate visualization
python scripts/visualize.py explore --type=workflow
```

## Visualization Types

### 1. Workflow Animation
Shows skill execution phases as animated flowchart.

```python
# Input: SkillMetadata with phases
# Output: workflow-{skill}.mp4

Phases flow left-to-right with:
- Phase boxes appearing sequentially
- Tool icons animating in
- Parallel phases shown side-by-side
- Completion checkmarks
```

### 2. Agent Spawning
Visualizes parallel agent spawning from Task tool.

```python
# Shows:
# - Central orchestrator
# - Agents spawning outward
# - Parallel execution lines
# - Results merging back
```

### 3. Architecture Diagram
Static-to-animated architecture visualization.

```python
# Components:
# - Boxes for services/modules
# - Arrows for data flow
# - Highlights for focus areas
```

## Output Specs

| Type | Resolution | Duration | FPS |
|------|------------|----------|-----|
| workflow | 1920x400 | 5-10s | 30 |
| agents | 1920x600 | 3-5s | 30 |
| architecture | 1920x1080 | 5-8s | 30 |

## Integration with Remotion

Manim outputs are imported as overlays:

```tsx
<Sequence from={hookEnd} durationInFrames={150}>
  <OffthreadVideo src={staticFile("manim/workflow.mp4")} />
</Sequence>
```

## Color Palette

Matches OrchestKit branding:
- Primary: #8b5cf6 (purple)
- Success: #22c55e (green)
- Warning: #f59e0b (amber)
- Info: #06b6d4 (cyan)
- Background: #0a0a0f (dark)

Overview

This skill creates polished Manim animations that visualize agent workflows, skill pipelines, and system architecture. It produces MP4 files sized and timed for seamless integration into Remotion sequences. The visual style uses a compact, brand-aligned palette and supports both sequential and parallel flow animations.

How this skill works

The tool reads structured metadata (skill phases, tools, or component graphs) and generates Manim scenes that animate boxes, arrows, icons, and checkmarks. It supports three modes: workflow (sequential/parallel phases), agent spawning (orchestration and parallel agents), and architecture (component and data-flow diagrams). Outputs are rendered as MP4 files with preset resolution, duration, and frame rate optimized for Remotion overlays.

When to use it

  • Demonstrating how a skill executes across phases for demos or docs
  • Visualizing parallel agent orchestration and result merging
  • Embedding animated architecture diagrams into product marketing or internal reviews
  • Creating short explainer videos for onboarding or API walkthroughs
  • Preparing assets for video pipelines using Remotion or similar composition tools

Best practices

  • Provide structured SkillMetadata or a component graph to get deterministic visuals
  • Keep phase and tool labels concise to avoid clutter in the animation
  • Choose the visualization type that matches the story: workflow for execution, agents for orchestration, architecture for system maps
  • Use the prescribed color palette for consistent branding and clear status cues (primary, success, warning, info)
  • Render at the recommended resolution and duration to match Remotion sequence lengths

Example use cases

  • Generate a 5–10s workflow MP4 showing skill execution phases with sequential reveals and completion checks
  • Create a 3–5s agent spawning clip illustrating parallel sub-agent execution and result merging
  • Produce a 5–8s architecture animation highlighting a focused service and data paths for a release video
  • Export a workflow clip and import it into a Remotion Sequence as an OffthreadVideo overlay
  • Batch-generate visualizations for a library of skills to include in automated documentation pipelines

FAQ

What inputs are required to generate a visualization?

Provide structured metadata: for workflows, a list of phases and tools; for agents, an orchestrator and child agent descriptions; for architecture, nodes and directed edges.

What file formats and specs are produced?

MP4 files rendered at preset resolutions (workflow 1920x400, agents 1920x600, architecture 1920x1080), durations per type, and 30 FPS to match Remotion usage.