5 分钟了解 Excalidraw

5,330 阅读2分钟

介绍

Excalidraw 是近两年新起的一款画图工具,主要包含白板、流程图的能力,它简单好用有画图界的 Markdown 之称。

Excalidraw 素材展示

1、状态管理 - EventBus素材:

2、Angular 组件树素材:

3、Yjs 协同编辑架构图素材:

特点

手绘风格、简单易用、开源、开放、SASS、本地优先、Excalidraw+

它满足我对一个开源作品的所有想象,它是也我入门画图领域的启蒙作品,我的第一行代码是参照它写的,我的第一个 Demo 界面也是模仿它做的,很多画图基础知识、架构思路 Excalidraw 都是入口或者起点。

github 地址:github.com/excalidraw/…

sass 地址:excalidraw.com/

基础功能

基本图形元素:...、画笔、文字、矩形、箭头...

属性设置:背景、填充、风格、圆角、透明...

工具栏:放大、缩小、撤销、重做、橡皮擦...

保存图片:

保存到本地:

素材库:

Excalidraw Libraries:

点击上图的浏览素材库

小故事

作者 vjeux 是 facebook 团队成员,项目在开始阶段就是就是以开源的方式推进,当时作者在 Twitter 上发了一些推文介绍了,即刻 Excalidraw 就吸引了很多开发者的关注,大家都感觉这个东西虽然功能简单,但是你只要画时间了解下就会喜欢上它,其中不乏很多大佬(Dan)。

@dan_abramov 6:01 PM · Jan 5, 2020

Only been using Excalidraw for a few hours and it’s obviously still very rough — but it’s already my most favorite graphical editor for sketching, ever.

只使用了几个小时的 Excalidraw,它显然仍然很粗糙——但它已经是我最喜欢的素描图形编辑器了。

有兴趣的可以看下他的推文: twitter.com/Vjeux/statu…

它最初的名字还不叫 Excalidraw,而是叫 Excalibur

Excalibur(传说中的圣剑)
Excalibur是传说中不列颠国王 亚瑟王 从湖之仙女那得到的圣剑。此剑是精灵在 阿瓦隆(Avalon)所打造,剑锷由黄金所铸、剑柄上镶有 宝石,并因其锋刃削铁如泥。baike.baidu.com/item/Excali…

它的 Logo 也是手绘的圣剑(也有说它是钢笔的),可以说跟它的名字和实际意义很统一了。

结束

先分享 Excalidraw 特点和基础功能,后续可能会分享下 Excalidraw 基础源代码的解读,算是入门画图技术领域的一个开始。