【分享】画图工具-Excalidraw
关于画图工具
作为技术人,画各类技术架构图、流程图是日常工作中必不可少的事项。图画的好,很多需要语言表达的琐碎内容别人一览无遗。而画图好不好,首要是有良好的抽象思维,即将系统模型/流程抽象为图的能力。其次,是工具,趁手的兵器才能将威力发挥到极致。
正好笔者最近也调研了一些工具,后续会持续做一些介绍。本次会介绍Excalidraw的特点和使用
Excalidraw介绍
- 官网:https://plus.excalidraw.com/
- 在线使用:https://excalidraw.com/
如上图是我画的流程图,可以看到非常明显的手绘风格,而且做的很自然,符合我得口味。
特点
- 风格:手绘风格很合我口味
- 上手难度:相当简单,而且绘图智能化比drawio稍高,图形和箭头的衔接自然流畅(这是个大痛点)。
- 这点和drawio完全是两个极端,drawio过于开放,导致很多简单的操作会变得复杂。
- 左侧是文件管理区,中间顶部是系统预置素材,日常使用形状、线条、图片。
- 当然,它也支持设置为普通线条,只需要在左侧面板设置即可。
- 功能:该有的都有,基础图形、填充、排列、组合等,满足大部分场景。另外还支持素材库添加收藏
使用方式
- 在线注册使用
- 有所限制,但功能更多
- 本地部署
- 比较自由且安全,但据说不支持远程协作
- js嵌入
- 这个模式应该是前端同学在一些项目中可能有用,但需要注意开源协议(本文不做深入拓展)
安装
本文主要介绍本地化部署的方式
-
打开github
https://github.com/excalidraw/excalidraw#local-installation 章节,介绍通过nodejs安装,yarn管理依赖和启动,流程比较简单,主要是依赖要装好,同时版本记得不要太高.
我自己的版本分别为:yarn -v 1.22.19 node -v v18.5.0
-
启动后,打开http://localhost:3000 就可以畅快的画画画了~
-
素材
最后分享一些不错的素材,素材库都能找到