【工具】vscode的常用插件之画图插件

花神庙码农

已于 2025-02-27 09:57:45 修改

阅读量1.7k

点赞数 22

分类专栏： 6_____善假于物_____ 文章标签： vscode draw.io Graphviz Excalidraw tldraw Mermaid 画图

于 2025-01-21 08:30:00 首次发布

本文链接：https://blog.csdn.net/qxhgd/article/details/144694070

版权

6_____善假于物_____ 专栏收录该内容

40 篇文章

订阅专栏

🐚作者简介：花神庙码农（专注于Linux、WLAN、TCP/IP、Python等技术方向）
🐳博客主页：花神庙码农，地址：https://blog.csdn.net/qxhgd
🌐系列专栏：善假于物
📰如觉得博主文章写的不错或对你有所帮助的话，还望大家三连支持一下呀！！！ 👉关注✨、点赞👍、收藏📂、评论。
如需转载请参考转载须知！！

vscode的常用插件之画图插件

draw.io插件

简介

vscode-drawio 是一个非官方的 Visual Studio Code 扩展，它将 Draw.io（也称为 diagrams.net）集成到 VS Code 中。通过这个扩展，用户可以直接在 VS Code 中编辑 .drawio、.dio、.drawio.svg 或 .drawio.png 文件，而无需离开编辑器。这个扩展支持离线版本的 Draw.io，并且提供了多种主题和协作编辑功能。

安装

打开 Visual Studio Code。
点击左侧的扩展图标（或按 Ctrl+Shift+X）。
在搜索栏中输入 Draw.io Integration。
找到 Draw.io Integration 扩展并点击 Install 按钮进行安装。

在这里插入图片描述

Graphviz插件

简介

Graphviz 是一个开源的图形可视化工具集，用于创建和渲染图形图表、图形结构和网络图。它包括一组用于描述和绘制图形的开放源代码工具和库，最常用的是Graphviz DOT语言。结合当前ChatGPT，帮助我们快速编写DOT 代码，使其快速生成各种流程图，前提是你的文字流程描述要足够清晰。

安装

ctrl+shift+x 打开应用商城搜索输入“Graphviz”，找到【Graphviz Interactive Preview】，直接安装；

在这里插入图片描述

Excalidraw

简介

Excalidraw不仅是一款开源免费的虚拟白板，更是一个在线的实时协作白板工具。它为用户提供了一个直观且易于操作的界面，让用户能够轻松地创建出各种简单的图形和图示。这款工具的完全开源特性，使得任何人都能够自由地使用它，甚至可以根据个人需求进行定制和扩展。其在线地址为：https://excalidraw.com/。
此外，你还可以在VS Code上安装Excalidraw扩展，以便在编程环境中也能享受其带来的便捷。

安装

在VS Code的扩展市场中，使用“Excalidraw”作为搜索关键词，你就能轻松找到并安装这个扩展。安装完成后，你就可以在VS Code中直接使用Excalidraw的功能，实现编程与绘图的完美结合。
在这里插入图片描述

tldraw

简介

Tldraw 是一款非常出色的网页白板工具。此扩展程序能让你在 VS Code 中使用 Tldraw，且可使用离线的.tldr 文件。你可以创建绘图、图表或可视化文档，然后将这些文件与代码一同提交！

安装

打开 Visual Studio Code。
点击左侧的扩展图标（或按 Ctrl+Shift+X）。
在搜索栏中输入tldraw 。
找到 tldraw 扩展并点击 Install 按钮进行安装。

Mermaid流程图

简介

VSCode Markdown Mermaid 插件是一个为 Visual Studio Code 提供的扩展，它允许用户在 Markdown 预览中直接渲染 Mermaid 图表和流程图。Mermaid 是一个基于 JavaScript 的图表绘制工具，使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。

安装

打开 Visual Studio Code。
点击左侧的扩展图标（或按 Ctrl+Shift+X）。
在搜索栏中输入Markdown Preview Mermaid Support或Mermaid Editor均可。。
找到扩展并点击 Install 按钮进行安装。

在 Markdown 文件中，使用以下代码块来创建一个简单的 Mermaid 流程图：

使用方法

在 Markdown 文件中输入下述代码块：

```mermaid
graph TB
    A(接口请求) --> B[参数校验]
    B[参数校验] --> C{校验通过?}
    C{校验通过?} -- 通过 --> d[处理业务逻辑]
    C{校验不通过} -- 不通过 --> e[结束]
    d[处理业务逻辑] --> e(结束)