ivarvong/lantern

这是什么？

核心功能

• 01动画步骤可按场景和步骤名直接用链接定位
• 02在浏览器中以实时 DOM 渲染 SVG，在 Workers 和 Node 中输出字符串
• 03文字使用内嵌字形轮廓渲染，不依赖本机字体
• 04支持解析 Mermaid 流程图，也支持用 JSON 文档描述场景
• 05除 SVG 和逐帧导出外，还提供文本、状态轨迹和索引输出
• 06在 Cloudflare Workers 上提供 HTTP API，可渲染 JSON 描述的场景

适用场景

• 制作可分享链接，逐步带领评审者理解一次代码变更
• 基于 Mermaid 或 JSON 生成请求流程或架构的动画图示
• 在服务端直接输出 SVG 讲解帧，无需无头浏览器
• 为 AI Agent 提供动画讲解的结构化文本和状态轨迹

快速上手

1. 1

   克隆仓库

   git clone https://github.com/ivarvong/lantern && cd lantern
2. 2

   安装依赖

   npm install
3. 3

   启动开发服务器并打开示例场景

   npm run dev

使用前须知

• !尚未发布到 npm，需要克隆仓库才能使用。
• !运行工具和测试需要 Node 24，以直接执行 TypeScript。
• !目前不支持 3D、布尔路径运算、LaTeX 以及匹配式变形（TransformMatchingShapes）。

收录于专题

标签

常见问题

lantern 是什么？

一个零依赖的 TypeScript 库，用于制作可逐步播放的动画代码讲解，输出 SVG，可在浏览器、Cloudflare Workers 或 Node 中运行。 Lantern 是对 Python 动画引擎 manim 核心模型的 JavaScript/TypeScript 移植，用于把代码变更以动画方式讲清楚。场景是一个带异步 construct() 方法的类，在其中声明步骤和动画。每个步骤都可以通过 ?scene=&step= 这样的链接直接定位，每个场景还能输出文本形式和结构化的状态轨迹，便于 Agent 读取。

lantern 可以免费使用吗？用的什么许可证？

lantern 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

lantern 还在维护吗？

活跃维护中。lantern 最近一次提交是在 2026年10月27日。

lantern 适合用来做什么？

制作可分享链接，逐步带领评审者理解一次代码变更 基于 Mermaid 或 JSON 生成请求流程或架构的动画图示 在服务端直接输出 SVG 讲解帧，无需无头浏览器 为 AI Agent 提供动画讲解的结构化文本和状态轨迹

lantern 怎么安装和运行？

克隆仓库: git clone https://github.com/ivarvong/lantern && cd lantern 安装依赖: npm install 启动开发服务器并打开示例场景: npm run dev

在哪里获取 lantern？

源代码和安装说明在 GitHub 上：https://github.com/ivarvong/lantern