跃然纸上的灵感再现,手绘风格的开源绘图白板工具:Excalidraw

Excalidraw:即绘即思,直观呈现未来流程图!- 精选真开源,释放新价值。

概览

在撰写文章或构建演示案例的过程中,为了增强视觉表现力和信息传达深度,适时融入图表或图形显得至关重要。Excalidraw作为一款基于浏览器环境的开源绘图工具,凭借其独特而直观的操作方式,可助力用户高效创作出具有手绘风格的各类图形与图表,广泛应用于软件工程、设计创新及教育培训等诸多领域。

但是,优秀的作图工具有那么多,例如文本绘图工具 PlantUML,流程图设计工具 Draw.io,还有专业绘图工具 Sketch 和 Figma 等,为什么推荐Excalidraw?

Excalidraw的核心优势在于,它的用户界面非常简洁,易于上手,即便界面简洁,但它提供了基本的绘图工具,如线条、形状、文字等,以及一些常用功能,如撤销、重做、对齐等。与其他绘图工具不同,Excalidraw 的绘图效果呈现出手绘般的质感,使得图形和图表看起来更加自然、生动。并且Excalidraw还支持实时协作功能,多人可以共同在一个画布上绘制,方便团队成员进行讨论和创意交流。它还包含一个丰富手绘风格图形和元素的素材库,用户可以直接从库中选择所需素材并添加到画布上,这些素材涵盖了基本图标,装饰元件,UI 组件等多种类型,方便用户快速创建各种流程图、原型设计和思维导图等。所有的 Excalidraw 绘图数据都存储在本地,不会上传到服务器。同时它还提供了加密分享功能,确保分享过程中数据的安全性。由于Excalidraw是基于浏览器的应用,因此无需安装额外的软件,就可以在不同的操作系统和设备上使用。

截至发稿概况如下:

  • 软件地址:GitHub - excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams

  • 软件协议:MIT

  • 编程语言:

语言

占比

TypeScript

88.0%

SCSS

4.9%

MDX

4.3%

JavaScript

2.5%

HTML

0.3%

  • 收藏数量:77.1K


部署

你可以进入官方网址在线体验:https://excalidraw.com

或者自己部署

npm install react react-dom @excalidraw/excalidraw或yarn add react react-dom @excalidraw/excalidraw

使用Excalidraw进行绘图非常简单:


主要功能

Excalidraw具有鲜明的特点:

  • 手绘风格

与其他绘图工具不同,Excalidraw 的绘图效果呈现出手绘般的质感,使得图形和图表看起来更加自然、生动。

  • 组合和分组

Excalidraw支持将多个图形组合或分组。通过将图形组合在一起,用户可以更好地管理和移动这些图形。分组功能可以将几个图形看作一个整体进行编辑。

  • 通过 Excel 创建图表

Excalidraw 还有一个隐藏小技巧,允许用户通过从 Excel 或纯逗号分隔文本(csv格式)复制和粘贴数据来创建图表!例如,如果复制下表并将其粘贴到Excalidraw:

Day

Commits

Mon

167

Tue

92

Wed

114

Thu

195

Fri

155

Sat

97

Sun

42

  • 多人协作

Excalidraw 支持实时协作功能,多人可以共同在一个画布上绘制,方便团队成员进行讨论和创意交流。

  • 丰富的素材库

Excalidraw 还包含一个丰富手绘风格图形和元素的素材库,用户可以直接从库中选择所需素材并添加到画布上,这些素材涵盖了基本图标,装饰元件,UI 组件等多种类型,方便用户快速创建各种流程图、原型设计和思维导图等。


遐想

