Docusaurus与PlantUML

Docusaurus是一种基于React的文档框架，支持markdown、Jsx等文档格式。而PlantUML作为一种简单直观的图形语言，在Docusaurus V2上暂时不支持。

在VSCode上使用PlantUML

目前在VSCode中，有现成的扩展可以直接使用PlantUML语言作图，快捷键Alt+D即可预览。

在Docusaurus项目中引入PlantUML

在线API文档平台ShowDoc中已经支持PlantUML的在线编辑与展示，在其源码中搜索，可找到以下两处引用PlantUML的地方。

• webstaticeditor.mdlibplantuml.js
  
  函数 plantuml_imgsrc(data) 根据输入的数据加密，与PlantUML的在线服务器地址拼接，作为图片的预览地址
• webstaticeditor.mdeditormd.js
  
  此处调用函数，将得到的图片地址设置到<img/>中

因此在Docusaurus项目中，可以借用下ShowDoc的代码plantuml.js

引入PlantUML

在项目的src/theme目录下新建文件Plantuml.js，内容与ShowDoc保持一致。
需要注意的是，因为语法不同，需要将一些未声明的变量规范一下，如下图所示：

在js的文件的最开头添加以下代码，即引用下方加密生成图片地址的方法，使用React的形式返回

import React from 'react';

const Plantuml = ({ text }) => {
	return <img src={plantuml_imgsrc(text)}/>;
};

export default Plantuml;

在MarkDown中使用

// 引入Plantuml组件
import Plantuml from '@theme/Plantuml';

// 使用生成图片地址, 使用React生成 <img src={link}>
<Plantuml text={`
    PlantUml脚本
`}/>

需要当前网络与https://www.plantuml.com畅通，或者修改Plantuml.js中拼接的在线服务器地址为自己搭建的服务

实现效果

这样，在Docusaurus中使用PlantUML就成功了。。。

本人非专职前端，教程仅供参考。

最后

以上就是犹豫枫叶为你收集整理的【Docusaurus】引入PlantUMLDocusaurus与PlantUML的全部内容，希望文章能够帮你解决【Docusaurus】引入PlantUMLDocusaurus与PlantUML所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。