前言
在前端开发过程中，我们经常需要显示一些关系型的数据，如流程图、ER 图等。而使用 Graphviz 工具可以轻松创建这些图形。本文要介绍的是 npm 包 remark-graphviz，它是一款基于 Remark 的 Markdown 插件，可以把标记好 Graphviz 语言的代码块转化为可视化的图形，使得将复杂的数据结构以可视化的方式展示成为了一件轻松的事情。
安装
你可以使用 npm 从官网上安装 remark-graphviz 插件，命令如下：
npm install remark-graphviz
使用
我们先来看一下 remark-graphviz 插件的使用方式。在 Markdown 文档中，我们可以用代码块标明一些 Graphviz 语言的代码，来描述一个可视化的画面。例如，下面这个复杂的流程图就是由 Graphviz 实现的。
digraph example {
A -> {B, C};
B -> D;
C -> D;
}remark-graphviz 插件会将该代码块转化为下面这个可视化效果。
是不是非常方便呢？那么接下来我将为大家详细介绍如何使用 remark-graphviz 插件。
在 Markdown 中使用 remark-graphviz
在 Markdown 中使用 remark-graphviz 插件非常简单。我们只需要在需要插入 Graphviz 语言代码块的地方插入以下语句。
```graphviz [graphviz code]
-- -------------------- ---- ------- -- --------- ----- ---------- -------- ----------------- --- ------ --------------- -------------- -------- ------------------------- --------------- ------------- -------- ------ - -------------------------------------- ------ --------------- --------------- -------------- ------------- ----- -------- ------- ------------- ------ - ------- - ---- ---------- ------ ----------- ---- --------------- ------ -------------- ---- ------------------ ----- --------- - ----------------------------------------------- ------------------------------------------------------- ------- ------- - - -- --- --- - -- -- - -- -- - ---------------------
需要注意的是，该方法的处理结果是一个包含了可视化图形的 HTML 字符串。如果要在 HTML 中展示该图形，我们需要在页面中插入对应的 DOM，代码如下。
<div id="graph"/>
使用以下代码可以在上面的 DOM 中插入该图形。
document.getElementById("graph").innerHTML = processor.processSync("[//begin][graphviz]{ digraph example { A -> {B, C}; B -> D; C -> D; } }[//end]").contents;总结
remark-graphviz 是一款非常强大的 Markdown 插件，它可以帮助我们轻松实现 Graphviz 语言代码块的可视化。我们可以在 Markdown 和代码中使用该插件，并实现动态的图形展示效果。希望本文的介绍能够帮助大家更好地使用 remark-graphviz 插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fcf81e8991b448dd57c