如果你是一名前端工程师并且经常使用 markdown 编写文档，那么你一定知道 markdown-it 这个带有插件扩展系统的 Markdown 解析器。今天我们将要介绍一个新的插件: markdown-it-plot，它可以帮助你在 markdown 中内嵌绘制图表，让你的文档更加视觉化。
一、安装
在使用 markdown-it-plot 之前，你需要确保你已经安装了 markdown-it。接着，你可以使用 npm 命令安装 markdown-it-plot：
npm install markdown-it-plot --save-dev
二、使用
安装完成之后，你需要将 markdown-it-plot 插件引入到你的代码中，代码示例如下：
const MarkdownIt = require('markdown-it');
const markdownItPlot = require('markdown-it-plot');
const md = new MarkdownIt();
md.use(markdownItPlot);在上面的代码中，我们引入了 markdown-it 和 markdown-it-plot 两个 npm 包，并且使用 md.use(markdownItPlot) 将 markdown-it-plot 插件加入到 markdown-it 中。
接着，我们就可以在我们的 markdown 文档中使用 %% 符号进行绘图了。语法如下所示：
%%
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
%%在上面的代码中，我们使用了 flowchart.js 的语法，绘制了一个简单的流程图。你可以根据你的所需更改语法以绘制不同类型的图表，如折线图，柱状图等等。绘制出来的效果如下所示：
三、示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------------- ----------
----- ----------------
------- --------------------------------------------------------------------------------
------- ------------------------------------------------------------------------
------- ---------------------------
-------
------
-------------------- -------
---- ------------------
--------
----- -- - --- -------------------
---------- ------------- ----- -
-- ----- -- ------------------------------ -
--- -
------ ----- -------------------- -
--------------------------- ---- ----------- -
----------------
- ----- ---- --
-
------ --- -- --- -------- ------- --------
-
---
------------------------------
----- ------ - ----------------------------------
----- ------ - -
- ---------------- --
-----------
--
----- ---
------
------
------
------
--
--------
--
-----------
-
------- ------
------- -
--------- ----------- ----------- -------- -------- ------ ------- --------
----------- --
-------- --- ----- ---------
------- ---- --- --- --- --- --- ----
------- ------
------------------ ----------- --- ---- ------ ---------- ---- --- ------ ---------- ---- --- ------ --------- ---- ---- ------ --------- ---- ---- ------ ---------- ---- ---- ------ ---------- ---- --- -------
-------------- ---------- --- ------ --------- ---- ----- --------- ---- ----- -------- ---- ------ -------- ---- ------ --------- ---- ------ --------- ---- ------
-------------- -
--
--
---------- -
--------- -
-------- --
-------- -
-------------- ----
-
--
-
-
-
------
--
--
---------------- - ------------------
---------
-------
-------在上面的代码中，我们引入了 markdown-it，markdown-it-plot 和 mermaid 这三个 npm 包，并且在 <script> 标签中使用 md.use(markdownItPlot) 将 markdown-it-plot 插件加入到 markdown-it 中。
在 markdown 文档中，我们使用 %% 符号进行绘图，并使用  的语法在文档中插入图片。最后，我们使用 md.render(source) 将 markdown 文档渲染成 HTML，并将其插入到 <div> 元素中显示。
四、总结
markdown-it-plot 这个插件可以帮助我们在 markdown 文档中绘制图表，让文档更加视觉化，更加易读易懂。它支持多种类型的图表，并且语法简单易学，使用起来非常方便，非常适合前端开发者。希望本文能够帮助你更好地使用 markdown-it-plot。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583a3e