vscode下也可以愉快的编辑流程图了

最新推荐文章于 2024-05-15 01:19:41 发布
最新推荐文章于 2024-05-15 01:19:41 发布
阅读量334 收藏
点赞数
文章标签： vscode uml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pocean2012/article/details/120449614
版权

首先安装draw.io桌面版

Release 15.2.7 · jgraph/drawio-desktop · GitHub

比较舒服的是跨平台版本都有了，开心

桌面版安装完，就可以编辑自己的流程图了

 

界面小清新，比visio要轻量化，好用，灵活。

输出文件格式可以是html和svg图片，有点小遗憾的是html其实也是编码后的图片，只能当图片用，不能嵌入到前端应用里。

vscode可以安装draw.io插件，从而在VS里直接打开编辑draw.io文件，还是挺给力的，居然还有rtl组件库，可以编辑门电路了，强大。

然后，打开other shapes，还有一堆的组件库，电气符号，流体力学，各种图标，真是不要多强大，画各种网络拓扑图之类的爽！几乎囊括了流程图所需的一切，扩展之后比在draw.io里还要爽。。。。

海里的鱼2022
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vscode-luna-paint：VS Code的光栅图像编辑器扩展
02-05
vscode-luna-paint：VS Code的光栅图像编辑器扩展
svgeditor:svg编辑器的VSCode扩展:hugging_face:
05-06
SVG编辑器 版本2.9 ：仅纠正更改的部分而不进行自动格式化 现在，您的VSCode可以转变为交互式的可视化和文字SVG编辑器 :smiling_face_with_sunglasses: 您可以使用SVG编码器来创建形状，也可以使用整形工具直接创建形状。 指令 命令 标题 svgeditor.openSvgEditor 打开SVG编辑器 svgeditor.newSvgEditor 使用SVG编辑器的新文件 svgeditor.reopenRelatedTextEditor 重新打开与当前SVG编辑器相关的文本编辑器 配置 名称 描述 默认 svgeditor.filenameExtension 新的无标题文件的初始文件扩展名。 svg svgeditor.width 新的无标题文件的初始宽度。 400像素 svgeditor.height 新的无标题文件的初始高度。 400像素 svgeditor.defaultUn
VScode设置编辑器背景图片
欢欢的博客
06-29 806
最近在知乎上看见有人设置了vscode编辑器的背景图片，觉得很新鲜，就尝试以一下，倒是成功了。 1.首先在vscode扩展中，找到background这个插件，快捷键Ctrl+shift+x 2.完成第一步就已经有默认背景了，可是想设置自己喜欢的怎么办？往下看 打开 文件>首选项>设置 在右侧设置里 "background.enabled": true, "background.useDefault": false, "background.custom.
论文排版神器VSCode+LaTeX最新保姆级图文配置教程_vscode latex(1)
最新发布
2301_79099287的博客
05-15 1596
阿里伤透我心，疯狂复习刷题，终于喜提offer 哈哈~好啦，不闲扯了1、JAVA面试核心知识整理（PDF）：包含JVMJAVA集合JAVA多线程并发，JAVA基础，Spring原理微服务，Netty与RPC，网络，日志，ZookeeperKafkaRabbitMQ，Hbase，MongoDB设计模式负载均衡数据库一致性哈希JAVA算法数据结构，加密算法，分布式缓存，Hadoop，Spark，Storm，YARN，机器学习，云计算共30个章节。2、Redis学习笔记及学习思维脑图。
制作SVG之VSCode编辑工具
tonyyxm2011的博客
06-02 1488
制作SVG之VSCode编辑工具 下载vscode（https://code.visualstudio.com/） 安装插件 3.安装完成后。测试一下
vscode-svg-previewer：Vscode SVG预览器
02-17
SVG预览器 仅预览（而不是代码编辑器） 如果您想默认查看SVG预览而不是源代码。 如何设置？ 打开任何SVG图像 执行命令“视图：使用...重新打开编辑器”（通过命令面板） 选择“图像查看器”并将其设置为默认值 命令： 命令 描述 SVG：打开预览 将预览打开到活动视图列 SVG：打开侧面预览 打开预览到侧视图列 SVG：显示源 活动预览的开源文件 设定： 财产 描述 默认 svg.preview.autoOpen 自动在侧面打开预览 错误的 键盘快捷键： 命令 键绑定 SVG：打开预览 Ctrl + Shift + V SVG：打开侧面预览 Ctrl + KV
前端使用bpmn-js写流程图
03-31
在本项目中，开发者已经利用 `bpmn-js` 在 Vue 框架下实现了流程图的绘制，并对 UI 进行了优化，移除了不必要的图标，并添加了右侧栏目的收缩和自定义功能。 首先，我们来深入理解 `bpmn-js`。`bpmn-js` 是由 bpmn....
sharex drawio vscode python
05-31
Draw.io是一款免费的在线图形绘制工具，特别适合创建流程图、UML图、思维导图等。它提供了一个直观的界面和丰富的形状库，能够帮助用户轻松地创建专业图表。Draw.io-18.1.3-windows-installer.exe是Draw.io的Windows...
详解关于php的xdebug配置(编辑器vscode)
12-20
在PHP开发过程中，调试是必不可少的一个环节，而Xdebug是一个非常强大的PHP...通过正确安装Xdebug，调整其配置，以及在VSCode中设置调试环境，开发者可以轻松地追踪代码执行流程，定位问题，从而更高效地进行开发工作。
vscode-excalidraw:vscali的Excalidraw集成
05-02
Excalidraw是一款流行的开源绘图工具，专为创建手绘风格的流程图、思维导图和简单草图而设计。它使用简单的图形和手势，让非专业设计师也能轻松创作出有视觉吸引力的图像。而"vscode-excalidraw"是Visual Studio ...
LVGL开发，VSCODE例程
01-06
VSCODE是一款强大的源代码编辑器，支持多种编程语言和插件，使其成为嵌入式开发的理想选择。要开始LVGL开发，你需要安装以下关键扩展： 1. C/C++ Extension：这是VSCODE的基本扩展，提供了C/C++代码的语法高亮、...
自动绘制生成网络拓扑图软件
05-17
自动绘制生成网络拓扑图软件
vscode 预览图片 插件_一款超级好用的Vue上传图片裁剪预览插件
weixin_42106357的博客
02-01 576
大家好，我是为前端娱乐圈操碎了心的小迷妹，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标。在做web前端开发的时候，你一定遇到过这样的业务场景，上传用户头像的时候，需要将图片进行裁剪等操作，这个时候，我们一般会用到第三方插件。如果自己造轮子的话，就太慢了，耽误时间不说，搞不好还要留下来加班。这里就推荐一个简单易用的vue图片...
Java开发最佳实践手册全网独一份，牛皮轰轰
m0_57081140的博客
06-28 104
spring+spring5最全知识梳理大纲（总） spring最全知识梳理大纲（总） spring5最全知识梳理大纲（总） spring最全知识梳理大纲（分） 为什么要使用Spring？ Bean spring事务 面向切面编程（Aspect Oriented Programming） Spring面试 spring5最全知识梳理大纲（分） Spring框架介绍 IOC容器 AOP JdbcTemplate 事务管理 Spring5
vscode怎么画puml_vscode思维导图扩展更新，支持画流程图
weixin_39632379的博客
11-21 1007
效果展示本文要实现的插件是： 给思维导图添加拓扑图编辑的功能，最终实现的效果：点击ContextMenu下的Edit Topology Diagram 菜单项，打开拓扑图编辑界面该拓扑图会作为该topic的一个附件。Online App: https://awehook.github.io/react-mindmap/vscode extention: https://marketplace.vi...
卧槽！VSCode 上竟然也能画流程图了？？？
墨鱼菜鸡
09-09 366
公众号关注“GitHubPorn” 设为 “星标”，带你挖掘更多开发神器！ 大家好，我是小 G。 作为一款开源的主流代码编辑器，VSCode 在发布之后一直受到不少开发者的喜爱。 因此，有很多水友也经常调侃道，这世界上就不存在 VSCode 做不到的事。 看到大家对 VSCode 如此痴迷，那今天小 G 就再给大家推荐一款实用的 V...
在VS Code上使用draw.io绘制UML图、架构图、原型图、网络拓扑图、组织结构图等，PeocessOn再见
Kearney
01-14 1万+
简介 流程图和UML图估计是程序员偶尔需要的东西，又是话画一个流程图可以理清程序逻辑，之前用windows自带的画图来画流程图，对齐和再次编辑不太好处理，后来室友推荐了processon Processon 直接二次编辑和到处为图片，还能共享合作编辑，不过要联网操作。 后面逛互联网看到了VS Code使用draw.io画图 draw.io 在线网页版：https://www.draw.io/ PC电脑版(不知为何无法访问)：http://t.cn/Aid48ecf VS Code配置draw.io 参
Vscode编辑器--md流程图
weixin_46030648的博客
08-04 6852
平常开发过程中，总会遇到很多逻辑复杂，代码涉及组件或页面多，回头查找问题或别人接手时，无法及时能够满足解决条件，于是vscode提供了一个根据代码逻辑，自己去勾画流程图，无论自己和别人看的时候一目了然。首先要在vscode里下载Markdown Preview Enhanced插件，这是一款实时能看到编写的流程示意图，下载好了，你的编辑器右上角会出现这个icon，就证明下载成功了，然后可以开启分屏模式，接下来，可以分叉，因为你有多个地方公用一个文案，是不是想到js中提取声明一个变量，没错，它也可以。....
vscode配置drawio绘制流程图
热门推荐
m0_62919535的博客
02-26 1万+
最近课程设计需要画流程框图，所以在网上找找绘制流程图的软件。然后我选择了这个drawio，无他，只是因为用vscode插件就能使用。。本篇主要是介绍一下用vscode插件来使用drawio，并且做一些基础操作的教程，满足大多数人的需求。希望你能有所收获，据说其他人用的是WPS，不知道效果怎么样，vscode配置是很简单的一种方式，当然你觉得lazy，网页版是最好的选择。
vscode plantuml画流程图
04-12
VSCode是一款功能强大的开源代码编辑器，而PlantUML是一种文本化的流程图绘制工具。在VSCode中使用PlantUML插件可以方便地绘制流程图。 要在VSCode中使用PlantUML插件画流程图，你可以按照以下步骤进行操作： 1. 安装VSCode：首先，你需要在官网下载并安装VSCode编辑器。 2. 安装PlantUML插件：在VSCode的扩展商店中搜索并安装PlantUML插件。 3. 创建一个新的PlantUML文件：在VSCode中，点击左侧的资源管理器图标，然后右键点击你想要创建PlantUML文件的文件夹，选择“新建文件”，并将文件后缀名设置为`.puml`或`.plantuml`。 4. 编写流程图代码：在新创建的PlantUML文件中，你可以使用PlantUML的语法来编写流程图代码。例如，你可以使用`start`和`end`关键字表示开始和结束节点，使用`->`表示流程的方向等。 5. 预览流程图：在编写完流程图代码后，你可以按下`Ctrl + Shift + P`（或者`Cmd + Shift + P`）打开命令面板，然后输入“PlantUML Preview”并选择相应的命令来预览生成的流程图。 6. 导出流程图：如果你想将流程图导出为图片或其他格式，可以在预览界面中点击右上角的导出按钮，选择导出格式并保存文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

海里的鱼2022

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

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

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

打赏作者

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

抵扣说明：

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

余额充值