Why can't vscode draw pictures?

Why can’t vscode draw pictures?

Drawing UML diagrams is based on markdown.

Recommended learning:vscode tutorial

Prepare the environment

First, install npm and cnpm [globally].

Because I have already installed it when I installed vue. Omitted here

1 Install the Markdown Preview Enhanced plug-in through vscode.

This plug-in provides the preview function of md files.

Right-click the content of the md file and select it.

2 Install puppeteer

puppeteer provides functions such as exporting pdf and html. Right-click to preview the image>> Chrome(Puppeteer)>> PNG to generate the image

sudo cnpm install -g puppeteer

Flowchart demo

Flowchart

```flow st=>start: 流程开始 e=>end: 流程结束 op1=>operation: 选手准备 op2=>operation: 开始循环 op3=>operation: 执行循环语句 op4=>operation: 循环结束 cond1=>condition: 准备好了么 cond2=>condition: 判断循环条件 st->op1->cond1 cond1(yes, right)->op2(right)->cond2 cond1(no)->op1 cond2(yes)->op3->cond2 cond2(no)->op4->e

Relationship diagram demo

Relationship diagram

```mermaid graph LR client1-->|read / write|SVN((SVN server)) client2-->|read only|SVN client3-->|read / write|SVN client4-->|read only|SVN client5(...)-->SVN SVN---|store the data|sharedrive

##Note:

The default color of the relationship diagram It may be ugly, you can modify [Mermaid Theme] in [User Settings] to [forest]

The above is the detailed content of Why can't vscode draw pictures?. For more information, please follow other related articles on the PHP Chinese website!