Excalidraw的手绘风格惹人喜爱,这的确是适合极客的一款绘图工具。使用它绘图,整个都是项目都显得“高大上”的。不过,Excalidraw 也有几个缺点:

  • 默认不支持中文手写效果,因此当手绘图形中掺杂了很多非手写中文时,总会觉得图形不伦不类;

  • 只支持单画布绘图,当有多个图形并行绘制的诉求时,需要不断重复将线上图形保存到本地、重新加载另一个本地文件进行另一个图形绘制的过程;

  • 缺少本地文件存储和云端存储能力,Excalidraw 绘制的图形只能临时存储在浏览器存储中,容易丢失,不利于持久化创作和分享;

  • 不支持脑图、表格、文档嵌入等一些常见场景;

各位在使用 Excalidraw 的过程中是否有什么不满意的地方?或者对 Excalidraw 的功能有什么提议?热烈欢迎各位在评论区分享交流心得与见解!!!


声明:本文为辣码甄源原创,转载请标注"辣码甄源原创首发"并附带原文链接。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/780298.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【生活】相机/图像各参数

文章目录 专业模式图片编辑-滤镜实体滤镜软件模拟滤镜 图片编辑-增强曝光亮度对比度饱和度自然饱和度色温色调高光阴影HSL色调分离褪色颗粒锐化晕影清晰度暗角 参考 专业模式 第一个参数WB是白平衡,调节色彩的。 第二个是对焦F,近距离拍摄物体&#xf…

酷体体育科技加入飞桨技术伙伴计划,共同打造“AI随身教练”体育分析新模式...

近日,陕西酷体体育科技有限公司正式加入飞桨技术伙伴计划,双方将共同努力在AI体育技术分析领域,创新打造“AI体育”新模式,助力体育训练、康复、人才选拔数智化转型。通过大模型技术赋能体育,持续挖掘AI技术在体育领域…

unbuntu mysql8.0新建用户及开启远程连接

MySQL更新到8.0以上版本后,在创建连接远程的用户的时候和之前5.x的版本有了很大的不同,不能使用原来同时创建用户和授权的命令。 以下是记录的MySQL8.0创建用户并授权的命令: 查看用户表: user mysql; select host,user,authen…

GT收发器第四篇_QPLL和CPLL工作原理

文章目录 前言一、CPLL工作原理二、QPLL工作原理 前言 每个channel的时钟结构如图: Transceiver内部时钟来源可以是QPLL也可以是自己的CPLL。其内部TX 和 RX 时钟分频器可以单独从 QPLL 或 CPLL 中选择时钟,允许 TX和 RX 数据通道使用不同的参考时钟输入…

Unity-通过AB包使用SpriteAtlas图集(基于unity2018)

项目遇到了一个性能问题,需要优化UI。其中就涉及UI的合批问题,其中自然而然就会关联到图集的概念。旧版图集,Legacy Atlas,还没有太研究。今天主要看一下SpriteAtlas怎么使用的。 因为我们项目资源工程和Runtime是分离的&#xf…

python实战之进阶篇(一)

定义类 1. 构造方法 2. 实例方法 3. 类方法 类似于Java中的静态方法, 使用方式: 类名.类方法 4. 私有变量 5. 私有方法 6. 使用属性set和get

【二叉树】Leetcode 104. 二叉树的最大深度【简单】

二叉树的最大深度 给定一个二叉树 root ,返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例1 输入:root [3,9,20,null,null,15,7] 输出:3 解题思路 二叉树的最大深度可以通过递归方式来求解…

RockChip Android8.1 Settings

一:Settings一级菜单 1、AndroidManifest.xml 每个APP对应都有一个AndroidManifest.xml,从该文件入手分析最为合适。 packages/apps/Settings/AndroidManifest.xml 根据<category android:name="android.intent.category.LAUNCHER" />可找到当前当前APP a…

Java 扫描某包下所有类的注解并获得注解值

背景 &#xff1a; 需求 需要获取某个包下的所有的注解 并不是全部项目的 所以 只用针对某个包 进行扫描 获取注解 数据就行 百度了一圈 spring boot 没有自带的 获取注解集合的方法 在看 php 中 hyperf 框架 看到了 这个方法 就是因为 我需求是 php 和java 合体 微服务开发 …

