vscode配置drawio绘制流程图

目录

vscode配置drwaio

drawio使用

添加元素 

调整元素 

连接元素 

添加公式

图像与表格

组合元素

保存以及导出


 

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

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

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

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

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

vscode配置drwaio

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

9726b6a5f4b4487c9de27843b972a0a6.png

完成后,进行重启。

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

77a51552abc648cf8d970696c26ad53b.png

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

41500ac7637045ffb2c097e42afdeb2e.png

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

drawio使用

添加元素 

62c44077899d4ee3b305d3cb5cbbad94.png

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

35ed76735a904bc591b39789c71249cf.png

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

调整元素 

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

5385cb21d00d4f00884d89e729e790e8.png

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

连接元素 

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

423417f401184128a1dfef04669aca41.png

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

添加公式

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

8738cef706bd45acbefe4e13198592c8.png

 3dc5b9450aaa402891bd126edef475f8.png

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

记得首尾添加$$。

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

5adc80a749e34cbf94186991ce2dfdd8.png

图像与表格

a7e695d47f874b14a072cccdf146f3f7.png

组合元素

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

2e64eaeb79ca43019dbdda5790585235.png

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

4d6f40091ab047558cc4a95d620a8ecc.png

然后如果有需要可以保存为一个模板,将其拖进便笺本即可,点击铅笔,就可以编辑你添加的模板了。 

3edfe74cf8d24fb9916512f33bccbf8f.png

保存以及导出

点击Ctrl+S,一定要有随时保存的习惯。

ab03861a88a4483bb1396e20a710db21.png

按照上图步骤,即可导出图片,记得选中后缀为.png格式的图片,导出的图片如下: 

2996512a8e8d428bbc56804c0d502511.png

非常nice。本次教程到此结束,希望你能有所收获,据说其他人用的是WPS,不知道效果怎么样,vscode配置是很简单的一种方式,当然你觉得lazy,网页版是最好的选择。 

2023/10/14 更新

ioDraw 免费在线画流程图、思维导图、甘特图

良工绘图-在线流程图制作软件-免费画流程图 (lghuitu.com)

 

### 如何在 VS Code 中集成或关联 Draw.io 为了实现 Visual Studio Code (VS Code) 和 Draw.io 的集成,可以采用以下方法: #### 方法一:通过插件扩展支持 VS Code 提供了一个名为 **"Draw.io Integration"** 的官方插件,该插件允许开发者直接在编辑器中创建、查看和修改 Draw.io 图表文件。安装此插件后,可以通过右键菜单打开 `.drawio` 文件或者新建图表文件。 具体操作如下: 1. 打开 VS Code 并进入 Extensions 市场。 2. 搜索关键词 `Draw.io` 或者直接查找插件名称 “Draw.io Integration”[^1]。 3. 安装完成后重启 VS Code。 4. 创建一个新的 `.drawio` 文件并双击打开它,此时会自动调用内置的 Draw.io 编辑器窗口。 #### 方法二:利用本地 HTML 应用程序模式 如果不想依赖第三方插件,则可以选择下载离线版 Draw.io 工具包,并将其配置到项目目录下作为静态资源加载。这样做的好处是可以完全控制数据存储位置而不必担心云端同步问题。 步骤描述如下: 1. 访问官方网站 https://app.diagrams.net/ 下载适用于桌面环境的 ZIP 版本软件。 2. 将解压后的文件夹放置于项目的公共资源路径之中(比如 `/public/diagrams-net`)。 3. 使用浏览器访问对应的 URL 地址即可启动独立运行的应用实例[^2]。 以下是设置脚本的一个简单例子来演示如何动态嵌入 iframe 显示绘图界面: ```javascript function loadDiagramEditor(containerId, filePath){ const container = document.getElementById(containerId); let url = '/public/diagrams-net/index.html'; if(filePath && typeof filePath === 'string'){ url += '?embed=' + encodeURIComponent(filePath); } var iframe = document.createElement('iframe'); iframe.src = url; iframe.style.width = '100%'; iframe.style.height = '80vh'; // 设置高度为视口的80% iframe.frameBorder = 0; while (container.firstChild) { container.removeChild(container.firstChild); } container.appendChild(iframe); } ``` 以上两种方式各有优劣,在实际应用过程中可以根据团队需求和个人偏好灵活选用适合自己的方案。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏天是冰红茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值