推荐几个 VSCode 流程图工具

news2024/11/24 2:51:22

Visual Studio Code(简称VSCode)是一个由微软开发的免费、开源的代码编辑器。

VSCode 发布于 2015 年,而且很快就成为开发者社区中广受欢迎的开发工具。

VSCode 可用于 Windows、macOS 和 Linux 等操作系统。

VSCode 拥有一个庞大的扩展市场,用户可以根据自己的需要安装各种扩展来增强编辑器的功能,包括语言支持、代码格式化工具、版本控制集成、主题和图标等。

我们可以在 VSCode 上轻松查找并安装扩展


10009dac733942fab43fd410b576f0ce.png

接下来我们看下平时开发常用的一些流程图工具:

1、Draw.io Integration

Draw.io,现更名为 diagrams.net,是一款开源且免费的在线绘图工具。它非常流行,适用于创建各种类型的图表和图示,例如流程图、网络拓扑图、UML 图、组织结构图、ER 图(实体关系图)等。

Draw.io 的界面简单直观,功能强大,适合个人用户、开发者、设计师、项目经理等使用。它可以在线访问,也可以通过桌面应用离线使用。

在线地址:https://app.diagrams.net/


0c1e048bbd234d21b3b828008f52330f.gif

Draw.io Integration 扩展是一个将 Draw.io 图表工具集成到 Visual Studio Code 编辑器中的扩展。

Draw.io Integration 扩展适合非常适合我们开发人员,可以帮助我们更加高效地进行流程图、网络拓扑图、UML、数据库设计等可视化工作。

扩展搜索关键词:Draw.io


e6fa2d6b83c242d689b860531a48a1fd.png

 插件链接地址:https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

bc48f073f083492b9d5656e1a204532d.png

该插件使用起来也很简单,插件一个后缀名为 .drawio.png 文件就可以开始编辑了,如下图所示:


f0dc5a992ef94ccba56aab055687c2a5.gif

2、Excalidraw

Excalidraw 是一款开源免费的虚拟白板,提供一个在线的实时协作白板工具,使用户能够创建简单的图形和图示。

Excalidraw 是完全开源的,任何人都可以自由地使用它,甚至可以根据自己的需求进行修改和扩展。

在线地址:https://excalidraw.com/


5d3f965099e34a10a7c4d4c5c273fa06.png

VS Code 上也可以安装 Excalidraw 扩展来使用:

扩展搜索关键词:Excalidraw


312291a1483342c28b9afb13be137e45.png

 插件链接地址:https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor

23e682400c1c402abea4710bac038792.png

 使用这个扩展只需要创建一个带有 .excalidraw、.excalidraw.json、.excalidraw.svg 或 .excalidraw.png 后缀名的空文件,然后在 Visual Studio Code 中打开它就可以了:

3b2e2b8c6c0d47c49c42b27a2074b9a5.gif

3、tldraw

tldraw 是一款开源免费的无限画布白板,可以在线的实时协作,用户可以轻松地在线创建简洁明了的图形和图示,使得思维的表达变得更加直观和高效。


3cd2caa259ac4153b967533cae7b42fd.png

VS Code 上也可以安装 tldraw 扩展来使用:

扩展搜索关键词:tldraw


2791faf9e14c4968b8cc029c76804720.png

 插件链接地址:https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode

27f4d87d58284750b6fc17a8803d4c4d.png

创建新 tldraw 文件,请使用提供的命令:“tldraw: New Project”。

要查看现有的 tldraw 文件,可以在 VS Code 中打开带有 .tldr 扩展名的文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2246387.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

解决 VMware 嵌套虚拟化提示 关闭“侧通道缓解“

最近给电脑做了新版的 Windows 11 LTSC操作系统,在启动VMware Workstation时,提示"此虚拟机已启用侧通道缓解,可增强安全性,但也会降低性能",但是我没有启用 Hyper-V 相关的任何功能以及 WSL, 从…

Flume日志采集系统的部署,实现flume负载均衡,flume故障恢复

目录 安装包 flume的部署 负载均衡测试 故障恢复 安装包 在这里给大家准备好了flume的安装包 通过网盘分享的文件:apache-flume-1.9.0-bin.tar.gz 链接: https://pan.baidu.com/s/1DXMA4PxdDtUQeMB4J62xoQ 提取码: euz7 --来自百度网盘超级会员v4的分享 ----…

P2TR(Taproot 交易)和Musig2

目录 P2TR(Taproot 交易)和Musig2 P2TR(Taproot 交易) Musig2 总结 P2TR(Taproot 交易)和Musig2 都是比特币和区块链技术中的先进功能,它们各自具有独特的特点和应用场景。以下是两者的区别及举例说明: P2TR(Taproot 交易) 定义: P2TR是一种比特币交易类型,旨…

Web 入门

HTTP 一、概念 Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器和服务器之间数据传输的规则。 二、特点 基于TCP协议:面向连接,安全。基于请求-响应模型的:一次请求对应一次响应。HTTP协议是无状态的协…

Docker+Nginx | Docker(Nginx) + Docker(fastapi)反向代理

在DockerHub搜 nginx,第一个就是官方镜像库,这里使用1.27.2版本演示 1.下载镜像 docker pull nginx:1.27.2 2.测试运行 docker run --name nginx -p 9090:80 -d nginx:1.27.2 这里绑定了宿主机的9090端口,只要访问宿主机的9090端口&#…

