Hexo中插入dot的svg图片

发表于 更新于 分类于 ， Waline： 本文字数： 1.1k 阅读时长 ≈ 1 分钟

问题描述

VScode中写markdown时，可以安装插件，然后在代码块中接口渲染dot
但是在Hexo,没有很方便的插件

所以

使用svg在线渲染服务

1
2
3
4
5
6
7
8
9
10
11
12
13
![xxx](https://g.gravizo.com/svg?
digraph demo {
  rankdir=LR;
  node [shape=record];
  h [shape=ellipse];
  n [shape=ellipse];

  a [label="{1|null}" color="red"];
  
  h -> null;
  n ->a;
}
)

图片

方法1：进行URL编码后使用

但是这样的写法在hexo不会渲染成功，需要进行URL编码：

1
![xxx](https://g.gravizo.com/svg?digraph%20demo%20%7Brankdir%3DLR%3Bnode%20%5Bshape%3Drecord%5D%3Bh%20%5Bshape%3Dellipse%5D%3Bn%20%5Bshape%3Dellipse%5D%3Ba%20%5Blabel%3D%22%7B1%7Cnull%7D%22%20color%3D%22red%22%5D%3Bh%20-%3E%20null%3Bn%20-%3Ea%3B%7D)

渲染效果如下：

xxx

方法2：写在一行

1
![xxx](https://g.gravizo.com/svg?digraph demo {rankdir=LR;node [shape=record];h [shape=ellipse];n [shape=ellipse];a [label="{1|null}" color="red"];h -> null;n ->a;})

渲染效果：

![xxx](https://g.gravizo.com/svg?digraph demo {rankdir=LR;node [shape=record];h [shape=ellipse];n [shape=ellipse];a [label=”{1|null}” color=”red”];h -> null;n ->a;})

参考资料

https://juejin.cn/post/6844903702109634568
http://g.gravizo.com/
http://www.plantuml.com/plantuml