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

在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