Postman之变量操作

系列文章目录 1.Postman之安装及汉化基本使用介绍 2.Postman之变量操作 3.Postman之数据提取 4.Postman之pm.test断言操作 5.Postman之newman Postman之变量操作 1.pm.globals全局变量2.pm.environment环境变量3.pm.collectionVariables集合变量4.pm.variables5.提取数据-设置变…

鸿蒙动画开发08——帧动画

1、概 述 帧动画通过应用onFrame逐帧回调的方式,让开发者在应用侧的每一帧都可以设置属性值,从而实现设置了该属性值对应组件的动画效果。 相比于属性动画,开发者可感知动画的过程,实时修改UI侧的值,具有事件可实时响…

《Python基础》之字符串格式化输出

目录 方式一 1、带索引 {0} 2、不带索引 { } 3、{自定义变量} 方式二 方式三 控制浮点数精度 方式一 使用.format( )进行格式化 1、带索引 {0} name boy age 18 high 183.55555 gender man print(姓名是:{0},年龄是:{1},身高是:{2},性别是:{3},身高是…

OpenCV相机标定与3D重建(3)校正鱼眼镜头畸变的函数calibrate()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::fisheye::calibrate 函数是 OpenCV 中用于校正鱼眼镜头畸变的一个重要函数。该函数通过一系列棋盘格标定板的图像来计算相机的内参矩阵和畸变…

Redis五大基本类型——Set集合命令详解(命令用法详解+思维导图详解)

目录 一、Set集合类型介绍 二、常见命令 1、SADD 2、SMEMBERS 3、SISMEMBER 4、SCARD 5、SRANDMEMBER 6、SPOP 7、SMOVE 8、SREM ​编辑 9、集合间操作 (1)SINTER (2)SINTERSTORE (3)SUNION…

CCE-基础

背景: 虚拟化产生解决物理机资源浪费问题,云计算出现实现虚拟化资源调度和管理,容器出现继续压榨虚拟化技术产生的资源浪费,用命名空间隔离(namespace) 灰度升级(升级中不影响业务&#xff09…

Chrome离线安装包下载

1、问Chrome的官网:https://www.google.cn/chrome/ 直接下载的是在线安装包,安装需要联网。 2、如果需要在无法联网的设备上安装Chrome,需要在上面的地址后面加上?standalone1。 Chrome离线安装包下载地址:https://www.google.c…

二进制 分析工具:Radare2、r2frida、Binutils、file、string、as、nm、ldd、objdump、readelf、strip

1、二进制 分析工具 工欲善其事,必先利其器,在二进制安全的学习中,​使用工具尤为重要。遇到一个不熟悉的文件时, 首先要确定 "这是什么类型的文件",回答这个问题的首要原则是,绝不要根据文件的扩…

快速图像识别:落叶植物叶片分类

1.背景意义 研究背景与意义 随着全球生态环境的变化,植物的多样性及其在生态系统中的重要性日益受到关注。植物叶片的分类不仅是植物学研究的基础,也是生态监测、农业管理和生物多样性保护的重要环节。传统的植物分类方法依赖于人工观察和专家知识&…

Chrome 浏览器 131 版本新特性

Chrome 浏览器 131 版本新特性 一、Chrome 浏览器 131 版本更新 1. 在 iOS 上使用 Google Lens 搜索 自 Chrome 126 版本以来,用户可以通过 Google Lens 搜索屏幕上看到的任何图片或文字。 要使用此功能,请访问网站,并点击聚焦时出现在地…

Windows系统编程 - 注册表

文章目录 前言注册表介绍打开和关闭注册表RegOpenKeyExRegCloseKey测试案例 创建删除子键RegCreateKeyEx创建子键RegDeleteKey删除子键 写入删除键值RegQueryValueExRegSetValueExRegDeleteValue测试案例 子键和项的枚举RegEnumKeyExRegEnumValueRegQueryInfoKey测试案例 总结 …

Jenkins + gitee 自动触发项目拉取部署(Webhook配置)

目录 前言 Generic Webhook Trigger 插件 下载插件 ​编辑 配置WebHook 生成tocken 总结 前言 前文简单介绍了Jenkins环境搭建,本文主要来介绍一下如何使用 WebHook 触发自动拉取构建项目; Generic Webhook Trigger 插件 实现代码推送后,触…

Failed to start Docker Application Container Engine

说明: 1)访问应用业务,读取不到数据,show databases;查看数据库报错 2)重启docker服务,服务启动失败,查看日志报错如下图所示 3)报错信息:chmod /data/docker: read-only…

1、HCIP之RSTP协议与STP相关安全配置

目录 RSTP—快速生成树协议 STP STP的缺点: STP的选举(Listening状态中): RSTP P/A(提议/同意)机制 同步机制: 边缘端口的配置: RSTP的端口角色划分: ensp模拟…

Kafka 生产者优化与数据处理经验

Kafka:分布式消息系统的核心原理与安装部署-CSDN博客 自定义 Kafka 脚本 kf-use.sh 的解析与功能与应用示例-CSDN博客 Kafka 生产者全面解析:从基础原理到高级实践-CSDN博客 Kafka 生产者优化与数据处理经验-CSDN博客 Kafka 工作流程解析&#xff1a…