盘天下 | 精选资源分享

想画出高颜值的流程图,试试这个手绘风开源白板

编程开发 2024-11-22 914 0

工作 中总是少不了要画画图,不管是 开发 中绘制流程图,还是 设计 系统时画出架构图,一款趁手的 工具 总是少不了。今天我们就来聊聊画图的白板工具。

今天我们推荐的推荐的项目帮你画出手绘风的高颜值图标,目前在 GitHub 已超过 66K Star,它就是:e x calidraw

想画出高颜值的流程图,试试这个手绘风开源白板

ex calidraw 是什么?

Excalidraw 是一个虚拟白板应用,专门用于绘制类似手绘的图表。它提供了一个无限的、基于画布的白板,具有手绘风格,支持多种功能。

想画出高颜值的流程图,试试这个手绘风开源白板

Excalidraw 具备轻量级、易用、美观、安全、协作等能力,非常适合用于技术文章配图、 思维 导图、架构图、流程图等场景。Excalidraw 编辑器提供的能力包括:

  • 免费且开源。
  • 无限的、基于画布的白板。
  • ✍️类似手绘的风格。
  • 黑暗模式。
  • ️可定制。
  • 图片支持。
  • 形状库支持。
  • 本地化(i18n)支持。
  • ️ 导出为 PNG、SVG 和剪贴板。
  • 开放格式 R 11 ; 将图纸导出为.excalidraw
  • json 文件。
  • ⚒️ 多种工具 – 矩形、圆形、菱形、箭头、线条、 自由 绘制、橡皮擦 …
  • ➡️ 箭头绑定和标记箭头。
  • 撤消 / 重做。
  • 缩放和平移支持。

下面是它的 GitHub star 历史 ,Excalidraw 在绘图工具圈里起步算是比较晚的,但是可以看出发展还是非常快的。

想画出高颜值的流程图,试试这个手绘风开源白板

为什么用 excalidraw

绘图工具还是很多,比如 pro cesson、PlantUML、Draw.io,之前我也一直在用 Draw.io 画图,来说说 excalidraw 对比同类的特点:

  • 手绘风:excalidraw 主打的第一点就是手绘风格,从呈现来说,我 个人 觉得更好看一些。
  • 易于集成:excalidraw 可以很容易的集成进你的 app ,也提供多种集成插件方便开发过程。
  • 快速上手:使用上和主流产品基本一致,可以无成本快速上手使用。
  • 协作:支持团队协作
  • 安全:支持端到端的加密,保障数据安全。

使用 excalidraw

在线 环境

首先 Excalidraw 还提供了在线的环境方便用户快速上手,地址如下:https://excalidraw.com/

进入后直接就可以开始画图,连登录什么的都不需要,不扫码、不要验证码,真是要好评一个。

想画出高颜值的流程图,试试这个手绘风开源白板

顶部的工具栏是可以直接按数字键来切换的,细节拉满。

想画出高颜值的流程图,试试这个手绘风开源白板

也有一些小小的不适应,就是 Draw.io 的框里可以直接加 文字 ,在这里是创建一个文本,我一开始还奇怪字怎么歪了。

想画出高颜值的流程图,试试这个手绘风开源白板

点击右侧可以打开素材库,自己画的内容就是自己的素材,还可以去素材库添加素材

想画出高颜值的流程图,试试这个手绘风开源白板

想画出高颜值的流程图,试试这个手绘风开源白板

加了一些图标进来,还是用现成的素材省事。除了基本的素材,也有模版,可以自己翻一番。

想画出高颜值的流程图,试试这个手绘风开源白板

可以将自己的画作保存下来,或者也可以分享给其他同伴来协同工作。怎么样我画图还不错吧,这个也是个模版。

想画出高颜值的流程图,试试这个手绘风开源白板

自己部署

项目支持 docker 运行也支持源码运行:

源码的话,前提要确认已经安装好 nodejs,接下来:

 下载代码
git  clone  <https:// github .com/excalidraw/excalidraw.git>

安装
yarn

启动
yarn start

现在可以打开 http://localhost:3000 并开始使用

想画出高颜值的流程图,试试这个手绘风开源白板

docker 的话:

可以在源码中构建 docker image

docker build -t excalidraw/excalidraw .

也可以直接从 dockerhub 拉

docker pull excalidraw/excalidraw

总之获取镜像之后,启动就可以了。

docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest

最后 excalidraw 还提供了一个 VS code 插件,可以直接在 vscode 里画图了。

想画出高颜值的流程图,试试这个手绘风开源白板

项目信息

  • 项目名称:excalidraw
  • GitHub 链接:https://github.com/excalidraw/excalidraw
  • Star 数:66K+
闲趣赚

转载请注明出处,本文链接:https://pantx.cn/25338.html

(0)
收藏 (0)

评论列表