npm 包 hexo-graphviz 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，如何在文章中展示流程图和时序图等图表呢？一种方法是使用 hexo-graphviz 这个 npm 包。hexo-graphviz 是一个 hexo 插件，可以让你在 hexo 博客中插入 graphviz 脚本和渲染出它们的图形。

安装

安装 hexo-graphviz，可以通过 npm 安装：

npm install hexo-graphviz --save

安装完成后，将 hexo-graphviz 添加到博客的 _config.yml 中。

plugins:
  - hexo-graphviz

现在，hexo-graphviz 已经成功安装到了你的 hexo 博客中。

使用

在 markdown 文本中写入 graphviz 脚本，例如：

digraph G {
  rankdir=LR;
  A -> B
  B -> C
}

在 markdown 文本中使用下面的语法渲染图形：

{% graphviz %}
digraph G {
  rankdir=LR;
  A -> B
  B -> C
}
{% endgraphviz %}

最终会渲染出下面的流程图：

同样地，可以插入时序图：

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I am doing well!

使用下面的语法渲染：

{% graphviz %}
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I am doing well!
{% endgraphviz %}

最终会渲染出下面的时序图：

详细教程

渲染图形的语法是由 hexo-graphviz 提供的，这个语法是由 Liquid 模板语言和 graphviz 语法组成的。下面详细介绍如何使用 hexo-graphviz 渲染图形。

语法

在 markdown 文本中，使用下面的语法渲染出图形：

{% graphviz %}
graphviz_script
{% endgraphviz %}

graphviz_script 是 graphviz 脚本。在 graphviz 脚本中，你可以使用 graphviz 的语法编写图形。hexo-graphviz 将会渲染出 graphviz 脚本所表示的图形。

图形的属性

图形有一些属性，属性可以在 graphviz 脚本中设置。下面介绍最常用的属性。

rankdir

图形中结点排列方向。取值是 LR，TB，RL 和 BT。缺省值是 TB（Top to Bottom，从上往下）。

digraph G {
  rankdir=LR;
  A -> B
  B -> C
  C -> D
}

上面的 graphviz 脚本将会渲染出下面的图形：

ranksep

节点的行距和列距。这个值会影响到节点的位置和图像的大小。

digraph G {
  rankdir=LR;
  ranksep=1.5;
  A -> B
  B -> C
  C -> D
}

上面的 graphviz 脚本将会渲染出下面的图形：

node[shape]

每个节点的形状。这个值是在 graphviz 脚本中设置的，默认为 ellipse，即椭圆形。

digraph G {
  rankdir=LR;
  node[shape=box];
  A -> B
  B -> C
  C -> D
}

上面的 graphviz 脚本将会渲染出下面的图形：

练习

现在，尝试用 hexo-graphviz 渲染一个自己设计的流程图和一个时序图。

digraph flow {
  rankdir=LR;
  A -> B
  B -> C
  B -> D
  D -> E
  C -> E
}

sequenceDiagram
    Alice->>+John: 发送一个信息给 John
    Alice->>+John: 请求 John 回复信息
    John-->>-Alice: 回复信息
    Alice->>John: 感谢 John 回复信息

上述图形最终呈现的结果如下：

总结

hexo-graphviz 帮助我们在博客中渲染流程图和时序图，非常方便。我们只需要编写简单的 graphviz 脚本，就可以渲染出美观的图形。在实际的博客写作中，我们也可以使用更多 graphviz 脚本的语法，来实现更丰富的图形模式。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066b5851ab1864dac66e27