二、通过 npm 引入 Mermaid.js

1、安装依赖包

pnpm install mermaid

2、引入

import mermaid from "mermaid";

3、初始化 mermaid

 mermaid.initialize({ startOnLoad: true });
 mermaid.init();

4、定义类名为 mermaid 的 div

  const chartContent = `
    graph TD
    A[开始] --> B(处理数据)
    B --> C{是否通过?}
    C -->|是| D[结束]
    C -->|否| E[重新处理]
    E --> B
  `;

<div className="mermaid">{chartContent}</div>

5、效果

6、源码

链接: pan.baidu.com/s/19czmHCJA… 提取码: cajs

6.1、安装依赖

pnpm i

6.2、启动服务

pnpm run dev

6.3、打开浏览器

http://localhost:5173/