Reveal.js + Mermaid，图表用写的，比画的更快！

在 Reveal.js 幻灯片里优雅画图：reveal.js-mermaid-plugin 轻松助你实现 Mermaid 图表

在技术分享、架构设计或流程讲解中，图往往比大段文字更高效、直观。reveal.js-mermaid-plugin 能把 Mermaid 图表无缝嵌入 Reveal.js 幻灯片，让你用简洁的文本语法快速绘制流程图、时序图、类图、状态图、甘特图、饼图等。

mermaid 是什么?

Mermaid 是一个基于 JavaScript 的图表生成工具，支持多种图表类型，如流程图、时序图、类图、状态图、甘特图、饼图等。它使用简单的文本语法来描述图表，然后通过 JavaScript 渲染成 HTML 和 CSS。

• 为什么选它：
• 轻量高效：纯文本描述，一秒出图，版本对比也更友好。
• 风格统一：主题与变量统一控制，整场演示观感一致。
• 维护友好：改一行文本即可更新图，不再反复导入导出图片。
• 你将学到：如何安装插件，并在幻灯片中插入常见的 Mermaid 图表类型。

快速开始

安装

yarn add reveal.js-mermaid-plugin

import Mermaid from "reveal.js-mermaid-plugin";

Reveal.initialize({
  plugins: [Mermaid],
});

常用 Mermaid 示例

流程图

用来表达「步骤—条件—结果」的最常见图形，适合讲解业务流程与分支判断。

<section>
  <h3>流程图</h3>
  <div class="mermaid">
    <pre>
        %%{init: {'theme': 'light', 'themeVariables': { 'darkMode': false }}}%%
        flowchart TD
        A[Start] --> B{Is it?};
        B -- Yes --> C[OK];
        C --> D[Rethink];
        D --> B;
        B -- No ----> E[End];
    </pre>
  </div>
</section>

时序图

用来表达「时间—对象—交互」的图形，适合讲解系统交互或异步流程。

<section>
  <h3>时序图</h3>
  <div class="mermaid">
    <pre>
              %%{init: {'theme': 'light', 'themeVariables': { 'darkMode': false }}}%%
              sequenceDiagram
                Alice->>John: Hello John, how are you?
                John-->>Alice: Great!
                Alice-)John: See you later!

            </pre
    >
  </div>
</section>

状态图

展示对象在不同状态间的转换规律，适合描述生命周期与状态机。

<section>
  <h3>状态图</h3>
  <div class="mermaid">
    <pre>
              %%{init: {'theme': 'light', 'themeVariables': { 'darkMode': false }}}%%
              stateDiagram-v2
              [*] --> Still
              Still --> [*]

              Still --> Moving
              Moving --> Still
              Moving --> Crash
              Crash --> [*]
            </pre
    >
  </div>
</section>

甘特图

用来做项目计划与排期展示，直观看到任务的起止与依赖关系。

<section>
  <h3>甘特图</h3>
  <div class="mermaid">
    <pre>
              %%{init: {'theme': 'light', 'themeVariables': { 'darkMode': false }}}%%
              gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
            </pre
    >
  </div>
</section>

思维导图

从中心主题向外发散，适合结构化梳理要点与层级。

<section>
  <h3>思维导图</h3>
  <div class="mermaid">
    <pre>
              %%{init: {'theme': 'light', 'themeVariables': { 'darkMode': false }}}%%
              mindmap
                Root
                    A
                      B
                      C

            </pre
    >
  </div>
</section>

时间线

按时间顺序串联关键事件，适合讲产品/项目/技术的演进历程。

<section>
  <h3>时间线</h3>
  <div class="mermaid">
    <pre>
              %%{init: {'theme': 'light', 'themeVariables': { 'darkMode': false }}}%%
              timeline
              title History of Social Media Platform
              2002 : LinkedIn
              2004 : Facebook
                  : Google
              2005 : YouTube
              2006 : Twitter
            </pre
    >
  </div>
</section>

雷达图

对多维指标进行对比，一图看清不同对象在各维度的强弱分布。

<section>
  <h3>雷达</h3>
  <div class="mermaid">
    <pre>
              %%{init: {'theme': 'light', 'themeVariables': { 'darkMode': false }}}%%
              radar-beta
                axis m["Math"], s["Science"], e["English"]
                axis h["History"], g["Geography"], a["Art"]
                curve a["Alice"]{85, 90, 80, 70, 75, 90}
                curve b["Bob"]{70, 75, 85, 80, 90, 85}

                max 100
                min 0
            </pre
    >
  </div>
</section>

结语

用 reveal.js-mermaid-plugin 把“想法”快速变成“图”，再把“图”优雅地呈现在幻灯片里。准备分享时，先用 Mermaid 草拟关键结构，再配合页面要点拆解，表达会更直观、节奏更清晰、说服力更强。

官方文档：https://mermaid.js.org/intro/