Mac 版 VSCode + PlantUML+uPic + Gitee搭建图床

Mac 版 VSCode + PlantUML+uPic + Gitee搭建图床

使用 VSCode + PlantUml 画图时，需要将PlantUML的语法转换成图片，上传到图床后，再插入到对应的Markdown文档中，这样可以在未安装PlantUML的机器上查看对应的Markdown文档。

1 使用的软件

VSCode: 是一款现代 Web 和云应用的跨平台源代码编辑器。强大的插件市场可以让你完全自定义你的专属编辑器。

uPic: 一款 Mac图床(文件)上传客户端，它可以将图片、各种文件上传到配置好的指定对象存储中，然后即时生成可供互联网访问的文件URL。支持图床： smms、 又拍云 USS、七牛云 KODO、 阿里云 OSS、 腾讯云 COS、微博、Github、 Gitee、 Amazon S3、自定义上传接口。无论是本地文件、或者屏幕截图都可自动上传，菜单栏显示实时上传进度。上传完成后文件链接自动复制到剪切板，让你无论是在写博客、灌水聊天都能快速插入图片。

PlantUML: 支持快速绘制时序图、用例图、类图、对象图、活动图、组件图、部署图、状态图，定时图等。

2 创建 Gitee 图床仓库

2.1 创建账号

打开码云Gitee，注册账号。

2.2 创建仓库

2.3 创建Token

点击 设置，选择 私人令牌。

点击 生成新令牌

输入 私人令牌描述，方便日后查找，然后提交。

提交后，将会创建新私人令牌，需把令牌及时复制保存起来，接下来将会用到，关闭窗口后，将不再可见，若丢失，需重新生成。

3 配置uPic

3.1 下载安装

安装方式：

1. 通过 Homebrew（官方推荐）

   brew install --cask upic
   

2. 从 github下载安装

   下载地址：Releases · gee1k/uPic (github.com)

3. 从 gitee 下载安装

   下载地址：uPic 发行版 - Gitee.com

3.2 配置

打开 uPic的偏好设置，选择 图床 选项，添加 Gitee的配置。最后点击 验证，若配置正确，图床仓库对应分支的保存路径内将会有uPic 上传的测试图片。

用户名：Gitee的账号名。

仓库名：上面 [2.2 创建仓库](#2.2 创建仓库) 创建的仓库名称。

分 支：图片上传到的分支名称。

Token ：上面创建的 Gitee的私人令牌。

保存路径：图片上传到仓库后的路径，若仓库无此目录，uPic上传时会创建对应目录。

4 配置 VSCode

4.1 配置 PlantUML

4.1.1 安装 PlantUML

1. 通过VSCode 安装 PlantUML 插件；
2. 安装PlantUML的依赖软件 jdk及渲染引擎graphviz。

注意： 使用时可能会报找不到 /opt/local/bin/dot 文件的错误，需要做一个软链接。

# 若没有此目录，则需先创建
sudo mkdir -p /opt/local/bin
# 建立文件链接
sudo ln -s /opt/homebrew/Cellar/graphviz/2.48.0/bin/dot /opt/local/bin/dot

4.1.2 编写 uml，生成图片

4.2 配置 uPic

4.2.1 安装 uPic 插件

4.2.2 上传图片

在VSCode中选择图片，然后右键弹出菜单，点击 “Upload via uPic & Copy Urls”。上传完成后，图片链接即可以粘贴到文档中。

5 配置Typora

Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术，它删除了预览窗口，模式切换器，markdown源代码的语法符号以及所有其他不必要的干扰，以帮助您专注于内容本身。

5.1 下载安装

官网地址： Typora — a markdown editor, markdown reader.

5.2 配置图床

打开 Typora 的偏好设置，点击图像，按以下红框所示进行配置即可。配置好之后，只要将图片复制到文档中，即会自动上传到对应图床，并生成Markdown方式链接到文档中，非常之方便。