简介
Rabbit-mermaid 是一款轻量级的 Node.js 模块，它可以将 Mermaid 的文本描述转换成SVG图表。Mermaid 是一款流程图、序列图、甘特图等的绘制工具，我们可以使用 Mermaid 编写简洁易懂的图表，rabbit-mermaid 则将其转换成能够直接嵌入 HTML 页面的 SVG 图片，使图表更加美观切实用。
安装
安装 rabbit-mermaid，需要先安装 node.js，具体安装方法可以参考Node.js 官网。
在命令行中输入以下命令来安装 rabbit-mermaid：
npm install rabbit-mermaid
使用方法
基础用法
使用 rabbit-mermaid，我们需要按照 mermaid 的语法规则编写图表描述，然后调用 rabbit-mermaid 中的方法将其转换成 SVG 图片。
在 Node.js 中，我们可以使用以下代码获取 rabbit-mermaid 实例，并将 mermaid 的文本描述传入 convert 方法中：
const rabbitMermaid = require('rabbit-mermaid');
const mermaidText = 'graph TD;\nA-->B;';
const svg = rabbitMermaid.convert(mermaidText);
console.log(svg);输出结果：
-- -------------------- ---- -------
---- ---------------------------------- ---------- ------------
-------
-------------- ----- ---- -
----- ------
------------- ----
------- ----------
-
-------------- ---------- -
---------- -----
-
--------
-- -------------- ----------------------- --- -------------------
-- ---------------------
-- --------------
-- ------------ -------
----- ------ ------ ----- ----- ---------- -------------------
-------------- -------- ----- ----- ---------- ------------
---- ------------------------------------ ---------------------------------- ------------------------
----------------
----
-- ------------ -------
----- ------ ------ ----- ------ ---------- -------------------
-------------- -------- ----- ------ ---------- ------------
---- ------------------------------------ ---------------------------------- ------------------------
----------------
----
----
-- ------------------
-- ---------------- --------------------------------------------- -----------
----- ---------------- ---------------------------- --------------------------------------------------
----- ------------------------ ----------------------------------------------------- ----------------- ------ ------ ------ ------- -------
----
----
----
------将以上代码保存为 example.js，并在命令行中执行：
node example.js
将会在控制台中输出一个 SVG 图片的代码。
语法示例
下面，让我们来看一下 mermaid 的语法示例：
流程图
graph TD; A-->B; A-->C; B-->D; C-->D;
序列图
sequenceDiagram participant 用户 participant 前端 participant 后端 用户->>前端: 在前端页表单 前端->>后端: 发送数据 后端-->>前端: 返回数据 前端-->>用户: 显示数据
甘特图
-- -------------------- ---- ------- ----- ----- ----- ---------- ---------- ------- -- ---- ------ ----------- -- ---- ------ ----------- -- ---- ------ ----------- -- ------- -- ----- -------- ----------- -- ----- - - ----- ----- --- ------- -- ----- - - ----- ----- - --- ----- - - ----- ----- - ---
更多语法示例可以参考 mermaid 官网，链接如下：https://mermaid-js.github.io/mermaid/#/
配置选项
rabbit-mermaid 还提供了一些可供配置的选项，我们可以根据需要进行调整。
theme
通过 theme 可以在不同的主题之间进行切换，rabbit-mermaid 内置了 default、forest、dark、neutral、forest 下的四种主题：
-- -------------------- ---- ------- ----- ------------- - -------------------------- ----- ----------- - ------ ------------- ----- ---- - ---------------------------------- - ------ --------- --- ----- ---- - ---------------------------------- - ------ -------- --- ----- ---- - ---------------------------------- - ------ ------ --- ----- ---- - ---------------------------------- - ------ --------- --- ------------------ ------------------ ------------------ ------------------
width、height
rabbit-mermaid 默认会以合适的尺寸输出 SVG 图片，我们也可以通过设置 width 和 height 去改变 SVG 的大小：
const rabbitMermaid = require('rabbit-mermaid');
const mermaidText = 'graph TD;\nA-->B;';
const svg = rabbitMermaid.convert(mermaidText, { width: 200, height: 150 });
console.log(svg);CSS
@min-width 和 @max-width 属性可用于控制节点大小的范围，箭头大小和边距也可通过 @arrowSize 和 @padding 属性进行调整：
-- -------------------- ---- -------
----- ------------- - --------------------------
----- ----------- - ------ -------------
----- --- - -
------------- ----- ---- -
----- ------
------------- ----
------- ----------
-
------------- ---------- -
---------- -----
-
--------- -
---------- -----
-
----------- ---
----------- ------
----------- -------
--------- ----
--
----- --- - ---------------------------------- - --- ---
-----------------总结
本文介绍了 rabbit-mermaid 的安装、使用，以及如何通过配置选项，调整 mercury 生成的 SVG 图表的样式和尺寸等。代码示例中，我们使用了 mermaid 语法规则编写了流程图、序列图和甘特图等，我们可以将这些图表嵌入到 HTML 页面中，使页面更加生动、直观。rabbit-mermaid 的使用有很大的学习和指导意义，它为前端开发提供了一种轻量级的图表绘制方案，使得数据和流程的表达更加简单和有效。同样，rabbit-mermaid 也为工作流的规划和协作提出了相应的建议，可以应用于个人、小组以及大型项目的管理实践中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbdb7