Shulou(Shulou.com)06/02 Report--

This article mainly introduces why vscode can not draw pictures, the introduction in the article is very detailed, has a certain reference value, interested friends must finish!

Why can't vscode draw a picture?

UML drawing is based on markdown.

Prepare the environment

First of all, install npm and cnpm globally.

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

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

This plug-in provides a preview of md files.

Right-click on the contents of the md file and select.

2 install puppeteer

Puppeteer provides functions such as exporting pdf, html, and so on. Right-click Preview Picture > > Chrome (Puppeteer) > > PNG to generate an image

Sudo cnpm install-g puppeteer

Flowchart demo

Flow chart

````flowst= > start: process start e = > end: process end op1= > operation: player ready op2= > operation: start cycle op3= > operation: execute loop statement op4= > operation: loop end cond1= > condition: ready cond2= > condition: judge cycle condition st- > op1- > cond1cond1 (yes, right)-> op2 (right)-> cond2cond1 (no)-> op1cond2 (yes)-> op3- > cond2cond2 (no)-> op4- > e

Diagram demo

Relation diagram

````mermaidgraph LR client1-- > | read / write | SVN ((SVN server)) client2-- > | read only | SVNclient3-- > | read / write | SVNclient4-- > | read only | SVNclient5 (...)-> SVNSVN--- | store the data | sharedrive

Note:

The default color of the diagram may be ugly. You can change [Mermaid Theme] in [user Settings] to [forest].

The above is all the content of the article "Why vscode can't draw a picture". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.