【分享】画图工具-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 就可以畅快的画画画了~

• 素材
  最后分享一些不错的素材，素材库都能找到