跃然纸上的灵感再现,手绘风格的开源绘图白板工具: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.hqwc.cn/news/578537.html

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

相关文章

67、yolov8目标检测和旋转目标检测算法部署Atlas 200I DK A2开发板上

基本思想:需求部署yolov8目标检测和旋转目标检测算法部署atlas 200dk 开发板上 一、转换模型 链接: https://pan.baidu.com/s/1hJPX2QvybI4AGgeJKO6QgQ?pwdq2s5 提取码: q2s5 from ultralytics import YOLO# Load a model model YOLO("yolov8s.yaml")…

前端面试拼图-数据结构与算法(二)

摘要:最近,看了下慕课2周刷完n道面试题,记录下... 1. 求一个二叉搜索树的第k小值 二叉树(Binary Tree) 是一棵树 每个节点最多两个子节点 树节点的数据结构{value, left?, right?} 二叉树的遍历 前序遍历:root→left→right 中…

【Redis】数据类型、事务执行、内存淘汰策略

目录 数据类型 Redis事务执行步骤 步骤: redis内存淘汰策略 设置内存淘汰策略 1.设置配置文件 2.通过命令设置 数据类型 官网解释 Understand Redis data types | Redis 首先,Redis 的所有键都是字符串,常用的数据类型有 5 种:Strin…

vue3+threejs新手从零开发卡牌游戏(二十一):添加战斗与生命值关联逻辑

首先将双方玩家的HP存入store中,stores/common.ts代码如下: import { ref, computed } from vue import { defineStore } from piniaexport const useCommonStore defineStore(common, () > {const _font ref() // 字体const p1HP ref(4000) // 己…

科普——芯片的市场价格

以前以为进口的芯片会很贵,其实不然,均在很低,粗略找了几个,批发价格在50元上下 厂商型号:STM32F103RCT7 品牌名称:ST(意法半导体) 元件类别:MCU 封装规格:64-LQFP(10x1…

数字范围按位与

题目链接 数字范围按位与 题目描述 注意点 0 < left < right < 2^31 - 1包含 left 、right 端点 解答思路 返回区间内所有数字按位与的结果&#xff0c;所以区间内所有数字在某一位的值相同&#xff0c;则结果该位数字为该值&#xff0c;否则该位数字为0&#xf…

【动态规划】1223. 掷骰子模拟

作者推荐 视频算法专题 LeetCode1223. 掷骰子模拟 有一个骰子模拟器会每次投掷的时候生成一个 1 到 6 的随机数。 不过我们在使用它时有个约束&#xff0c;就是使得投掷骰子时&#xff0c;连续 掷出数字 i 的次数不能超过 rollMax[i]&#xff08;i 从 1 开始编号&#xff09…

第十四届蓝桥杯第十题:蜗牛分享

问题描述 输入格式 输出格式 输出共一行&#xff0c;一个浮点数表示答案&#xff08;四舍五入保留两位小数&#xff09;。 样例输入 3 1 10 11 1 1 2 1样例输出 4.20样例说明 蜗牛路线&#xff1a;(0,0)→(1,0)→(1,1)→(10,1)→(10,0)→(11,0)(0,0)→(1,0)→(1,1)→(10,1…

Java运算符-三元运算符,这你必须得会!

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一个人虽可以走的更快&#xff0c;但一群人可以走的更远。 我是一名后…

什么是齐纳二极管?齐纳二极管1SMB5944BT3G参数详解+应用方案

关于齐纳二极管基本知识&#xff1a; 齐纳二极管&#xff0c;又称稳压二极管。利用PN结的反向击穿状态&#xff0c;电流变化范围大&#xff0c;电压基本不变。制作了具有稳压功能的二极管。这种二极管是一个高电阻半导体器件&#xff0c;直到临界反向击穿电压。在这个临界击穿…

linux基础命令篇: centos7虚拟机网络配置——NAT模

linux基础命令篇&#xff1a; centos7虚拟机网络配置——NAT模式 1搞清楚NAT模式概念 在网络地址转换&#xff08;NAT&#xff09;模式下&#xff0c;虚拟机与宿主机共享一个IP地址。虚拟机的所有网络流量都会通过宿主机的IP地址进行转换&#xff0c;然后发送到外部网络。这意…

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

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