目录

vscode配置drwaio

drawio使用

添加元素

调整元素

连接元素

添加公式

图像与表格

组合元素

保存以及导出


最近课程设计需要画流程框图,所以在网上找找绘制流程图的软件。然后我选择了这个drawio,无他,只是因为用vscode插件就能使用。

还有很多其他方法,比如GitHub上下载:Github桌面下载。

无需安装,网页使用:drawio网页使用

本篇主要是介绍一下用vscode插件来使用drawio,并且做一些基础操作的教程,满足大多数人的需求。

关于vscode的下载:vscode下载地址,一路通过即可

vscode配置drwaio

打开vscode,点击拓展,收索drawio,点击安装即可:

完成后,进行重启。

接下来新建一个文件,随意命名,但后缀一定为.drawio。

点击Enter键后,弹出文件保存的窗口,自行保存即可。

更改了一下颜色主题,浅色的更容易展示。

drawio使用

添加元素

还有一个比较使用的技巧,就是双击界面,就会出现这样的图标:

常用的框图和文本就在这里,非常的实用。

调整元素

有的时候手动调整效果并不好,点击Ctrl键即可多目标选中对象,点击导航栏中的调整图像。

常用的还是对齐和等距分布。

连接元素

鼠标移向框图边缘,会出现四个方向的蓝色箭头,选择你想要画的箭头位置,出现绿色圆点后,按住左键不放即可画出箭头。

总共有十六个方向可以画出箭头。连接后点击线条,即可在右侧对其进行线条的调整。

添加公式

采用的是LaTeX格式,也就是常常写博客添加数学公式的方式,我自己也不是很了解,只是知道一些常用的,你可以在CSDN的富文本编辑器中使用。

我们把LaTeX内容复制过来即可。

记得首尾添加$$。

$$ y(t)=\int_{-\infty}^{t}x(\tau )d\tau $$

图像与表格

组合元素

全部选中之后,右键选中组合即可,快捷键是Ctrl+G。

这个是效果图,让我感觉特别像卷积层(

vscode配置drawio绘制流程图相关推荐

  1. VSCode来绘制流程图真是得心应手

    场景 在分析某业务时常常需要绘制流程图等一些图.通常会使用一些专门的绘图软件比如Viso.亿图图示. 但是如果只是想简单的绘制一下流程或者其他图.又或者不想打开其他IDE,如果能在开发的同时也能 实现 ...

  2. drawio@绘制带有latex公式的图表@示意图@流程图@白板模式whiteboard

    文章目录 drawio@绘制带有latex公式的图表@示意图@流程图@白板模式whiteboard 使用drawio 小结 公式编辑@Use mathematical typesetting in d ...

  3. 玩转vscode支持PlantUML绘制预览流程图

    软件设计中,有好几种图需要画,比如流程图.类图.组件图等,我知道大部分人画流程图一般都会用微软的viso绘制,我之前也是这个习惯. viso画图有个不好的地方是需要时刻去调整线条和边框已达到简洁美观, ...

  4. java.awt.Graphics2D绘制流程图基本元素

    java.lang.Object ----java.awt.Graphics ----java.awt.Graphics2D 由于项目需要,要求对用户流程进行图形化展示:用户对自己的操作通过查看流程图 ...

  5. VSCode配置PyQt5和designer

    VSCode配置PyQt5和designer 参见python界面编程:VScode+pyqt+pyqt integration配置备忘 参见PyQt5(designer)入门教程 1.安装pyqt ...

  6. 流程图的制作技巧分享,手把手教你如何绘制流程图

    什么是流程图?流程图是思维导图的一种表现形式,是用来表示算法思路的一种方法.一般应用于在汇编语言和BASIC 语言环境中. 一.绘制流程图的功能 流程图是以特定的符号加上文字说明组合而成的图,是流经一 ...

  7. PlantUML(程序员绘制流程图专用工具)

    原文地址为: PlantUML(程序员绘制流程图专用工具) 什么是 PlantUML PlantUML 是一个画图脚本语言,用它可以快速地画出: 时序图 流程图 用例图 状态图 组件图 简单地讲,我们 ...

  8. java绘制流程图基本元素,java绘制图片

    由于项目需要,要求对用户流程进行图形化展示:用户对自己的操作通过查看流程图一目了然.于是进行了一下前期的Java绘图探索,通过java.awt.Graphics2D对绘制流程图的基本元素进行了编码,并 ...

  9. vscode配置vue3+python开发环境

    vscode配置vue3+python开发环境 说明 推荐使用vscodium,没有用户追踪,下载VSCodium-win32-x64.zip,设置采用微软官方扩展源就是vscode了,设置方法如下 ...

最新文章

  1. 《复联4》的这波操作,其实是在灭 bug
  2. java保留两位小数
  3. noip搜索模拟题 骰子
  4. PHP中没用的验证码
  5. np.random.randint产生一个范围内的数据
  6. 独占线程太多怎么办_电脑内存被占用太多怎么办?
  7. 当云原生遇到混合云:如何实现“求变”与“求稳”的平衡
  8. access vba 用recordset读取表中数据的简单方法
  9. 【设计鉴赏】张艺谋《影》震撼人心的海报设计
  10. web批量打印pdf
  11. android手机设置固定dns,安卓手机修改WiFi DNS设置的方法
  12. vue表格根据属性值设置背景颜色、vue表格设置鼠标悬浮背景颜色、vue表格的隔行变色修改背景颜色
  13. 这两天火爆全网的「蚂蚁呀嘿」App,被下架了...
  14. Cocos2d-x 3.x游戏开发之旅
  15. ImportError: No module named datetime全局python解决time显示问题
  16. Win10下如何找到下载的主题壁纸,并提取图片
  17. 简单 html 分页标签
  18. Maven(自动化构建工具)
  19. 物联卡是什么?有什么用?可以用在什么设备上?
  20. android自定义view 模仿win10进度条

热门文章

  1. 在Windows XP 上 架设 FTP服务器
  2. 云付通过银联认证了吗_查询pos设备是否通过银联安全认证的方法
  3. Lvgl8 状态栏显示图标(增加/删除)
  4. 运维批量管理工具-clustershell
  5. CORS了解与VUE跨域解决
  6. autojs找字_AutoJS介绍
  7. 【Python黑科技】tkinter库实战“俄罗斯方块”小游戏(保姆级图文+实现代码)
  8. c++实现冬奥会奖牌榜排序
  9. 数据治理-数据生命周期管理-大数据采集
  10. 五个创新模板之一,减法创新