VS Code画流程图:draw.io插件

文章目录

简介

Draw.io是著名的流程图绘制软件,开源免费,对标Visio,用过的都说好。而且除了提供常规的桌面软件之外,直接访问draw.io就可以在线使用,堪称百分之百跨平台,便捷性直接拉满。

那么连网页版都做的这么好了,自然也提供了相应的VS Code插件,这也是开源带来的好处,只要有需求就有人实现。

在插件栏搜索draw.io下载量最多的插件是稳定版Draw.io,绿色的是非稳定版,这里选择稳定版进行安装。

安装成功后,按下Ctrl+Shift+P调出命令框,输入draw.io,就会弹出相应的指令,选择New Draw.io Diagram,就会创建新的流程图,并弹出程序界面。作为插件的Draw.io,会沿用与VS Code主题相同的配色风格,从实际体验来看,深色主题效果并不太好,建议在打开Draw.io之前,先将VS Code的主题换成浅色。此外点击文件->页面设置->背景,可以更改背景颜色,其界面如图所示

快捷键

draw.io的界面布局简洁直接,左侧是图形列表,可以直接拖动到画布中,右侧是部件属性,属于看了就会用的那种。而且在具体使用过程中,还会提供指示性的动画,比如创建一个矩形之后,鼠标浮动在矩形上方,就会在四周出现箭头,点击箭头即表示连接,这些提示可以让流程图的制作更加规范。

此外,Draw.io还提供了一些贴心的快捷方式。比如,双击鼠标,会弹出常用的图形。

但是,作为插件的Draw.io,部分快捷键会与VS Code存在冲突,下面列出一些亲测可用的快捷键,其中Ⓒ表示Ctrl键,Ⓐ表示Alt键,Ⓢ表示Shift键,❌表示存在冲突。

快捷键 说明 快捷键 说明
Ⓒ + x/c/v 剪切/复制/粘贴 Ⓒ +u/b/i 文字下划线/加粗/斜体
ⒸⓈ + c/v 复制样式/粘贴样式 ⒶⓈ+ x/v 复印尺寸/粘贴尺寸
Ⓒ + z/y 撤消/恢复 Ⓒ +A 全选
Ⓒ + s 保存 ⒸⓈ + s 另存为
Ⓒ + g 组合 ⒸⓈ + u 取消组合
ⒸⓈ + L 切换或弹出图层窗口 ⒶⓈ+L 编辑链接
ⒸⓈ + o 切换缩略图窗口
Ⓒ + P 打印❌ ⒸⓈ + p P切换格式窗格❌
ⒸⓈ + M 编辑顶点的大小、位置数据
Ⓒ + L 锁定或解锁
ctrl + J 适合页面,大概是100% ⒸⓈ + J 大概50%
ⒸⓈ + Y 自动调整图形尺寸
ⒸⓈ + B 重叠时移动到后面 ⒸⓈ + F 重叠时移到最前面
home 回到视图中心位置 ⒸⓈ + H 当前图形占满窗口
Ⓒ + K 编辑标签 Ⓒ + E 编辑风格
Ⓒ + M 弹出属性输入框
ⒸⓈ + K 展开或收起图形栏
ⒸⓈ + D 设为默认样式 ⒸⓈ + R 清除默认样式

鼠标相关快捷操作

快捷键 说明 快捷键 说明
Ⓒ+拖动 复制单元格 Ⓢ+拖动 水平或垂直方向移动单元格
右键拖动 移动画布 右键点击 上下文菜单
滚轮 画布垂直滚动 Ⓢ+滚轮 画布水平滚动
ⒸⓈ滚轮 画布放大缩小 Ⓐ+滚轮 界面放大和缩小
相关推荐
lypzcgf1 天前
Coze源码分析-资源库-编辑插件-后端源码-安全与错误处理
安全·插件·coze·coze源码分析·智能体平台·ai应用平台·agent平台
努力还债的学术吗喽2 天前
pycharm找不到Tencent Cloud CodeBuddy如何安装[windows]?pycharm插件市场找不到插件如何安装?
ide·windows·pycharm·插件·plugin·codebuddy
l1t2 天前
编译Duckdb机器学习插件QuackML
数据库·c++·人工智能·机器学习·插件·duckdb
夜郎king2 天前
Drawio 在软件开发中的应用实践
draw.io·drawio实践·drawio助力软件开发·drawio自定义出图
l1t2 天前
DuckDB 的postgresql插件无法访问GooseDB
数据库·postgresql·插件·duckdb
lypzcgf2 天前
Coze源码分析-资源库-编辑插件-后端源码-核心技术与总结
系统架构·插件·coze·coze源码分析·智能体平台·ai应用平台·agent平台
lypzcgf3 天前
Coze源码分析-资源库-编辑插件-后端源码-IDL/API/应用服务层
系统架构·插件·coze·coze源码分析·智能体平台·ai应用平台·agent平台
aesthetician7 天前
ReactFlow:构建交互式节点流程图的完全指南
前端·流程图·react
l1t8 天前
测试duckdb的C插件模板的编译加工和加载
c语言·开发语言·数据库·插件·duckdb
fish-man9 天前
测试流程图展示问题
linux·服务器·流程图