Java复习第十三天学习笔记(HTML),附有道云笔记链接

【有道云笔记】十三 3.29 HTML https://note.youdao.com/s/Ru3zoNqM 一、基本标签 HTML:超文本标记语言 定义页面结构 CSS&#xff1a;层叠样式表 页面显示的样式、排版 BootStrap JS: JavaScript 界面交互(动态交互、逻辑) JQuery <!DOCTYPE html> <html> &l…

C++Template<>模版的介绍及深度解析

一、泛型编程 1.什么是泛型编程 泛型编程&#xff1a;是一种程序设计方法&#xff0c;编写于类型无关的通用代码&#xff0c;实现代码复用。而模版就是泛型编程的基础和核心。 二、template<>模版 1.template模版介绍 模版&#xff0c;顾名思义就是一个模具&#xff0…

SpringBoot实现RabbitMQ的定向交换机(SpringAMQP 实现Direct定向交换机)

文章目录 Direct 交换机特点实战声明交换及其队列(以注解方式)发消息 应用 上一篇文章中的 Fanout 模式&#xff0c;一条消息&#xff0c;会被所有订阅其交换机的队列都消费。 但是&#xff0c;在某些场景下&#xff0c;我们希望不同的消息被不同的队列消费。这时就要用到 Dir…

Linux内核之debugfs_create_dir与debugfs_create_file实例与调用栈流程(三十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

.NET CORE使用Redis分布式锁续命(续期)问题

结合上一期 .NET CORE 分布式事务(三) DTM实现Saga及高并发下的解决方案(.NET CORE 分布式事务(三) DTM实现Saga及高并发下的解决方案-CSDN博客)。有的小伙伴私信说如果锁内锁定的程序或者资源未在上锁时间内执行完&#xff0c;造成的使用资源冲突&#xff0c;需要如何解决。本…

Windows12安装Docker

环境及工具&#xff08;文末提供&#xff09; Docker Desktop Installer.exe &#xff08;官网&#xff09; 一、查看windows相关配置 查看是否开启相应的功能&#xff0c;如果没有需要开启&#xff0c;然后重启电脑 打开任务管理器&#xff08;CTRLSHIFTESC&#xff09;-&g…

既有理论深度又有技术细节——深度学习计算机视觉

推荐序 我曾经试图找到一本既有理论深度、知识广度&#xff0c;又有技术细节、数学原理的关于深度学习的书籍&#xff0c;供自己学习&#xff0c;也推荐给我的学生学习。虽浏览文献无数&#xff0c;但一直没有心仪的目标。两周前&#xff0c;刘升容女士将她的译作《深度学习计…

ssm 设备采购管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 ssm 设备采购管理系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模…

java中的继承和组合

继承 在java中继承指的是让类与类之间产生父子关系&#xff0c;被继承的类叫做父类或者基类、超类&#xff0c;继承的类叫做子类或者派生类。这里所说的继承和现实生活中的继承可以理解为同一个意思。当子类继承父类时&#xff0c;子类就能使用父类之中的非私有成员&#xff0c…

(十二)图像的Sobel梯度锐化

环境&#xff1a;Windows10专业版 IDEA2021.2.3 jdk11.0.1 OpenCV-460.jar 系列文章&#xff1a; &#xff08;一&#xff09;PythonGDAL实现BSQ&#xff0c;BIP&#xff0c;BIL格式的相互转换 &#xff08;二&#xff09;BSQ,BIL,BIP存储格式的相互转换算法 &#xff08;三…

图论- 最小生成树

一、最小生成树-prim算法 1.1 最小生成树概念 一幅图可以有很多不同的生成树&#xff0c;比如下面这幅图&#xff0c;红色的边就组成了两棵不同的生成树&#xff1a; 对于加权图&#xff0c;每条边都有权重&#xff08;用最小生成树算法的现实场景中&#xff0c;图的边权重…