On VScode UML view of the code line and

UML diagrams

UML 和 PlantUML

UML-Unified Modeling Language Unified Modeling Language, also known as the standard modeling language. It is used for software-intensive system of visual modeling language. UML is defined to include UML and UML semantics represent two element method.

PlantUML is to achieve a fast drawing UML open source project, you can at his official website http://plantuml.com/zh/ find the download package is a Java jar package, but you first need to install the Java environment.

This paper stresses the use Markdown Preview Enhance PlantUML plug-ins and plug-in on VScode fast graphics, and export images. The former supported *.wsd, *.pu, *.puml, *.plantuml, *.iumlfile formats, which supports the Markdown preview and drawing directly, and through other plugins to export Markdown documents to other formats.

VScode

VScode is for Microsoft to write modern Web and cloud applications cross-platform source code editor also supports a variety of document preparation, plug-in rich, powerful, especially for front-end development, very friendly, and also it can be used to develop Python project.

VScode official website: https://code.visualstudio.com/ , you can directly download the installation package corresponding to the system, installation, no additional configuration. The new version of the software VScode set, changed from a graphical interface JSON format, but JSON file also can edit the settings if you need to set the interface legacy JSON format, download your own search.

Java

download

You can install the package in Java Java ORACLE's official site to download the corresponding system is the latest version of Java SE12.0.1, it recommended to install Java SE 8u211 version, the JDK that one, click Downloade. You need to download is the Java SE Development Kit 8u211 , and then click License Accept Agreement button in front, X86 represents the 32-bit operating system, X64 represents the 64-bit operating system, select the corresponding package download.

Installation and Environment Variables

installation

Click to install after the download is complete.

Windows optionally installed on the C drive or other location. Ubuntu users can download the deb installation packages installed directly, find your Java installation location, adding environment variables, or download custom Java archive location. MacOS users your own Baidu.

Environment Variables

Windows10

Search Search Advanced System Settings , click to enter

to find the environment variable , Click here:

click System variables below New to create a JAVE_HOME system variable, the value of your Java installation directory, change themselves, such as:

D:\Program Files\Java\jdk1.8.0_91

Then set CLASS_PATH , value .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;, copy and paste:

Then find the system variables in the Path , double-click the entry, click New, add the following two lines:

Variable value:% JAVA_HOME% \ bin
variable value:% JAVA_HOME% \ jre \ bin

Figure:

Test:

Enter CMD or Powershell in javacor java -versioncheck whether the installation was successful. An error, please recheck the installation steps.

Ubuntu

Also in the official website to download the corresponding installation package, the installation can be selected user set a global variable or variables.

1. Modify global variables

sudo vim /etc/profile

At the end profile increases JAVA_HOME, CLASSPATHand PATH, for example,

export JAVA_HOME=/usr/local/java/jdk1.8.0_171  # java的安装或解压目录
export CLASSPATH=.:${JAVA_HOME}/lib/dt.jar:${JAVA_HOME}/lib/tools.jar
export PATH=${JAVA_HOME}/bin:$PATH

Then run source /etc/profile, it is environmentally effective immediately.

2. Modify user variables

Modify the current user profile .bashrc, only apply to the current user:

sudo vim ~/.bashrc

And on the same set

Then run source ~/.bashrc, set to take effect immediately.

test:

Run java -version, view java version, if the normal output version information is configured correctly, you can restart the setting permanent.

Mac

Follow the steps above to download Java, after the download is complete open dmp, Java can be found in the root directory, as shown.

Editing system variables, adding JAVA_HOME, CLASS_PATH, PATH, open a terminal, input commands sudo vim /etc/profilefor editing

In the terminal input / usr / libexec / java_home installation directory can be viewed java

Add the following lines:

JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home"
export JAVA_HOME
CLASS_PATH="$JAVA_HOME/lib"
PATH=".$PATH:$JAVA_HOME/bin"

Save and exit, running source /etc/profileconfiguration to take effect immediately.
Input terminal java -versionto check the configuration to take effect.

VScode Configuration

VScode and Java after a successful installation, you can configure VScode to support UML drawing.

PlantUml

installation

Installation PlantUML open source plug-in that supports multiple file suffix UML diagrams.

Find VScode extended page, or press the Ctrl+ Shift+ Xkeyboard shortcut to open directly. In the Search box PlantUML , click Install. Generate other graphics you may need to install GrapgViz (non-essential), but in general PlantUML enough.

In the extended introduction page, with detailed explanations and configuration considerations, only a simple explanation here.

Set up

Click Settings in the bottom left corner VScode, and then click Set top right corner braces, as shown:

Click:

Add the following line:

"plantuml.includepaths": ["docs/diagrams/style","docs/diagrams/src"],

You can also set export and referenced directory, the official tips are:

"plantuml.diagramsRoot": "docs/diagrams/src",
"plantuml.exportOutDir": "docs/diagrams/out"

Relative directory, you can set up their own (not recommended)

The basic setup is that these other tips can go to the plug-in to view the details inside. Setting here, you can stay in the line and the flow chart.

use

UML syntax can PlantUML UML syntax view or Web search. Not repeat them here. Create a new file in VScode suffix changed *.wsd, *.pu, *.puml, *.plantuml, *.iuml, enter the code.

PlantUML grammar to @startumlthe beginning to @endumlthe end, the middle chart type code.

1. Right-click on the file area, you can see the list below, you can click on the preview, export, etc.

2. Or use the shortcut keys Ctrl+ Shift+ P, open a command panel, search PlantUML, have the same list of options, no map.

Markdown Preview Enhanced

Not just use PlantUML plug-in, you can also draw UML diagrams in Markdown files by Markdown Preview Enhanced plug-in to preview and export, is also dependent on the Java.

installation

Find VScode extended page, or press the Ctrl+ Shift+ Xkeyboard shortcut to open directly. In the Search box Markdown Preview Enhanced , click Install.

For writing Markdown files, you may need called Markdown All In One widget can automatically add markdown syntax, and support for shortcut keys.

This plug-in does not require other settings, you can use it directly for previewing. Markdown editor in the upper right corner of the page, find Open Preview To The Side, click, or right-click in the blank space in the list to find something Open Preview To The Side, you can preview Markdown files on the side.

use

In markdown in painting uml chart, you need to write the code block, the language identified as plantuml.

 ```plantuml开头
 @srartuml
 。。。
 @enduml
 ``

Right-click in the preview, you can see the settings menu, PDF , eBook , pandoc export need to install their own Prince xml , pandoc plug, prince xml combination of plug-in generates a PDF effect is not satisfactory, if there is demand for your own search. Recommended use Chrome export file.

Note that if the picture is too long will be split into multiple pages.

Atom configuration

Atom is similar VScode, is also an excellent source code editing tool, you can also use him to draw UML diagrams, official website: https://atom.io/ Like VScode, need to install search PlantUML or Markdown Preview Enhanced plug-in installation , no other settings, and also the use of similar VScode, omitted.

---

reference

Windows10 Setting Java environment variables: https://www.cnblogs.com/silence9527/p/7358239.html

Ubuntu set up Java environment variables:

https://www.tiomg.org/blog?uuid=9a239850-e28c-4723-9f54-1442cb9480dc

PlantUML official site:

http://plantuml.com/zh/

Markdown Preview Enhanced official site:

https://shd101wyy.github.io/markdown-preview-enhanced/#/