跳到主要内容

Mardown增加PlantUML的渲染

· 阅读需 1 分钟
故事的程序猿👨🏻‍💻
一个后端打酱油程序猿

PlantUML 画图

依靠docusaurus.config.jsmarkdown的配置中的preprocessor方法。

以及Javascript API Client Code——PlantUML官网

需要做三件事:

To use PlantUML image generation, a text diagram description have to be :

  1. Encoded in UTF-8
  2. Compressed using Deflate algorithm
  3. Reencoded in ASCII using a transformation close to base64

最主要的就是利用算法Deflate得到转换后的字符串,这个已经有开源项目给整理好了 plantuml-encoder 拿过来直接使用即可。

首先编写md


```plantuml
@startuml
Bob -> Alice : hello
@enduml
```

配置文件增加

var plantumlEncoder = require('plantuml-encoder')

markdown: {
mermaid: true,
preprocessor: ({ filePath, fileContent }) => {
const plantumlNodeRegex = /```plantuml[\s\S]*?```/gm;
const plantumlContentRegex = /(?<=```plantuml)[\s\S]*?(?=```)/g;
if (filePath.search('docs') != -1) {
let m;
const str = fileContent;
while ((m = plantumlNodeRegex.exec(str)) !== null) {
if (m.index === plantumlNodeRegex.lastIndex) {
plantumlNodeRegex.lastIndex++;
}
m.forEach((match, groupIndex) => {
let n;
while ((n = plantumlContentRegex.exec(match)) !== null) {
if (n.index === plantumlContentRegex.lastIndex) {
plantumlContentRegex.lastIndex++;
}
n.forEach((match2, groupIndex2) => {
fileContent = fileContent.replaceAll(
match,
'![](https://www.plantuml.com/plantuml/svg/' +
plantumlEncoder.encode(match2) +
')'
);
});
}
});
}
}
return fileContent;
}
}

如果你想自己搞的话,参考rawdeflate.js 来着 https://github.com/johan/js-deflate 。但是需要注意这中文编码的问题,可能中文乱码。

文章标题:Mardown增加PlantUML的渲染
版权声明:内容遵守
许可协议。转载请注明出处!
侵权提示:部分信息可能来源于网络。如发现有侵权,请随时联系删除!

相关推荐

记一次ssh免密登录问题:Permission denied

记一次ssh免密登录问题:Permission denied

先说结论:/root 目录的权限问题导致的 ssh 认证不通过!

2分钟在Mac跑个Kafka服务

2分钟在Mac跑个Kafka服务

我一直都是在 centos 服务器上使用 kafka,或者在 k8s 上使用 kafka。 今天 2 分钟在 Mac 跑个 Kafka 服务。

Diy万能博客模板js脚本【静态博客】

Diy万能博客模板js脚本【静态博客】

静态博客工具,一般都使用Markdown文件。那么Front-Matter这些重复的内容就可以使用工具来生成,大部分静态博客工具都支持插件来生成博客文件。

Nacos2.3.2开启服务端用户认证的坑

Nacos2.3.2开启服务端用户认证的坑

最近升级Nacos服务端到版本2.3.2。但是在开启服务端用户认证的时候出现了问题。


神评论