vscode画UML图

最新推荐文章于 2024-10-13 00:45:42 发布

o烨子o

最新推荐文章于 2024-10-13 00:45:42 发布

阅读量5.7k

点赞数 2

分类专栏： vscode

本文链接：https://blog.csdn.net/qq_41049934/article/details/85149572

版权

本文介绍了如何在VSCode中利用Markdown和Markdown Preview Enhanced插件画UML图，包括流程图和关系图的示例。通过安装Puppeteer，还可以将图表导出为图片。

摘要由CSDN通过智能技术生成

准备环境

流程图demo

关系图demo

画UML图是基于markdown实现的。

准备环境

首先要[全局]安装npm和cnpm。

由于我在安装vue的时候已经安装好了。此处省略

1 通过vscode安装 Markdown Preview Enhanced 插件。

这个插件提供md文件的预览功能。

右键点击md文件内容，然后选择即可。

2 安装puppeteer

puppeteer提供导出pdf、html等功能。右键预览图片 >> Chrome(Puppeteer) >> PNG即可生成图片

sudo cnpm install -g puppeteer

流程图demo

流程图

```flow
st=>start: 流程开始
e=>end: 流程结束

op1=>operation: 选手准备
op2=>operation: 开始循环
op3=>operation: 执行循环语句
op4=>operation: 循环结束 

cond1=>condition: 准备好了么
cond2=>condition: 判断循环条件


st->op1->cond1
cond1(yes, right)->