Mermaid 快速生成流程图、思维导图等各种图表

Mermaid 是一个开源的 JavaScript 库，旨在通过简洁的语法快速生成各种图表。它支持多种图表类型，包括流程图、序列图、甘特图和思维导图等，为用户提供了一种高效的可视化解决方案。Mermaid 的设计初衷是让用户专注于图表内容本身，而不是图表的绘制过程。

通过使用 Markdown 语法，Mermaid 可以定义图形，并与多种工具和平台集成，如 GitHub、GitLab、Markdown 和 Jupyter Notebook 等。

常见图表类型及示例#

流程图 (Flowchart)

graph TD
    A[开始] --> B{是否?}
    B -->|是| C[确定]
    B -->|否| D[结束]

思维导图（Mindmap）

mindmap
  root((前端学习))
    HTML
      结构
      语义化
    CSS
      布局
      响应式设计
      动画
    JavaScript
      基础语法
      DOM操作
      事件处理
      异步编程
    框架
      React
      Vue
      Angular
    工具
      Git
      Webpack
      npm
    性能优化
    浏览器兼容性
    Web安全
    UI/UX设计基础

使用方法#

在网页中使用

通过 CDN 引入 Mermaid.js：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Mermaid.js Example</title>
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'
      mermaid.initialize({ startOnLoad: true })
    </script>
  </head>
  <body>
    <div class="mermaid">graph TD A[开始] --> B{是否?} B -->|是| C[确定] B -->|否| D[结束]</div>
    <div class="mermaid">
      <!-- 其他 -->
    </div>
  </body>
</html>

结果如下图：

打包环境使用

通过 npm 安装 Mermaid.js：

npm install mermaid

Mermaid 不仅可以初始化渲染图形，还可以动态插入图形：

import mermaid from 'mermaid'

mermaid.initialize({ startOnLoad: true })

const diagram = `
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
`

mermaid.render('mermaidChart', diagram, (svgCode) => {
  // 插入 HTML 操作
})

使用 Mermaid 的方法非常简单，通过 Mermaid 生成图表，省去了手动绘制图片的繁琐过程，让我们能够专注于主要生产工作。当然，仍然要学习一些 Markdown 的语法定义。

如果你还是觉得学习 Mermaid 语法麻烦，这里提供一个一键生成图表的工具，关注此公众号，并在底部菜单栏点击思维导图一键生成。

在页面内，输入你要生成的主题或者文章内容，它能自动帮你总结并生成图形。

赶紧去试试看吧！