在前端开发中，绘制流程图和时序图是比较常见的工作，此时 notable-mermaid 是一个不错的选择，它是一个 npm 包，提供了一种简单快捷的方式来完成这项工作，下面就让我们来详细了解一下如何使用这个包。
notable-mermaid 是什么？
notable-mermaid 是一个基于 mermaid.js 的软件包，可以将文本描述的流程图、时序图等转换为 SVG 或 PNG 图片。mermaid.js 是一个开源项目，它使用纯文本来定义图表，支持流程图、序列图、甘特图等多种图表类型。
notable-mermaid 提供了一个简单的接口，让开发者很容易就能够将 mermaid.js 完成的图表嵌入到他们的应用程序中。使用 notable-mermaid，你可以在不写任何 HTML 或 JavaScript 代码的情况下快速创建漂亮的图表。
notable-mermaid 的安装
notable-mermaid 是一个 npm 包，标准的安装方法是使用 npm 命令。在终端中运行以下命令来安装 notable-mermaid：
npm install -g notable-mermaid
注意：在安装 globally 的情况下，可能需要使用sudo 命令。如果你使用的是 Windows 系统，你需要在命令旁边加上管理员权限。
notable-mermaid 的使用
notable-mermaid 的使用非常简单，它只需要接收一个字符串作为参数，然后将其渲染成一个流程图或序列图的 SVG 或 PNG 图片。
下面是一个简单的例子。
const mermaid = require('notable-mermaid');
const chart = 'graph LR\nA-->B\n';
const svg = mermaid.render(chart);在这个例子中，我们只是将一个字符串传递给 notable-mermaid 作为参数，并通过接收返回的 svg 字符串将图表渲染到页面上。
值得注意的是，如果你想要生成 PNG 格式的图片，只需要将第二个参数设置为 ‘png’。
const png = mermaid.render(chart, 'png');
notable-mermaid 的示例代码
下面是一个完整的 HTML 示例代码，它将用 notable-mermaid 渲染出一张时序图。
-- -------------------- ---- -------
--------- -----
------
------
------ --------------- - --- -----
----- ---------------- --------------------------------------------------------------------- --
------- --------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
-------
------
---- ----------------
---------------
-------------- ----- ----- --- --- ----
-------------- ----- --- --- ---- ---
--------------- -- ------ - --- ---- ----
--------------- - ---- ------
------
--------
--------------------
------------ -----
---
-------------------- -- -- --------------- ---
---------
-------
-------在这份示例代码中，我们需要引入 notable-mermaid 的 CSS 文件和 JavaScript 文件，并把需要渲染的字符串放到一个包含 class="mermaid" 的 div 元素中。最后，我们需要在脚本中调用 mermaid 的 initialize() 方法，然后再调用 mermaid 的 render() 方法触发渲染。
不难看出，使用 notable-mermaid 渲染图表非常简单，只需要掌握其基本的 API 就足够了。
总结
notable-mermaid 是一个非常好用的 npm 包，它基于 mermaid.js 实现了一种简便的方式来创建和渲染流程图和时序图，我们只需要传入一些简单的文本，并通过其提供的 API 来实现渲染操作即可。希望本文对大家能够有效地学习和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005774981e8991b448eacd2