在 VSCode 中使用 PlantUML

最近,因为工作需要绘制一些逻辑图,我自己现在使用的是 PlantUML 或者 mermaid,相比之下前者更加强大。不过它的环境也麻烦一些,mermaid 在一些软件上已经内置了。但是 PlantUML 一般需要自己本地安装或者使用远程服务器(但是网络不是很方便,而且每次想要看都必须使用远程服务器,这点更加不方便了)。所以,在本地配置一个环境是很有必要的了。如果本地有 Java 的环境,那么可以下载 PlantUML 的 jar 包,不过我现在换了电脑,也不再使用 Java 了,所以我已经没有 Java 的环境了。所以我采用了 Docker 镜像的方式,因为我的电脑安装了 Docker Desktop。

拉取镜像并启动服务

Docker 镜像的方法最大的好处就是便捷了,基本上只需要一条命令就能启动一个服务了。

docker run -d -p 8080:8080 plantuml/plantuml-server:tomcat

docker_pull_images

因为我已经下载过了,所以直接就启动了。如果本地没有镜像,会先去 DockerHub 拉取,拉取速度取决于你的网络速度!

在这里插入图片描述
直接访问本机的 8080 端口,看见这个网页即表示服务启动成功了。如果遇到端口冲突的问题,在启动镜像的命令那里,换一个映射端口即可。

在这里插入图片描述

安装 PlantUML 插件

在 VSCode 中使用 PlantUML 需要使用它的插件,这就是 VSCode 的好处,基本上没有什么需求是一个插件解决不了的,哈哈。

在这里插入图片描述

新建一个 .puml 后缀的文件,然后输入下面的内容。鼠标右键选择预览或者快捷键 Ctrl+D 即可查看。

在这里插入图片描述

但是其实,你什么也看不到,因为这个插件本身并不知道你的服务器在哪?插件本身是不提供渲染功能的,它只是一个更好使用 PlantUML 的工具。所以我们接下来要配置一下,让它直到怎么本地服务器的位置。它是支持使用 PlantUML 的远程服务来渲染的,不过那样不就是回到了开头了吗?所以在这里不考虑。

在这里插入图片描述

注意,虽然我们的 Docker 镜像是本地运行的,但是这里其实并不是本地的模式,算是远程的模式,交互走的是网络。

在这里插入图片描述

按照插件介绍说的,在 settings.json 中,增加下面两条配置即可:

在这里插入图片描述

注意:这里的 server 配置 URL,需要指定协议,直接启动就是 http,不然它会有一个警告。在预览左上角有一个红色的感叹号警告你。

再次尝试预览图片:

在这里插入图片描述

好了,现在你就可以愉快的在 VSCode 中享受编辑和预览的方便快捷了。不过这还是不够,因为通常我们并不是单独的一张图片,而是一整个文档中嵌入图片,所以接下来尝试让它在 markdown 文件中预览。

按照 markdown 插件

在这里插入图片描述

这里我使用这个 markdown 插件,因为它是支持渲染 plantuml 的,并且它的下载量比较高,社区活跃,开源社区随大流总不会有错的。
插件安装完成后,就可以使用了。先随便写一篇 markdown 文档,把刚才我们的图片绘制语句粘贴进去,然后点击预览。不过可惜呀,好事多磨,总是不能一次就成功,哈哈。不过,它做的还是蛮人性化的,至少给了错误提示,不至于让我们抓瞎。

在这里插入图片描述

按照它的错误提示,按部就班就可解决问题了,这里是需要我们配置服务器的地址。

在这里插入图片描述

注意:PlantUML 支持 png svg txt 这几种形式展示,不过这个插件似乎只支持 svg,其它两个测试它也是把结果当成 svg 来渲染,所以是不行的。

不过这个玩意似乎还是有问题,它居然把 plantuml 服务器的欢迎页给展示出来了,可是我要这个也没有用呀。

在这里插入图片描述

不过重启之后,它就正常了。看来以后修改了配置,VSCode 需要重启一下或者 Reload Window

在这里插入图片描述

说明

最后这一步的过程有点曲折,刚开始把它那个页面整出来了,我不知道哪里出现了问题(我甚至安装了一个 Fiddler 准备看一看,不过我其实也不确定能看出来什么,哈哈。)。在网上看了几个问题,并且看了官方的 issue,有一个类似的,但是仔细看和我这里的问题也不一样。没想到重启之后就好了,可能配置没有更新吧。如果是本地按照 PlantUML 的方式,可能就会好一点。不过我还是更喜欢 Docker 的方式了,用得时候启动一个镜像即可,不必再去配置复杂的环境了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/106312.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity中Shader不同灯光类型的支持与区分

文章目录 前言一、在开始之前做一些准备1、在上一篇文章的场景基础上,增加一个Unity默认的球体作为对照组2、创建一个点光源,用来看点光源的影响 对 Unity默认的Shader效果 和 我们实现的Shader效果 之间的不同 二、点光源的适配把上一篇文章中 ForwardB…

R语言的计量经济学实践技术应用

计量经济学通常使用较小样本,但这种区别日渐模糊,机器学习在经济学领域、特别是经济学与其它学科的交叉领域表现日益突出,R语言是用于统计建模的主流计算机语言,在本次培训中,我们将从实际应用出发,重点从数…

【arm实验2】按键中断事件控制实验

设置按键中断,按键1按下,LED亮,再次按下,灭 按键2按下,蜂鸣器叫,再次按下,停 按键3按下,风扇转,再次按下,停 主函数: linuxlinux:~/study/08-c$…

指定显卡运行python脚本

