在VS Code上使用draw.io绘制UML图、架构图、原型图、网络拓扑图、组织结构图等，PeocessOn再见

最新推荐文章于 2025-03-19 22:00:09 发布
最新推荐文章于 2025-03-19 22:00:09 发布
阅读量1.9w 收藏 32
点赞数 13
分类专栏： study 文章标签： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43031092/article/details/112639644
版权
这篇博客介绍了如何利用ProcessOn和VSCode的draw.io插件方便地创建和编辑流程图及UML图表。ProcessOn提供在线编辑和分享功能，而draw.io则可以通过VSCode无缝集成，支持多种文件格式，并拥有丰富的图形库，适合程序员进行程序逻辑梳理。此外，还提到了draw.io的Atlas主题，以及如何在VSCode中配置和使用draw.io。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

简介

在这里插入图片描述

流程图和UML图估计是程序员偶尔需要的东西，又是话画一个流程图可以理清程序逻辑，之前用windows自带的画图来画流程图，对齐和再次编辑不太好处理，后来室友推荐了processon

Processon

在这里插入图片描述
直接二次编辑和到处为图片，还能共享合作编辑，不过要联网操作。
后面逛互联网看到了VS Code使用draw.io画图

draw.io

免费的结构图绘制软件，关键是有VS Code插件
在线网页版：https://www.draw.io/

PC电脑版(不知为何无法访问)：http://t.cn/Aid48ecf，https://drawio-app.com
在这里插入图片描述

VS Code配置draw.io

插件市场

VS Code不会安装出门右转。打开VS Code-插件市场-搜索draw.io，下载第一个
在这里插入图片描述

使用

新建文件，修改后缀名为 .drawio, .dio, .drawio.svg or .drawio.png 中任意一个，建议是**.drawio.svg**，因为这样不需要导出可以用在README.md中，然后双击打开它
在这里插入图片描述
还可以从文件导出为svg,png,drawio
在这里插入图片描述
丰富多彩的图案，还能离线编辑，爱了爱了
在这里插入图片描述
atals主题
在这里插入图片描述

参考

