VSCode 中使用 PlantUML 插件生成 UML

环境配置

PlantUML 本身只是一个脚本语言,如果要生成图片,是基于 GraphViz 绘图的。而 GraphViz 又是基于 dot 脚本生成图片,它依赖于 Java 和 Dot 脚本环境的配置。

所以,使用 PlantUML 有如下基本环境要求:

1.安装 Java 环境

上官网下载后安装:https://www.java.com/zh_CN/

注意配置 $JAVA_HOME 环境变量。

配置完毕后启动 Windows Shell 执行 java -showversion 命令查看 Java 版本,以确定 Java 环境是否准备成功。

2.安装 GraphViz 程序

下载地址:http://www.graphviz.org/Download_windows.php

下载安装完后(灰姑娘将其安装到了 D 盘路径:D:/program files/Graphviz/下),也要配置环境变量。

将 GraphViz 可执行程序路径配置到 $path

后面的所有配置( dot 配置和 VSCode 插件配置)都是基于 GraphViz 的安装路径,需要参照的小伙伴请注意。

3.配置 Dot 脚本环境

添加环境变量 $GRAPHVIZ_DOT。如下图所示:

配置完毕后启动 Windows Shell 执行 dot -v 命令查看 Dot 版本,以确定 GraphViz 和 Dot 环境是否准备成功。

4.安装 VSCode 插件并配置

VSCode 需要安装两个插件: PlantUMLGraphviz Preview

打开 VSCode 切换到左侧扩展商店,搜索并安装他们,安装完毕后分别激活。

点击 VSCode 左下角齿轮按钮进入设置,在用户设置脚本中添加 "graphviz-preview.dotPath": "D:/program files/Graphviz/bin/dot.exe" 并保存设置:

5.环境配置测试

重启 VSCode 。

新建文档输入以下测试代码:

class="line">@startuml

[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string

State1 -> State2
State2 --> [*]

@enduml

同时按下 Alt 键和字母 D 键,预览生成的 UML 状态图。

如果出现如图所示的错误,检查下是不是前面 GraphViz 安装和配置没做好。

分享: DNS 解析流程图

为了画这个图,灰姑娘专门去学了下这个脚本语言。如果小伙伴们也想学习,官方中文指导手册在这里:点击下载。除此之外,这里 还有网友分享的快速入门教程。

回到正题,我的目的是要画个 DNS 解析流程图。

最后图是勉强画出来了,看看画得咋样?

上图源代码分享如下:

class="code">
@startuml
title 域名解析流程图
skinparam state {
StartColor MediumBlue
EndColor Red
BorderColor Gray
ArrowColor Gray
ArrowFontColor Indigo
BackgroundColor<> AliceBlue
BackgroundColor<> HotPink
}

state UserClient {
[*] --> 请求访问域名
请求访问域名 --> 本机host
本机host -right-> 成功访问域名 : 有映射
本机host --> 本机DNS解析器 : 没有映射
本机DNS解析器 -up-> 成功访问域名 : 有缓存
成功访问域名 --> 本机DNS解析器 : 缓存更新
本机DNS解析器 --> [*]
note left : 本图展示正常解析流程\n未成功访问域名不能结束\n(最左支路径无效)

state 请求访问域名 : ephen.me.
state 请求访问域名<>
state 本机host : Windows 目录:
state 本机host : C:\Windows\System32\drivers\etc
state 成功访问域名 : ephen.me.
state 成功访问域名<>
state 本机DNS解析器 : Windows 查看命令:
state 本机DNS解析器 : ipconfig /displaydns
}

state DNSServer {
本机DNS解析器 -right-> 本地DNS : 没有缓存
本地DNS -right-> 根域名服务器 : 没有解析
本地DNS -left-> 成功访问域名 : 有解析
根域名服务器 --> 顶级域名服务器
顶级域名服务器 --> 域名服务器
域名服务器 --> 本地DNS : 获取结果并缓存

state 本地DNS : 用户配置(8.8.8.8
state 根域名服务器 : a.root-servers.net.
state 根域名服务器 : b.root-servers.net.
state 根域名服务器 : ...
state 根域名服务器 : m.root-servers.net.
state 顶级域名服务器 : a0.nic.me.
state 顶级域名服务器 : b0.nic.me.
state 顶级域名服务器 : ...
state 域名服务器 : lv3ns1.ffdns.net.
state 域名服务器 : lv3ns2.ffdns.net.
state 域名服务器 : lv3ns3.ffdns.net.
state 域名服务器 : lv3ns4.ffdns.net.
}
@enduml

希望我的分享能对路过这儿的你能有所帮助。

你可能感兴趣的:(工具软件)