指定显卡运行python脚本 指定显卡运行python脚本 指定显卡运行python脚本 CUDA_VISIBLE_DEVICES0 python infer.py

electron打包后主进程下载文件崩溃

electronvue3写了一个小项目,实现了一个文件下载功能 存在的问题 打包后,应用下载文件崩溃代码 // 渲染进程window.electron.ipcRenderer.invoke(save-file, {path: r.filePath,fileurl: previewUrl,}).then(response > {console.log(response ----…

八皇后问题的解析与实现

问题描述 八皇后问题是一个古老而又著名的问题。 时间退回到1848年,国际西洋棋棋手马克斯贝瑟尔提出了这样的一个问题: 在88格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行、同一列或同一斜线上,问一共有多少种摆法。 如何找到这所有的…

【基础篇】四、本地部署Flink

文章目录 1、本地独立部署会话模式的Flink2、本地独立部署会话模式的Flink集群3、向Flink集群提交作业4、Standalone方式部署单作业模式5、Standalone方式部署应用模式的Flink Flink的常见三种部署方式: 独立部署(Standalone部署)基于K8S部署…

使用Tortoisegit界面拉起master主分支以副分支以及命令行操作

文章目录 1、Gui操作界面2、命令行操作3、合并分支到master分支上面 1、Gui操作界面 "小乌龟"通常指的是Git的图形用户界面(GUI)工具,其中比较常见的是TortoiseGit。下面是使用TortoiseGit来拉取(checkout)一…

数据结构(一)—— 数据结构简介

文章目录 一、基本概念和术语?1.1、数据1.2、数据元素1.3、数据项(属性、字段)1.4、数据对象1.5、数据结构 二、逻辑结构和物理结构(存储结构)2.1、逻辑结构1、定义2、分类(线性结构和非线性结构&#xff0…

Netty 入门 — 亘古不变的Hello World

这篇文章我们正式开始学习 Netty,在入门之前我们还是需要了解什么是 Netty。 什么是 Netty 为什么很多人都推崇 Java boy 去研究 Netty?Netty 这么高大上,它到底是何方神圣? 用官方的话说:Netty 是一款异步的、基于事…

四、K8S之Deployment

一、概述 在K8S中,Deployment是一种更高层级的控制器,用于管理应用程序的部署和更新。为 Pod和 ReplicaSet提供声明式的更新能力。比如: 部署ReplicaSet(副本集) 清理不再需要的旧版RS 扩展/缩小RS里的Pod数量 动态…

vue绑定style和class 对象写法

适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。 绑定 class 样式【对象写法】: .box{width: 100px;height: 100px; } .aqua{background-color: aqua; } .border{border: 20px solid red; } .radius{bor…

【动态库】Ubuntu 添加动态库的搜索路径

在运行程序时,经常遇到下面这种动态库加载失败的情况,这时往往是系统在动态库的搜索路径下没有找到对应的库文件导致的。 目录 一、使用 LD_LIBRARY_PATH 二、修改 /etc/ld.so.conf 一、使用 LD_LIBRARY_PATH 环境变量 LD_LIBRARY_PATH是动态库的搜索…

Jenkins集成newman

一、Docker环境准备 二、Jenkins环境准备 三、登录Jenkins 安装NodeJs插件 四、Jenkins全局工具配置Nodejs 五、创建Jenkins自由风格项目 构建步骤1:选择Execute NodeJS script构建步骤2:选择执行shell脚本 六、将postman相关的脚本、环境变量数据、全局…

AndroidX项目接入穿山甲广告填坑

本文旨在记录初步接入过程遇到的一点点小问题,更详细的文档还是要参考官方文档。 一、项目版本 GradlePlugin:8.0.2 Gradle:8.0 Kotlin:1.7.20 compileSdk:34 compose-bom:2022.10.00 AS:2022.2.1 …

Java反射调用jar包

反射作为托管语言的特性,很多框架都依赖反射来实现容器和面向接口编程,对架构程序很重要,首先试验Java的反射部分。 首先创建一个ZLZJar的工程,让他打包成jar包,代码如下 public class Test {//加两个整数public int…

ELK 日志分析系统介绍与部署

目录 一、ELK 简介: 1.开源工具介绍: 2.其它组件: 2.1 Filebeat: 2.2 Fluentd: 2.3 缓存/消息队列(redis、kafka、RabbitMQ等): 3. filebeat 结合 logstash 带来好处: 二、为什么要…

网络监控与故障排除:netstat命令的使用指南

文章目录 概述什么是 netstat 命令?netstat 命令的作用和功能netstat 命令的常见用途 安装和基本用法安装 netstat 命令netstat 命令的基本语法查看活动网络连接 查看网络接口信息查看所有网络接口信息查看指定网络接口信息网络接口状态说明 网络连接状态显示所有连…

[0xGameCTF 2023] web题解

文章目录 [Week 1]signinbaby_phphello_httprepo_leakping [Week 2]ez_sqli方法一&#xff08;十六进制绕过&#xff09;方法二&#xff08;字符串拼接&#xff09; ez_upload [Week 1] signin 打开题目&#xff0c;查看下js代码 在main.js里找到flag baby_php <?php /…

云安全——云计算基础

0x00 前言 学习云安全&#xff0c;那么必然要对云计算相关的内容进行学习和了解&#xff0c;所以云安全会分为两个部分来进行&#xff0c;首先是云计算先关的内容。 0x01 云计算 广泛传播 云计算最早大范围传播是2006年&#xff0c;8月&#xff0c;在圣何塞【1】举办的SES&a…