在VSCode中绘制流程图和思维导图

13次阅读

vscode中可借助插件直接创建可视化流程图或思维导图:一、Mermaid Preview支持.mmd文件实时渲染流程图;二、Plantuml插件配合Graphviz实现UML图表预览;三、Excalidraw插件在markdown中嵌入手绘式思维导图;四、Draw.io Integration插件支持.drawio格式专业思维导图编辑。

在VSCode中绘制流程图和思维导图

如果您希望在VSCode中直接创建可视化流程图或思维导图,而无需切换到外部工具,则需借助扩展插件与特定语法支持。以下是实现该目标的多种方法:

本文运行环境:macBook Air,macOS Sequoia。

一、使用Mermaid Preview扩展绘制流程图

Mermaid是一种基于文本的图表生成语言,VSCode通过安装Mermaid Preview插件可实时渲染流程图、时序图、类图等。该方法无需导出,编辑即见效果。

1、打开VSCode,点击左侧活动栏的扩展图标(或按快捷键Ctrl+Shift+X)。

2、在搜索框中输入Mermaid Preview,选择由bierner发布的官方插件并点击安装。

3、新建一个文件,保存为.mmd后缀(如diagram.mmd)。

4、输入Mermaid语法,例如:
“`mermaid
flowchart LR
A[开始] –> B{判断}
B –>|是| C[执行操作]
B –>|否| D[结束]
“`

5、右键编辑器空白处,选择Open Preview,右侧将即时显示渲染后的流程图。

二、通过PlantUML插件绘制结构化流程图

PlantUML提供更严格的UML建模能力,支持流程图、用例图、活动图等,适合需要标准化表达的场景。其依赖Graphviz本地渲染引擎。

1、在扩展市场中搜索并安装PlantUML插件(作者jebbs)。

2、前往Graphviz官网下载并安装Graphviz,安装完成后将dot命令路径加入系统环境变量

3、新建文件并保存为.puml后缀(如process.puml)。

4、输入PlantUML流程图代码,例如:
@startuml
start
if (条件满足?) then (是)
:执行任务;
else (否)
:跳过;
endif
stop
@enduml

5、按下Cmd+Alt+P(macos)调出命令面板,输入PlantUML: Preview Current Diagram并执行,弹出预览窗口。

三、利用Markdown + Excalidraw插件手绘式思维导图

Excalidraw是一款开源手绘风格白板工具,其VSCode插件支持在Markdown内嵌入可编辑的矢量草图,适用于自由布局的思维导图构建。

1、安装扩展Excalidraw(作者zhuowei)。

2、在任意Markdown文件中,将光标置于空行,输入```excalidraw并回车。

3、VSCode自动激活Excalidraw编辑器,此时可使用矩形、连接线、文字标签等工具绘制节点与关系。

4、绘制完成后点击左上角Save to file,图表将以.excalidraw格式保存并与当前Markdown关联。

5、在Markdown中再次输入```excalidraw区块,即可复用或继续编辑同一张图。

四、启用Draw.io Integration插件导入/编辑标准思维导图

Draw.io(现称diagrams.net)是专业级图表工具,其VSCode集成插件允许直接打开、编辑和保存.drawio文件,兼容主流思维导图结构。

1、安装扩展Draw.io Integration(作者hediet)。

2、新建文件,保存为mindmap.drawio

3、首次打开时,插件自动加载diagrams.net编辑界面;点击左侧形状库中的Mind Map类别,拖入中心主题与分支节点。

4、双击节点编辑文字,右键节点选择Add ChildAdd Sibling扩展层级。

5、完成编辑后按Cmd+S保存,文件以原生xml格式存储,支持跨平台打开。

text=ZqhQzanResources