Use VSCode+PlantUML+ c4-model for quick easel composition

About the C4 – Model

Recently, I was reading C4-Model. Its concept is very practical. The architecture diagram should be clearly oriented to the crowd. System Context –> Container –> Component –> Code.

For details of what each level of graphics describes, see here: www.infoq.cn/article/C4-…

The focus of this article is much smaller and does not discuss the levels of the tao, but rather describes how to do it, which is the level of the art.

Install vscode

In fact, it is also possible to use plantUML directly, but plantUML has a simple interface and weak functions, while vscode has a plug-in for plantUML, which is more convenient to use.

Vscode installation is very simple, MAC https://code.visualstudio.com/Download download DMG file install directly to the Application.

Install vscode plantUML&Graphviz

PlantUML is a tool for drawing UML diagrams with text and code, without considering attitude, color, location, etc. The corresponding plug-ins on vscode have similar functions.

Graphviz is a graphical preview plugin. PlantUML can only render sequence diagrams by default. For complex graphics, Graphviz is required to render.

Search for installations directly in vscode’s marketplace as follows:

PS: Running plantUML requires a Java environment. Please install JDK and configure environment variables yourself.

If Graphviz is not installed, an error will be reported during rendering:

/opt/local/bin/dot File not exist.
Copy the code

Configure snippets for c4-Model

Vscode has the concept of a workspace, which is a working directory. Via File – > open… When you open a directory, you default to that directory as a workspace.

By default, a hidden subdirectory.vscode under the current directory is read in the workspace to get the Settings for the current workspace. Here we only customize the snippets of the C4-Model to aid in drawing.

First, pull the source code of c4-Plantuml project from Github as follows

git clone https://github.com/RicardoNiepel/C4-PlantUML
Copy the code

You can see the code structure:

The snippets files we need are right here, just copy the directory into a workspace, like mine:

In field drawing

When drawing can use the code, feel a little excited, common UML graph grammar can refer to http://plantuml.com/zh/sitemap-language-specification here

I’m just going to give a brief introduction to the C4-Model.

Common elements

There are several elements in c4-Model, all of which are intuitive:

We know the System with the DB, Application, WebPage, System_ext, and we have a System boundary where we say we are parts of the System, Container: a Container, not a Docker Container, is part of a System. Such as DB, Application ContainerDb: DB Container_Boundary: container boundaries, within the scope of this boundary is part of the container, it is usually the Component level data Component: a Component, Such as a Controller, a Service logic class, a Domain, etc. Rel: connection lineCopy the code

It should also be emphasized that for normal drawing tools, the file suffix should be saved as.uml, while for C4, it should be saved as.puml. Save it as the suffix so that snippets will take effect later in the process.

There is also some special code to specify the pattern of the graph — note the following () :

LAYOUT_WITH_LEGEND()

Adding this line of code after include produces the following in the bottom right corner of the generated graph:

LAYOUT_AS_SKETCH()

Add this to represent a draft, and the entire render will generate a draft shape like this:

LAYOUT_TOP_DOWN

The direction of arrangement, as the name implies, is from top to bottom. Note that parentheses are not needed

LAYOUT_LEFT_RIGHT

The direction of arrangement, as the name implies, is from left to right. Note that parentheses are not needed

Start writing the corresponding code
@startuml ! include /Users/alankim/gitspace/C4-PlantUML/C4_Container.puml 'LAYOUT_WITH_LEGEND() LAYOUT_AS_SKETCH() Person(user, "User") System_Boundary (item, "commodity related") {System (itemCenter, "commodity center", "") System (priceCenter, center of" price ", "") System(InventoryCenter," ")} System_Ext(orderPlatform, "Stock ") System_Ext(wmsStock," stock ") System_Ext(Buy," Stock ") Rel(wmsStock, InventoryCenter, Rel(Buy,itemCenter) Rel(User,orderPlatform, Submit order) Rel(Buy,priceCenter," Price query ") Rel (orderPlatform InventoryCenter, "deduct inventory") Rel (InventoryCenter itemCenter, Rel(priceCenter,itemCenter, SkU) Rel(User,buy, user browsing) @endUMLCopy the code

This picture is relatively complex, and basically uses most of the components. The corresponding generated graph is as follows:

This article is published by OpenWrite!