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

news2025/2/2 6:02:28

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.coloradmin.cn/o/1555333.html

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

相关文章

mysql之MyBatis核心工作原理

MyBatis核心工作原理 一、源码环境 1.手动编译源码 工欲善其事必先利其器。为了方便我们在看源码的过程中能够方便的添加注释,我们可以自己来从官网下载源码编译生成对应的Jar包,然后上传到本地maven仓库,再引用这个Jar。大家可以自行去官…

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

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

从代码生成工具看技术手段升级

从代码生成工具看技术手段升级 过去现在在日常工作中,你会用到代码生成工具吗?最喜欢哪一种呢?你一般使用代码生成工具来做什么?面对尚处于“成长期”的代码生成工具,你有哪些期待和诉求呢? 过去 在过去的…

小程序UI设计规范,界面设计尺寸详解

作为互联网技术的重要组成部分,小程序在日常生活中发挥着越来越重要的作用。因此,了解和严格遵守小程序的 UI 设计标准非常重要,它不仅可以帮助我们在保证良好用户体验的同时优化小程序,还可以使我们的产品在竞争激烈的市场中占据…

java中的继承和组合

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

深度学习pytorch——卷积神经网络(持续更新)

计算机如何解析图片? 在计算机的眼中,一张灰度图片,就是许多个数字组成的二维矩阵,每个数字就是此点的像素值(图-1)。在存储时,像素值通常位于[0, 255]区间,在深度学习中&#xff0…

C++多线程:线程的创建、join、detach、joinable方法(二)

1、线程的开始与结束 程序运行起来,生成一个进程,该进程所持有的主线程开始自动运行,main主线程运行完所有的代码从main函数中返回表示整个进程运行完毕,标志着主线程和进程的死亡,等待操作系统回收资源,因…

五、基于KubeAdm搭建多节点K8S集群

如需查阅上一步骤,请点击下面链接:四、戴尔R630本地服务器Linux Centos7.9系统安装docker-ce-20.10.10-3.el7版本-CSDN博客文章浏览阅读727次,点赞12次,收藏13次。1、准备工作3、Linux Centos7.9系统的iDRAC远程管理、网络设置、SecureCRT远程登录终端、企业级静态ip地址配…

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

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

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

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

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

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

RabbitMQ 延时消息实现

1. 实现方式 1. 设置队列过期时间:延迟队列消息过期 死信队列,所有消息过期时间一致 2. 设置消息的过期时间:此种方式下有缺陷,MQ只会判断队列第一条消息是否过期,会导致消息的阻塞需要额外安装 rabbitmq_delayed_me…

327京东一面

1.项目相关 2.手撕SQL 两道 3.JMeter性能测试 首先,进行基准测试: 单用户测试(单用户循环多次得到的数据);为多用户并发执行提供参考 其次,进行负载测试: 通过逐步增加系统负载&#xff0…

2024年水电站大坝安全监测工作提升要点

根据《水电站大坝运行安全监督管理规定》(国家发改委令第23号)和《水电站大坝运行安全信息报送办法》(国能安全〔2016〕261号)的相关规定、要求,电力企业应当在汛期向我中心报送每日大坝汛情。近期,全国各地…

Qt+OpenGL入门教程(三)——绘制三角形

通过前两篇文章的学习,我想大家应该有了基本的理解,我们接下来实操一下。 创建Qt OpenGL窗口 QOpenGLWidget QGLWidget是传统QtOpenGL模块的一部分,与其他QGL类一样,应该在新的应用程序中避免使用。相反,从Qt5.4开始…

蓝桥杯23年第十四届省赛真题-三国游戏|贪心,sort函数排序

题目链接: 1.三国游戏 - 蓝桥云课 (lanqiao.cn) 蓝桥杯2023年第十四届省赛真题-三国游戏 - C语言网 (dotcpp.com) 虽然这道题不难,很容易想到,但是这个视频的思路理得很清楚: [蓝桥杯]真题讲解:三国游戏&#xff0…

备考ICA----Istio实验14---出向流量管控Egress Gateways实验

备考ICA----Istio实验14—出向流量管控Egress Gateways实验 1. 发布测试用 pod kubectl apply -f istio/samples/sleep/sleep.yaml kubectl get pods -l appsleep2. ServiceEntry 创建一个ServiceEntry允许流量访问edition.cnn.com egressgw/edition-ServiceEntry.yaml api…

前端bugs

问题: Failed to load plugin typescript-eslint declared in package.json eslint-config-react-app#overrides[0]: Cannot find module eslint/package.json 解决: google了一晚上还得是chatgpt管用 运行以下命令【同时还要注意项目本身使用的Node版…

亚信安全联合人保财险推出数字安全保障险方案,双重保障企业数字化转型

数字化发展,新兴技术的应用与落地带来网络攻击的进一步演进升级,同时全球产业链供应链融合协同的不断加深,更让网络威胁的影响范围与危害程度不断加剧。 企业单纯依靠自身安全能力建设,能否跟上网络威胁的进化速度?能否…

Day55:WEB攻防-XSS跨站CSP策略HttpOnly属性Filter过滤器标签闭合事件触发

目录 XSS跨站-安全防御-CSP XSS跨站-安全防御-HttpOnly XSS跨站-安全防御-XSSFilter(过滤器的意思) 1、无任何过滤 2、实体化 输入框没有 3、全部实体化 利用标签事件 单引号闭合 4、全部实体化 利用标签事件 双引号闭合 5、事件关键字过滤 利用其他标签调用 双引号闭合…