uml markdown
Do you hate drawing diagrams for technical documentation? Seems like no sooner you finish a draft, new refinements come along, forcing you to change not only the text but the picture as well. If you're using a traditional drawing tool, that can be tedious.
你讨厌绘制图表的技术文档？ 好像您刚完成草稿，随之而来的是新的改进，迫使您不仅要更改文本，还要更改图片。 如果您使用的是传统绘图工具，那可能会很乏味。
统一语言 (UML)
UML is the acronym for Universal Modeling Language, an effort to standardize an iconography for software design that first appeared 25 years ago. Though perhaps it has not lived up to the larger ambitions of its designers, it still offers a consistent way to visualize various facets of software design.
UML是通用建模语言(Universal Modeling Language)的首字母缩写，这是25年前首次出现的用于标准化软件设计图标的工作。 尽管也许它没有实现其设计师的更大抱负 ，但它仍然提供了一种一致的方式来可视化软件设计的各个方面。
植物UML (PlantUML)
Drawing UML diagrams is tedious, but what if you could instead describe a UML diagram textually, in a way that you could include it directly in a Markdown-based document, see both diagrams and formatted text in a preview as your are editing it, and in addition can export the Markdown as HTML or PDF? Your text and diagrams are seamlessly integrated in one file. That's where PlantUML comes in...
绘制UML图非常繁琐，但是如果您可以用文字描述UML图，以一种方式将其直接包含在基于Markdown的文档中，则可以在编辑时在预览中同时查看图和带格式的文本，并且另外可以将Markdown导出为HTML或PDF吗？ 您的文本和图表无缝集成在一个文件中。 那就是PlantUML进来的地方...
VS代码 (VS Code)
Visual Studio Code (a.k.a. VS Code) has become a popular editor for various computer languages, including Markdown. With a single extension, you can visualize UML diagrams in VS Code's preview panel.
Visual Studio Code(又名VS Code)已成为各种计算机语言(包括Markdown )的流行编辑器。 通过一个扩展，您可以在VS Code的预览面板中可视化UML图。
That extension is called plantuml, and you can install it either by searching for it in the extensions panel (click on the extension icon):
该扩展名为plantuml ，您可以通过在扩展面板中搜索来安装它(单击扩展图标)：
then clicking install, or simply by running the following from a terminal pane (Ctrl+' gets you one):
然后单击“安装”，或仅通过在终端窗格中运行以下命令(Ctrl +'即可完成操作)：
ext install plantuml
ext install plantuml
You'll also need to have some version of Java installed, with JAVA_HOME environment variable set or an executable path with the java binary location in it.
您还需要安装Java的某个版本，并JAVA_HOME环境变量或其中包含Java二进制位置的可执行路径。
将PlantUML添加到您的Markdown中 (Adding PlantUML to your Markdown)
With the extension installed, you can now insert UML diagrams using PlantUML language. An example:
安装扩展后，您现在可以使用PlantUML语言插入UML图。 一个例子：
## uml: sequence diagram
Here I will embed PlantUML markup to generate a sequence diagram.
I can include as many plantuml segments as I want in my Markdown, and the diagrams can be of any type supported by PlantUML.
```plantuml
@startuml
skinparam backgroundColor #EEEBDC
skinparam handwritten true
actor Customer
Customer -> "login()" : username & password
"login()" -> Customer : session token
activate "login()"
Customer -> "placeOrder()" : session token, order info
"placeOrder()" -> Customer : ok
Customer -> "logout()"
"logout()" -> Customer : ok
deactivate "login()"
@enduml
```And now when I open the VS Code's Preview pane:
现在，当我打开“ VS代码”的“预览”窗格时：
What's more, the diagram in the Preview pane is kept in sync with the UML as described the Markdown document. No need to refresh the Preview pane.
此外，如Markdown文档中所述，“预览”窗格中的图与UML保持同步。 无需刷新“预览”窗格。
That's great, but what if you want to export a diagram from within the Markdown? For that you'll need a little help from your friends...
太好了，但是如果您想从Markdown中导出图表怎么办？ 为此，您需要朋友的一点帮助...
导出到SVG或PNG (Exporting to SVG or PNG)
In order to export individual diagrams, I need to install GraphViz, which is "open source graph visualization software". It works in conjunction with the plantuml extension installed earlier. Unlike plantuml, it is not a VS Code extension, but an executable.
为了导出单个图，我需要安装GraphViz ，它是“开源图可视化软件”。 它与先前安装的plantuml扩展一起使用。 与plantuml不同，它不是VS Code扩展，而是可执行文件 。
To export to SVG or PNG:
导出为SVG或PNG：
- place your cursor within the desired PlantUML text, 将光标放在所需的PlantUML文本中，
- open the command palette (Ctrl-Shift-P on my PC); or right click and select Command Palette... 打开命令面板(在我的PC上为Ctrl-Shift-P)； 或右键单击并选择“命令面板” ...
- Choose "PlantUML: Export Current Diagram" 选择“ PlantUML：导出电流图”
You can choose PNG, SVG, or other formats.** Here's the PNG and SVG versions of the diagram shown in the Preview pane, above:
您可以选择PNG，SVG或其他格式。**这是上方“预览”窗格中显示的图的PNG和SVG版本：
You also have the option to export all diagrams within a Markdown document (command palette option "PlantUML: Export Current File Diagrams"), which will create separate image files for each diagram. For instance, my Markdown doc is named basic.md and when I export all diagrams (there are three) as SVG, three image files are generated:
您还可以选择导出Markdown文档中的所有图表(命令选项板选项“ PlantUML：导出当前文件图表”)，这将为每个图表创建单独的图像文件。 例如，我的Markdown文档名为basic.md ，当我将所有图(有三个)导出为SVG时，将生成三个图像文件：
- basic.svg (the sequence diagram already shown) basic.svg(序列图已显示)
- basic-1.svg (a class diagram) basic-1.svg(类图)
### uml: class diagram
```plantuml
@startuml
package "customer domain" #DDDDDD {
class Contact {
+ email
+ phone
}
class Address {
+ address1
+ address2
+ city
+ region
+ country
+ postalCode
+ organization
}
note right of Address
There are two types of
addresses: billing and shipping
end note
class Customer {
}
Customer *-- Contact
Customer *-- ShippingAddress
Customer *-- BillingAddress
Customer *--{ SalesOrder
class ShippingAddress <<Address>>
class BillingAddress <<Address>>
class SalesOrder {
+ itemDescription
+ itemPrice
+ shippingCost
+ trackingNumber
+ shipDate
}
}
@enduml
```- basic-2.svg (a state diagram) basic-2.svg(状态图)
## uml: state diagram
```plantuml
@startuml
scale 600 width
skinparam backgroundColor #FFEBDC
[*] -> Begin
Begin -right-> Running : Succeeded
Begin --> [*] : Aborted
state Running {
state "The game runneth" as long1
long1 : Until you die
long1 --> long1 : User interaction
long1 --> keepGoing : stillAlive
keepGoing --> long1
long1 --> tooBadsoSad : killed
tooBadsoSad --> Dead : failed
}
Dead --> [*] : Aborted
@enduml
```** Other formats I've tried to export using just this extension are HTML, which failed with a Java error:
**我尝试仅使用此扩展名导出的其他格式是HTML，但由于Java错误而失败：
java.lang.UnsupportedOperationException: HTML
java.lang.UnsupportedOperationException: HTML
and PDF, which fails with a similar error. No worries! I have workarounds, as will be shown.
和PDF，但出现类似错误。 别担心！ 我有解决方法，如下所示。
进一步的功能 (Further functionality)
There is another useful VS Code extension called Markdown Preview Enhanced. This adds a second preview pane in addition to VS Code's native Preview pane.
还有另一个有用的VS Code扩展，称为Markdown Preview Enhanced 。 除了VS Code的本机“预览”窗格之外，这还添加了第二个预览窗格。
For some reason, two versions show up in my Extension pane when I searched for it; I chose the latest:
出于某种原因，当我搜索“扩展”窗格时，会显示两个版本。 我选择了最新的：
Now you will see two preview controls above your Markdown document:
现在，您将在Markdown文档上方看到两个预览控件：
With the pane open, you can now right click on it and export to various formats, such as HTML or PDF.
打开窗格后，您现在可以右键单击它并导出为各种格式，例如HTML或PDF。
导出为PDF (Export to PDF)
Markdown Preview Enhanced is able to work with the Chrome browser to generate PDF documents, through the Puppeteer driver. All you need to do is provide some front matter in your markdown that directs Puppeteer how to layout the PDF:
Markdown Preview Enhanced可以与Chrome浏览器一起通过Puppeteer驱动程序生成PDF文档。 您所需要做的就是在Markdown中提供一些最重要的信息 ，以指导Puppeteer如何布局PDF：
---
puppeteer:
landscape: true
format: "letter"
timeout: 3000 # <= wait 3 seconds before rendering in browser
---
# Overview
This walks through a few of use cases, linking them to "classes", which are either simple data objects or objects with methods.
---
# UML Diagrams
...The front matter will not appear in the either the regular VS Code Preview pane, nor the Markdown Preview Enhanced pane.
首要问题不会出现在常规VS Code预览窗格或Markdown Preview Enhanced窗格中。
To export simply right click in the Markdown Preview Enhanced pane and select Chome (Puppeteer) -> PDF:
要导出，只需在Markdown Preview Enhanced窗格中右键单击并选择Chome(Puppeteer)-> PDF：
It takes a few seconds, but the PDF will eventually be generated and your default browser will open (not necessarily Chrome) with the PDF document displayed.
这需要几秒钟的时间，但是最终会生成PDF，并且您的默认浏览器将打开(不一定是Chrome)并显示PDF文档。
UML is a rich language, and PlantUML supports much of it, in addition to some non-UML diagrams. You don't have to be a UML expert to convey ideas through diagrams, but you will find your diagrams easier to modify through text than though a drawing tool. On top of that, the ability to embed diagrams in your Markdown documentation and export it in different formats is a big plus.
UML是一种丰富的语言， 除了一些非UML图之外 ， PlantUML还支持其中的许多语言。 您不必是UML专家就可以通过图表传达思想，但是与使用绘图工具相比，通过文本修改图表更容易。 最重要的是，能够将图表嵌入到Markdown文档中并以不同的格式导出。
翻译自: https://www.freecodecamp.org/news/inserting-uml-in-markdown-using-vscode/
uml markdown
扫一扫
2347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
