【分享】画图工具-Excalidraw

关于画图工具

作为技术人,画各类技术架构图、流程图是日常工作中必不可少的事项。图画的好,很多需要语言表达的琐碎内容别人一览无遗。而画图好不好,首要是有良好的抽象思维,即将系统模型/流程抽象为图的能力。其次,是工具,趁手的兵器才能将威力发挥到极致。
正好笔者最近也调研了一些工具,后续会持续做一些介绍。本次会介绍Excalidraw的特点和使用

Excalidraw介绍

特点

  • 风格:手绘风格很合我口味
  • 上手难度:相当简单,而且绘图智能化比drawio稍高,图形和箭头的衔接自然流畅(这是个大痛点)。
    • 这点和drawio完全是两个极端,drawio过于开放,导致很多简单的操作会变得复杂。
    • 左侧是文件管理区,中间顶部是系统预置素材,日常使用形状、线条、图片。
      image
    • 当然,它也支持设置为普通线条,只需要在左侧面板设置即可。
      image
  • 功能:该有的都有,基础图形、填充、排列、组合等,满足大部分场景。另外还支持素材库添加收藏

使用方式

  • 在线注册使用
    • 有所限制,但功能更多
  • 本地部署
    • 比较自由且安全,但据说不支持远程协作
  • js嵌入
    • 这个模式应该是前端同学在一些项目中可能有用,但需要注意开源协议(本文不做深入拓展)

安装

本文主要介绍本地化部署的方式

  • 打开github
    https://github.com/excalidraw/excalidraw#local-installation 章节,介绍通过nodejs安装,yarn管理依赖和启动,流程比较简单,主要是依赖要装好,同时版本记得不要太高.
    我自己的版本分别为:

    yarn -v
    1.22.19
    node -v
    v18.5.0
    
  • 启动后,打开http://localhost:3000 就可以畅快的画画画了~

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

posted @ 2022-08-03 19:58  指尖挥舞  阅读(3277)  评论(0编辑  收藏  举报