manim-visualizer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Manim Visualizer

Manim 可视化工具

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

使用Manim（3Blue1Brown的动画引擎）创建动画可视化效果。

Quick Start

快速开始

bash

undefined

bash

undefined

Install manim

安装 manim

pip install manim

Generate visualization

生成可视化内容

python scripts/visualize.py explore --type=workflow

undefined

python scripts/visualize.py explore --type=workflow

undefined

Visualization Types

可视化类型

1. Workflow Animation

1. 工作流动画

Shows skill execution phases as animated flowchart.

python

undefined

将Skill执行阶段展示为动画流程图。

python

undefined

Input: SkillMetadata with phases

输入：包含阶段信息的SkillMetadata

Output: workflow-{skill}.mp4

输出：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

undefined

阶段从左到右流动，包含以下效果：

阶段框依次出现
工具图标动态加入
并行阶段并排显示
完成状态对勾标记

undefined

2. Agent Spawning

2. Agent 生成动画

Visualizes parallel agent spawning from Task tool.

python

undefined

可视化从Task工具中并行生成Agent的过程。

python

undefined

Shows:

展示内容：

- Central orchestrator

- 中央协调器

- Agents spawning outward

- Agent向外生成

- Parallel execution lines

- 并行执行连线

- Results merging back

- 结果合并回传

undefined

undefined

3. Architecture Diagram

3. 架构图动画

Static-to-animated architecture visualization.

python

undefined

从静态到动态的架构可视化效果。

python

undefined

Components:

组成元素：

- Boxes for services/modules

- 服务/模块对应的方框

- Arrows for data flow

- 数据流箭头

- Highlights for focus areas

- 重点区域高亮

undefined

undefined

Output Specs

输出规格

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

类型	分辨率	时长	帧率
workflow	1920x400	5-10秒	30
agents	1920x600	3-5秒	30
architecture	1920x1080	5-8秒	30

Integration with Remotion

与 Remotion 集成

Manim outputs are imported as overlays:

tsx

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

Manim的输出可作为叠加层导入：

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)

匹配OrchestKit品牌色调：

主色调：#8b5cf6（紫色）
成功色：#22c55e（绿色）
警告色：#f59e0b（琥珀色）
信息色：#06b6d4（青色）
背景色：#0a0a0f（深色）

manim-visualizer

Original

Translation

Manim Visualizer

Manim 可视化工具

Quick Start

快速开始

Install manim

安装 manim

Generate visualization

生成可视化内容

Visualization Types

可视化类型

1. Workflow Animation

1. 工作流动画

Input: SkillMetadata with phases

输入：包含阶段信息的SkillMetadata

Output: workflow-{skill}.mp4

输出：workflow-{skill}.mp4

2. Agent Spawning

2. Agent 生成动画

Shows:

展示内容：

- Central orchestrator

- 中央协调器

- Agents spawning outward

- Agent向外生成

- Parallel execution lines

- 并行执行连线

- Results merging back

- 结果合并回传

3. Architecture Diagram

3. 架构图动画

Components:

组成元素：

- Boxes for services/modules

- 服务/模块对应的方框

- Arrows for data flow

- 数据流箭头

- Highlights for focus areas

- 重点区域高亮

Output Specs

输出规格

Integration with Remotion

与 Remotion 集成

Color Palette

调色板

Related Skills

相关技能