【Python实战练习】在 VS Code 中轻松绘图：Draw.io Integration 插件详解
若北辰
10-21 2295
Draw.io Integration 插件是 VS Code 的一款集成式绘图工具。它将著名的在线绘图工具 Draw.io（现在也称为 diagrams.net）直接嵌入到 VS Code 编辑器中，让开发者能够在编写代码的同时，也轻松地创建各类图表，如流程图、UML 类图、网络拓扑图等。VS Code 用户无需切换到浏览器或其他独立软件来创建和管理图表，Draw.io Integration 插件在 VS Code 内部实现了无缝集成，极大地提升了生产力。
draw.io绘制流程图
03-09
draw.io绘制流程图;安装即用；除了它确实可以免费制作出无限多的流程图外，另外一个优点就是它可以和我惯用的 Google 云端硬盘（或你的其它云端硬盘服务）结合，让画出来的流程图可以在我的云端硬盘进行管理与分享。
vscode-drawio：此非官方扩展将Draw.io（也称为diagrams.net）集成到VS Code中
02-04
Draw.io VS代码集成 这个非正式的扩展将 （也称为 ）集成到VS Code中。 产品特点 在Draw.io编辑器中编辑.drawio ， .dio ， .drawio.svg或.drawio.png文件。 要创建新图，只需创建一个空的*.drawio ， *.drawio.svg或*.drawio.png文件并打开它。 .drawio.svg是有效的.svg文件，可以嵌入到Github自述文件中！ 无需出口。 .drawio.png是有效的.png文件！ 无需出口。 您应该尽可能使用.svg它们看起来好多了！ 若要在不同格式之间进行转换，请使用Draw.io: Convert
VS Code画流程图：draw.io插件
微小冷的学习笔记
11-12 5300
Draw.io是著名的流程图绘制软件，开源免费，对标Visio，用过的都说好。而且除了提供常规的桌面软件之外，直接访问draw.io就可以在线使用，堪称百分之百跨平台，便捷性直接拉满。
架构师必须掌握的画图工具draw.io、文本绘图（PlantUML）（架构图、UML图、流程图、时序图）
最新发布
码上悦读
03-19 1998
今天，我将为大家解锁两种强大易用的画图工具，助你在架构设计之路上乘风破浪、披荆斩棘。 首先是draw.io，这款在线绘图工具以其丰富的预设模板和强大的定制能力深受广大技术人群喜爱，无论是绘制复杂的系统架构图还是精巧的UML类图，都能游刃有余。既支持在线画图，也支持离线画图！ 其次，我们还将探讨语雀中的文本绘图工具，特别是支持PlantUML语法的特性，让你可以通过简单的代码就能描绘出专业美观的架构和设计图，充分体现了“码即是图，图亦是码”的理念。
架构图666.drawio
02-22
架构图666.drawio
drawio绘制组织架构图和树形图
鹏哥说编程
12-23 6902
组织结构图，也被称为树形图、组织架构图，用于所有学科和专业。我们喜欢对所有事物进行分类，因为这有助于我们理解世界是如何运作的。植物和动物的种类、公司和军队的等级制度、团队结构、家谱、语言家族关系，甚至疾病的症状——组织结构图帮助我们快速找到联系谁、治疗什么疾病等等。
干掉visio，这个画图神器真的绝了！！！
Java后端技术
12-13 1074
往期热门文章：1、程序员裸辞全职接单一个月的感触 2、Java8 Stream：2万字20个实例，玩转集合的筛选、归约、分组、聚合 3、字节终面：两个文件的公共URL怎么找？ 4、留在一线...
java 画图 怎么清除已经画出来的图形_使用VSCode+PlantUML+C4-Model快速画架构图
weixin_39757626的博客
11-23 225
关于C4-Model最近在看C4-Model，它的理念很实用，架构图要明确面向人群，根据面向人群的不同，产出四幅图来描述一个系统或者一个架构。System Context --> Container --> Component --> Code 四个层次。具体每个层级的图形用来描述什么，可以参见这里：https://www.infoq.cn/article/C4-architec...
这个软件画架构图真爽
程序员高级码农的博客
03-09 2366
本文主要介绍了diagrams画图工具，它是一款免费的在线画图工具，也叫做draw.io。它的功能非常强大，包括：菜单栏、工具栏、左边图形区、画图区、右边样式区、底部等。同时还介绍了如何进入画图区。当然本文只是抛砖引玉，给大家介绍了diagrams的一小部分功能。它的强大之处，需要大家自己多动手摸索。下面用一张图给大家展示一下，我是如何使用diagrams画图的：好了，今天的内容先分享到这里，我们下期再见。
VSCode绘制UML类图
热门推荐
Techblog of HaoWANG
06-03 2万+
软件设计中，有好几种图需要画，比如流程图、类图、组件图等，我知道大部分人画流程图一般都会用微软的viso绘制，我之前也是这个习惯。 viso画图有个不好的地方是需要时刻去调整线条和边框已达到简洁美观，今天我给大家介绍一款程序员画图神器PlantUML，一款你用了就爱上的画图软件！ VsCode以插件的形式支持了这款画图神器，还不知道VsCode？ ...
超级强大的流程图，脑图，架构图，网络结构图绘制工具 mac 版 draw.io-13.0.3.dmg
05-31
draw.io 是一款超级强大的免费的图表编辑工具, 可以用来编辑工作流, BPM, org charts, UML, ER图, 网络拓朴图等。支持流程图，架构图，原型图等图标。支持Github，Google Drive, One drive等网盘同步，并且永久免费。
draw-io-note：用draw.io画的UML图等
02-13
画笔记 用draw.io画的UML图等
VScode 画图插件
知远同学的博客
01-07 1004
开源vs code插件之后，它一跃成为最强大的流程图工具。
使用VSCode+PlantUML+C4-Model快速画架构图
smilejiasmile的博客
02-22 9166
使用VSCode+PlantUML+C4-Model快速画架构图 关于C4-Model 最近在看C4-Model，它的理念很实用，架构图要明确面向人群，根据面向人群的不同，产出四幅图来描述一个系统或者一个架构。System Context --> Container --> Component --> Code 四个层次。 层级 具体每个层级的图形用来描述什么，可以参...
vscode插件一draw.io绘图工具
xiaojiezi55的博客
03-01 1万+
vscode 插件推荐一draw.io 日常工作中需要制作时序图、流程图等； 这里推荐的是vscode的插件中draw.io； 先自行在官网下载vscode：https://code.visualstudio.com/ 安装后打开vscode，如图在在vscode的扩展商店中查询drawio，就会出现这个插件 进行安装 安装后可以新建一个文件以.drawio 后缀的文件，使用vscode打开 看下效果，即可进行图形绘制 ...
VS Code也能用来画图？不信来试试
码农孟宁的博客
05-29 1483
VS Code也能用来画图？不信来试试在线绘图工具draw.io先来说是draw.io，draw.io是一个在线绘图工具，因其界面简洁直观，功能丰富强大而受到不少用户喜爱。在浏览器中输入d...
vscode配置drawio绘制流程图
m0_62919535的博客
02-26 2万+
最近课程设计需要画流程框图，所以在网上找找绘制流程图的软件。然后我选择了这个drawio，无他，只是因为用vscode插件就能使用。。本篇主要是介绍一下用vscode插件来使用drawio，并且做一些基础操作的教程，满足大多数人的需求。希望你能有所收获，据说其他人用的是WPS，不知道效果怎么样，vscode配置是很简单的一种方式，当然你觉得lazy，网页版是最好的选择。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值