MermaidStepPlayer 让你的流程图动起来

发现频道
1

软件名称

Mermaid 流程图逐步播放器（MermaidStepPlayer）

应用平台

单 HTML 文件，任意现代浏览器直接打开（Windows / macOS / Linux 均可运行）

推荐类型

【开发者自荐】

一句简介

把 Mermaid 流程图按深度优先顺序「逐步播放」出来，并一键导出独立 HTML 或 GIF 动图。

应用简介

MermaidStepPlayer 是一个纯前端、单文件的流程图演示工具。你只需把任意 flowchart / graph 代码粘贴进去，它就会解析图结构，按深度优先顺序一步步揭示节点与边，像放幻灯片一样把流程"走"给你看——非常适合做技术方案讲解、教学演示、需求评审或分享给他人。

核心特性：

  • 逐步揭示：上一步 / 下一步 / 自动播放，按深度优先顺序逐个高亮节点与路径。
  • 分支演示：自动识别图中所有"源→汇"的简单路径（分支），下拉切换即可整条分支绿色高亮、逐步演示；含 subgraph 子图、classDef / style 均支持。
  • 环图不卡死：遇到回边 / 循环，自动按简单路径拆分并标注为橙色虚线，不会死循环。
  • 直观配色：绿色=当前分支路径，橙色虚线=回边/循环，橙色脉冲=当前节点，淡灰=其它已揭示节点。
  • 缩放 / 最大化 / 快捷键：支持滚轮与滑条缩放、全屏铺满、← → 空格等键盘操作。
  • 一键导出：可导出独立 HTML 播放文件（内嵌当前图，发给别人直接播放），也可导出** GIF 动图**（逐步揭示的每一帧编码成动画，直接贴进 PPT / 文档）。
  • 零安装：整个工具就是一个 HTML 文件，双击即可在浏览器中使用（渲染依赖通过 CDN 加载，需联网）。

适合人群：需要讲解流程图的技术同学、教师、产品经理，以及任何想把 Mermaid 图"动起来"的人。

用法

直接用浏览器打开 mermaid-step-player.html 即可（需联网加载 CDN 资源）：

  1. 左侧粘贴完整 flowchart / graph 代码，或选内置示例；
  2. 点“生成步骤并播放”，先展示完整流程图；
  3. 用“下一步/上一步/自动播放”逐步揭示，或在“分支”下拉框选某条分支演示；
  4. 非流程图（时序图、类图等）直接显示完整图，不支持逐步揭示；
  5. 点“⤓ 导出播放文件”，先在「格式」下拉选 独立 HTML 播放文件 或 GIF 动图；导出 GIF 时可用「导出缩放」调节输出尺寸（默认 2×），然后导出：HTML 产物为独立的 mermaid-playback.html（已内嵌当前图、无左侧输入），GIF 产物为动画 mermaid-playback.gif。

使用说明（流程图）

flowchart TD
    A([用浏览器打开 mermaid-step-player.html]) --> B[左侧粘贴 flowchart/graph 代码<br/>或选内置示例]
    B --> C[点“生成步骤并播放”]
    C --> D[展示完整流程图]
    D --> E{选择演示方式}
    E -->|总览逐步揭示| F["下一步 / 上一步 / 自动播放"]
    E -->|分支演示| G["分支下拉选路径<br/>整条绿色高亮逐步演示"]
    F --> H[缩放 / 最大化 / 键盘导航]
    G --> H
    H --> I{导出格式}
    I -->|独立 HTML| J[导出 mermaid-playback.html<br/>发给他人直接播放]
    I -->|GIF 动图| K[导出 GIF 动图<br/>贴进 PPT / 文档]
    J --> L([完成])
    K --> L

导出gif效果

mermaid-playback (4)

官方网站

开源协议

本项目采用 MIT License

2

看分享的gif感觉帧与帧之间缺了点动画。可以考虑用 manim 做下动画，应该效果就很漂亮了。

3

好的，我研究研究看好不好加