万物皆可Draw.io

简介: 最近迷上了一款工具:Draw.io。用过几次之后,就一发不可收拾了。

最近迷上了一款工具:Draw.io。用过几次之后,就一发不可收拾了。

平时在写 md 文章时,经常需要插入一些框架图、原理图,而且这些图改动比较频繁,每次修改都需要重新生成图片,再插入到 md 中,比较繁琐。

直到组内小伙伴推荐了 Draw.io 这个插件,点击引用的图片链接,就可以进入编辑页面,修改后实时生效,简直不要太方便。

万物皆可drawio-插件.png

在 md 中直接修改 Draw.io 的图:

万物皆可drawio-Drawio演示.gif

抱歉图片有点糊,因为原图太大,老是上传失败,就压缩了一下。

Draw.io 在工作中特别实用。

比如每次提测需求,都需要给 QA 同学写测试建议,我也会用 Draw.io 来做:文字 + 图片,特别清晰,最后输出一张图片,发给 QA 同学即可:

万物皆可drawio-测试建议.png

画完后,导出为图片即可:

万物皆可drawio-输出为图片.png

我现在甚至连健身计划也使用 Draw.io 来制作:

万物皆可drawio-健身计划.png
我个人比较喜欢的是带网格背景的图形:

万物皆可drawio-网格背景.png

至于字体的话,自带的字体比较普通,可以自己自定义,我比较喜欢 Google 的 ZCOOL KuaiLe 中文字体。

自定义字体的方式如下:

万物皆可drawio-自定义字体1.png

可以选择自定义系统的字体、Google 字体和 Web 在线字体:

万物皆可drawio-自定义字体2.png

我这里选择自定义一个 Google 的 ZCOOL KuaiLe 字体:

万物皆可drawio-自定义字体3.png

更多的 Google 字体可以去这里查看:google fonts

筛选出中文字体:

万物皆可drawio-自定义字体4.png

字体效果如下:

万物皆可drawio-自定义字体5.png

Draw.io 还有很多功能,大家可以自行探索、尝试。

相关文章
|
缓存 数据可视化 JavaScript
draw-io
Draw.io是一个可配置的图表/白板可视化应用程序。draw.io 由英国软件公司JGraph Ltd拥有和开发。这是一个开源项目(但对贡献是封闭的)可以绘制流程图、UML、类图、组织结构图、泳道图、E-R图、思维导图等
1110 0
draw-io
|
移动开发 缓存 JavaScript
2021最新阿里代码规范(前端篇)
2021最新阿里代码规范(前端篇)
56884 11
2021最新阿里代码规范(前端篇)
|
Web App开发 人工智能 Android开发
iconfont.cn 阿里出品的矢量图标库
Iconfont.cn是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。(目前已有7000+图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。)
12421 0
iconfont.cn 阿里出品的矢量图标库
|
Oracle Java 关系型数据库
Oracle jdk 的国内下载镜像
Oracle jdk 的国内下载镜像
55626 0
|
存储 人工智能 uml
介绍一款好用的开源画图神器-draw.io | AI应用开发
draw.io 是一款基于浏览器的开源绘图工具,无需安装即可使用,支持多种操作系统和设备。其简洁的界面、丰富的形状库、智能对齐功能和强大的云端协作能力,使其成为专业人士和创意爱好者的首选。无论是产品设计、流程图绘制还是思维导图构建,draw.io 都能满足你的多样化需求。【10月更文挑战第7天】
1303 0
|
虚拟化 Windows
Windows Server 2016 中文版、英文版下载 (2025 年 6 月更新)
Windows Server 2016 中文版、英文版下载 (2025 年 6 月更新)
1570 0
|
9月前
|
NoSQL 数据库 uml
draw.io:开源款白板/图表绘制利器
draw.io 是一款开源免费的图表绘制工具,支持流程图、思维导图、网络拓扑图等多种图表类型。它在 GitHub 上已有 52.6k Star,提供在线版、自托管 Docker 部署和桌面版安装方式。无论你是学生、教师还是工程师,draw.io 都能极大提高你的工作效率。官方网站:[https://www.drawio.com](https://www.drawio.com),GitHub 地址:[https://github.com/jgraph/drawio-desktop](https://github.com/jgraph/drawio-desktop)。
1144 6
draw.io:开源款白板/图表绘制利器
|
8月前
|
域名解析 人工智能 API
使用阿里云服务器搭建自己的DeepSeek个人站点,3分钟尝鲜教程!
通过阿里云服务器,您可以0成本部署专属的DeepSeek网站。学生用户可领取300元代金券,实现免费部署;普通用户则可以选择99元/年的服务器方案。使用阿里云计算巢“DeepSeek个人站点-快速部署”服务,最快5分钟完成部署,无需编写代码。该服务集成了百炼API和Open WebUI,支持多种AI模型(如DeepSeek、Qwen-max、Llama等),并提供稳定、高性价比的个人专属AI网站体验。详情及教程请参考官方页面。
1370 1
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
网络协议 应用服务中间件 网络安全
阿里云免费SSL申请流程(白嫖20张SSL免费证书)2024年新版教程
本文详述了2024年最新的阿里云免费SSL证书申请流程。用户可通过阿里云数字证书管理服务控制台一键申请最多20张免费单域名SSL证书,每张证书有效期为3个月。首先登录控制台,选择“SSL证书管理”下的“个人测试证书”,同意协议并完成购买流程。之后需创建证书、输入域名等信息并进行域名验证。验证方法包括手动DNS验证、域名授权自动化验证或文件验证。完成验证后,等待审核通过即可下载适用于不同服务器类型的SSL证书。请注意,阿里云免费SSL证书到期后不支持续费,需重新申请。了解更多详情,请访问阿里云官方SSL证书页面。