Mermaid.js：搭上生成式AI快车的第一款图表生成器！

发布时间：2024-11-13

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 Mermaid

Mermaid 是一种基于 JavaScript 的图表绘制工具，它采用 Markdown 启发的文本定义并在浏览器中动态创建图表。它由 Knut Sveidqvist 维护，支持软件项目的许多不同的常见图表类型，包括：流程图、UML、Git 图、用户旅程图，甚至是甘特图。

Mermaid 甚至与 Knut 以及 CommonMark 更广泛的社区合作，推出了一项更改，允许开发者使用 Mermaid 语法创建内联图形，例如：

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;

上面的原始代码块在渲染的 Markdown 中将生成如下图所示：

目前 Mermaid 在 Github 上通过 MIT 协议开源，有超过 60.4k 的 star、5k 的 fork、项目依赖量 29k、代码贡献者 500+、妥妥的前端优质开源项目。

2.Mermaid 如何工作

当遇到标记为 mermaid 的代码块时，会自动生成一个 iframe，其采用原始 Mermaid 语法并将其传递给 Mermaid.js，从而将该代码转换为本地浏览器中的图表。

Mermaid 通过两个阶段的过程来实现这一目标：GitHub 的 HTML 管道和 Viewscreen（Mermaid 的内部文件渲染服务）。

首先，Mermaid 向 HTML 管道添加一个过滤器，用于查找具有 mermaid 语言名称的原始 pre 标记，并将其替换为渐进式工作的模板，以便客户端在非 JavaScript 环境（例如 API）中请求嵌入 Mermaid 的内容请求能看到原始 Markdown 代码。

接下来，假设在支持 JavaScript 的环境中查看内容，Mermaid 将 iframe 注入页面，将 src 属性指向 Viewscreen 服务。

将库卸载到外部服务，从而使需要从 Rails 提供服务的 JavaScript 有效负载保持较小。
异步渲染图表有助于消除在将编译的 ERB 视图发送到客户端之前渲染多个图表的潜在开销。
用户提供的内容被锁定在 iframe 中，这样在加载图表的 GitHub 页面上造成损害的可能性较小。

3.如何使用 Mermaid

调用 JavaScript API 可用于任何常见的 Web 服务器，例如： Apache、IIS、nginx、nodeexpress。

开发者只需要使用 Notepad++ 这样的文本编辑工具来生成 .html 文件。然后由 Web 浏览器（例如 Firefox、Chrome、Safari，但不包括 Internet Explorer）部署。

该 API 的工作原理是从源 mermaid.js 中提取渲染指令，以便在页面上渲染图表。在编写 .html 文件时，在 html 代码中向 Web 浏览器发出两条指令：

要创建的图表的 mermaid 代码。
通过 mermaid.esm.mjs 或 mermaid.esm.min.mjs 以及 mermaid.initialize() 调用导入 mermaid 库，这决定了图表的外观并启动渲染过程。

需要注意的是，创建 mermaid 图表的语法定义在<pre class="mermaid">中。

<body>
  Here is a mermaid diagram:  <pre class="mermaid">
    graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]  </pre></body>

mermaid.initialize() 调用获取在 html 正文中找到的所有 <pre class="mermaid"> 标记中包含的所有定义，并将它们渲染到图表中。

<body>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });  </script></body>

需要注意的是， Mermaid 中的渲染是通过 mermaid.initialize() 调用初始化的。但是，Mermaid 可以让开发者控制何时开始使用 mermaid.initialize() 在网页内查找 <pre> 标记。当您认为并非所有 <pre> 标记都已在 mermaid.esm.min.mjs 文件的执行中加载时，这非常有用。

startOnLoad 是 mermaid.initialize() 可以定义的参数之一

4.Mermaid 与 ChatGPT集成

Mermaid 官方团队开发了 Mermaid Chart ChatGPT 插件，该插件结合了 Mermaid Chart 和 ChatGPT 的功能，以简化图表创建和协作。借助 Mermaid Chart ChatGPT 插件，开发者可以利用生成式 AI 和智能图表的潜力来提高工作效率并加强团队的沟通。

安装插件

安装 Mermaid Chart ChatGPT 插件很简单，只需按照以下步骤操作：

访问 ChatGPT 应用商店并搜索“Mermaid Chart”。
单击“安装”按钮，让插件与 ChatGPT 环境无缝集成。

用法插件

使用 Mermaid Chart ChatGPT 插件也非常简单，只需要按照如下流程：

将 prompts 合并到 ChatGPT 对话中以生成Mermaid diagrams。通过简单的指令，例如“创建显示立体声系统状态的状态图”或“绘制第二次世界大战的时间线”，开发者可以在对话中生成基于文本的图表。
图表生成后，在 Mermaid Chart 平台继续完善。 ChatGPT 插件充当指南，让图表成为一个起点。进入 Mermaid Chart 基于文本的图表编辑器来微调并最终确定图表。

Mermaid Chart ChatGPT 插件提供了许多好处来增强图表绘制体验：

利用生成式人工智能的力量：利用 ChatGPT 的庞大知识库，该插件不仅提供图表语法，而且还从网络中提取相关信息来填充图表内容。释放人工智能的潜力并加快图表创建过程。
支持在 Mermaid 图表中编辑：虽然 ChatGPT 为图表生成了一个很好的起点，该插件还支持将生成的图表无缝导入Mermaid Chart platform平台，以进一步编辑和细化。
改善沟通和清晰度：借助 ChatGPT 和 Mermaid Chart，开发者可以通过视觉清晰度传达复杂想法，从而节省时间并确保每个人都在同一页面上。提高沟通效率并增强团队内部的理解。
简化工作流程，提高生产力：Mermaid Chart ChatGPT 插件使开发者能够创建具有专业外观的视觉效果，而无需大量的编码或设计技能。通过无缝图表创建简化工作流程、节省时间并提高团队的工作效率。

想了解更多资讯，欢迎前往ChatDZQ官网！www.chatdzq.com

扫码在手机访问

随时随地
掌握经营技巧

专业顾问
为您解决经营难题

立即咨询

咨询热线

400-8856-200

公司动态