在vscode中使用Markdown写文档，uml画图或者graphviz画图，实现markdown预览

最新推荐文章于 2025-10-20 04:48:32 发布

原创最新推荐文章于 2025-10-20 04:48:32 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #uml #ide

本文详细介绍了如何在VSCode中使用Markdown编写文档，结合PlantUML进行UML图和思维导图绘制，并提供不同方式配置PlantUMLServer，包括本地jar包、Docker容器和自定义服务器，以及使用Graphviz创建时序图。

在vscode中使用Markdown写文档，uml画图或者graphviz画图，实现markdown预览

官网文档

https://plantuml.com/zh/

PC安装vscode

安装插件：Markdown All in One、Markdown Preview Enhanced、Graphviz Preview、PlantUML

配置umlserver

推荐使用本地jar包的方式

使用官网server

这种方式会出现卡顿的情况。

ctrl+,打开设置
找到Markdown-preview-enhanced: Plantuml Server 设置为http://www.plantuml.com/plantuml/
找到Plantuml: Render，设置为PlantUMLServer

使用自建server

https://github.com/plantuml/plantuml-server
比较复杂，会出现配置不成功

安装Docker Desktop
cmd运行命令docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
ctrl+,打开设置
找到Markdown-preview-enhanced: Plantuml Server 设置为http://localhost:8080/
找到Plantuml: Render，设置为PlantUMLServer

使用本地plantuml.jar包

plantuml.jar包下载，下载的jar包为plantuml-1.2023.11.jar

https://plantuml.com/zh/download

ctrl+,打开设置
找到Markdown-preview-enhanced: Plantuml Server 设置为空
找到Plantuml: Render，设置为Local
找到Markdown-preview-enhanced: Plantuml Jar Path，设置为D:\software\plantuml-1.2023.11.jar

使用Graphviz

digraph first2{
a;
b;
c;
d;
a->b;
b->d;
c->d;
}

思维导图

@startmindmap
* root node
 * some first level node
  * second level node
  * another second level node
 * another first level node
@endmindmap

时序图

@startuml
autonumber
actor "用户"  as User
participant "浏览器" as Browser
participant "服务器" as Server #orange
activate User
User -> Browser: 输入URL
activate Browser
Browser -> Server: 请求服务器
activate Server
Server -> Server: 模板渲染
note right of Server: 服务器渲染引擎工作
Server -> Browser: 返回HTML
deactivate Server
Browser --> User
@enduml