Skip to content

Mermaid 图表 + LaTeX 公式

Mermaid 流程图 / 时序图 / 甘特图等,以及 KaTeX 数学公式渲染。

在线演示

相关 Props

Prop类型默认值说明
enableMermaidbooleantrue关闭则 Mermaid 代码块显示为普通代码
enableLatexbooleantrueLaTeX 数学公式
mermaidConfigRecord<string, any>undefinedMermaid 初始化配置(合并到默认)
mermaidActionsMermaidAction[]undefinedMermaid 额外操作按钮

Mermaid 图表

```mermaid 代码块声明图表:

md
```mermaid
flowchart LR
  A[开始] --> B{判断}
  B -->|是| C[执行]
```

支持:flowchart / sequenceDiagram / classDiagram / gantt / pie 等。工具栏提供缩放 / 拖拽 / 全屏 / 下载 PNG。

LaTeX 公式

  • 块级公式用 $$...$$
  • 行内公式用 $...$
  • 也支持 \[...\] / \(...\)(自动预处理为标准格式)
md
$$E = mc^2$$       <!-- 块级 -->
行内公式 $a^2+b^2=c^2$  <!-- 行内 -->

TIP

代码块中的 $ 不会被误处理(LaTeX 预处理会先保护代码块内容)。

依赖

需要安装 mermaid(可选 peer),未安装时 Mermaid 代码块显示为普通代码;LaTeX 由包内 rehype-katex 处理。