打造你的VS Code(支持Markdown/UML/思维导图)


Visual Studio Code是一个文本编辑器，除了写代码和编辑普通文本外，借助插件还可以实现一些常用的图形化功能。下面介绍下，在 VS Code 中支持以下几种常用的功能：

  1. Markdown
  2. 思维导图
  3. UML

Markdown

Markdown 是一种轻量级的文本标记语言，使用简单符号即可编辑出带有丰富格式的内容，让编辑者专注于内容本身，而不用花费太多额外精力去调整文本格式。CSDN、简书、Github等网站都支持 Markdown 格式。语法参考

要在 VS Code 中支持 Markdown 格式，推荐安装以下插件：

  • Markdown All in One

文件后缀名保存为.md，会自动预览，也可以用快捷键 ctrl+shift + v 显示预览。

以下内容是在网上找的一篇讲 Markdown 格式的示例文档，文档本身用也的 Markdown 格式，在 VS Code 中的显示效果如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

为了更好的支持 Markdown 格式，另外推荐两个选装插件：

  • Markdownlint Markdown 语法格式检测和语法错误提示及修复建议
  • Markdown Preview Enhanced 显示功能增强

本文也是用 VS Code 书写

思维导图

思维导图又叫脑图，是一种图形化思维的工具。百度脑图相信很多人都用过，推荐以下插件，在 VS Code 中画思维导图，体验跟百度脑图一样，这个插件叫：

  • vscode-mindmap

文件后缀名以保存为.km，会自动显示，也可以用快捷键ctrl/cmd + m显示。跟 Markdown 不一样，思维导图的编辑，是在图形化的界面中，不需要写文本。下面是我用这个插件整理的算法与数据结构的知识点，也分享出来：

在这里插入图片描述
可以切换各种不同的显示样式：
在这里插入图片描述
也可以选择不同的配色：
在这里插入图片描述
缺点是不会自动报错，按快捷键 ctrl/cmd+s保存。

UML

UML 即 统一建模语言，是一种面向对象分析和设计的建模工具，广泛使用的有时序图和类图。利用插件，也可以在 VS Code 中画 UML 图。PlanUML是一个开源的 UML 图绘制库，可以使用文本描述，绘制出对应的 UML 图，非常适合程序员使用。在 VS Code 中支持 PlantUML，需要安装插件：

  • PlantUML

同时，还必须安装：

  • Java 环境(下载地址)。
  • Graphviz-Dot

将文件名以 *.pu, *.puml后缀结尾，即可使用PlantUML 语法画图，使用快捷键 Alt+D 编译预览。

下面是一个简单的时序图示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
@startuml test
== build ==
Main -> Builder: createEntity()
Builder -> EntityFactory: create()
EntityFactory -> Entity: constructor()
== run ==
Main -> Main: update()
Main -> Entity: update()
Entity -> Entity: render()
Entity -> Entity: emitEvent(EVENT_RENDER)
Entity --> Main: onRender()

@enduml

在这里插入图片描述
下面是一个类图的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@startuml test

Class ClassA {
    -- 属性 --
    +String publicAttr
    #int protectedAttr
    -long privateAttr
    .. 其他格式 ..
    +A: String
    #B: Number
    -C: Boolean
    == 方法 ==
    +getAttr()
    #setAttr()
    -readAttr()
}

note top: 在顶部注释说明

Class ClassB {

}

note right: 在右边注释说明

ClassA <-- ClassB:关联
ClassA <.. ClassB : 依赖
ClassA o-- ClassB:聚集
ClassA <|-- ClassB:泛化
ClassA <|.. ClassB:实现
@enduml

在这里插入图片描述

小结

VS Code 本身只是一个文本编辑工具，通过丰富的插件拓展了很多实用的功能，支持了 Markdwon、思维导图和UML图，基本上能满足日常所需的全部功能。