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

本文主要是介绍跃然纸上的灵感再现,手绘风格的开源绘图白板工具: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 的功能有什么提议?热烈欢迎各位在评论区分享交流心得与见解!!!


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

这篇关于跃然纸上的灵感再现,手绘风格的开源绘图白板工具:Excalidraw的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/860911

相关文章

基于Python打造一个全能文本处理工具

《基于Python打造一个全能文本处理工具》:本文主要介绍一个基于Python+Tkinter开发的全功能本地化文本处理工具,它不仅具备基础的格式转换功能,更集成了中文特色处理等实用功能,有需要的... 目录1. 概述:当文本处理遇上python图形界面2. 功能全景图:六大核心模块解析3.运行效果4. 相

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

基于Python实现高效PPT转图片工具

《基于Python实现高效PPT转图片工具》在日常工作中,PPT是我们常用的演示工具,但有时候我们需要将PPT的内容提取为图片格式以便于展示或保存,所以本文将用Python实现PPT转PNG工具,希望... 目录1. 概述2. 功能使用2.1 安装依赖2.2 使用步骤2.3 代码实现2.4 GUI界面3.效

基于Python和MoviePy实现照片管理和视频合成工具

《基于Python和MoviePy实现照片管理和视频合成工具》在这篇博客中,我们将详细剖析一个基于Python的图形界面应用程序,该程序使用wxPython构建用户界面,并结合MoviePy、Pill... 目录引言项目概述代码结构分析1. 导入和依赖2. 主类:PhotoManager初始化方法:__in

使用Python自建轻量级的HTTP调试工具

《使用Python自建轻量级的HTTP调试工具》这篇文章主要为大家详细介绍了如何使用Python自建一个轻量级的HTTP调试工具,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录一、为什么需要自建工具二、核心功能设计三、技术选型四、分步实现五、进阶优化技巧六、使用示例七、性能对比八、扩展方向建

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

使用Java实现通用树形结构构建工具类

《使用Java实现通用树形结构构建工具类》这篇文章主要为大家详细介绍了如何使用Java实现通用树形结构构建工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录完整代码一、设计思想与核心功能二、核心实现原理1. 数据结构准备阶段2. 循环依赖检测算法3. 树形结构构建4. 搜索子

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

jvm调优常用命令行工具详解

《jvm调优常用命令行工具详解》:本文主要介绍jvm调优常用命令行工具的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一 jinfo命令查看参数1.1 查看jvm参数二 jstack命令2.1 查看现场堆栈信息三 jstat 实时查看堆内存,gc情况3.1