介绍
egg-plugin-puml 是一个支持在 Egg.js 应用中使用 PlantUML 图表的插件。PlantUML 是一种文本化的图形语言，可以通过编写简单的文本描述来生成丰富多样的图表。使用 egg-plugin-puml 可以使得在 Egg.js 开发中使用 PlantUML 更加方便快捷。
安装
在安装 egg-plugin-puml 之前，需要先确保安装了 Egg.js 框架。然后可以通过以下命令安装 egg-plugin-puml：
npm install egg-plugin-puml --save
配置
在 Egg.js 应用中，需要进行如下配置才能使用 egg-plugin-puml：
1. 插件启用
在 config/plugin.js 文件中启用 egg-plugin-puml 插件：
exports.puml = {
enable: true,
package: 'egg-plugin-puml',
};2. 静态文件服务
在 config/config.default.js 文件中添加如下配置，以提供静态文件服务：
// 静态文件服务
exports.static = {
prefix: '/public/',
dir: path.join(appInfo.baseDir, 'app/public'),
};3. PlantUML 服务
如果需要在线生成 PlantUML 图表，则需要在 config/config.default.js 文件中添加如下配置，以启用 PlantUML 服务：
exports.puml = {
serverUrl: 'http://www.plantuml.com/plantuml',
};使用
1. 编写 PlantUML 文件
在 Egg.js 应用的 app/public 目录下创建一个 .puml 文件，例如 app/public/demo.puml，并编写 PlantUML 描述语言。
2. 渲染 PlantUML 图表
在需要渲染 PlantUML 图表的页面中，使用如下代码进行渲染：
<div class="puml"> <img src="/public/demo.png"> </div>
其中，.puml 是一个 CSS 类名，可以根据实际情况修改。/public/demo.png 是使用 egg-plugin-puml 渲染出来的图片路径，需要与 .puml 文件同名但后缀名改为 .png。
3. 生成 PlantUML 图表（可选）
如果需要在线生成 PlantUML 图表，则可以使用如下代码进行生成：
-- -------------------- ---- ------- ----- ---- - --------------------------- -- -- -------------------- -------- ---- -- ----- ------ - - --------- ----- ---- ------- -- ----- --- - ----- --------------------- ------- -----------------
这样就可以在控制台输出 SVG 格式的 PlantUML 图表了。
结语
本文介绍了 npm 包 egg-plugin-puml 的使用教程，通过学习本文，读者可以掌握在 Egg.js 应用中使用 PlantUML 图表的方法。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45039