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

news2025/1/9 5:57:31

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

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

excalidraw是什么?

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

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

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

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

为什么用 excalidraw

绘图工具还是很多,比如processon、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还提供了一个VScode 插件,可以直接在vscode里画图了。

项目信息

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1402189.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

美团RASP大规模研发部署实践总结

01 背景 RASP 是 Runtime Application Self-Protection&#xff08;运行时应用自我保护&#xff09;的缩写&#xff0c;是一种应用程序安全技术。RASP 技术能够在应用程序运行时检测并阻止应用级别的攻击。随着云计算和大数据的发展&#xff0c;应用程序安全越来越受到重视。其…

Postgresql的集群搭建与监控方案

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 相关文章&#xff1a; PostgreSQL学习之部署与简单使用 PostgreSQL的常见错误和解决方法 如果PostgreSQL有两层nginx代理&…

vue+elementui实现12个日历平铺,初始化工作日,并且可点击

<template><div class"app-container"><el-form :model"queryParams" ref"queryForm" size"small" :inline"true"><el-form-item label"年份" prop"holidayYear"><el-date-…

SQL 注入总结(详细)

一、前言 这篇文章是最近学习 SQL 注入后的笔记&#xff0c;里面整理了 SQL 常见的注入方式&#xff0c;供大家学习了解 SQL 注入的原理及方法&#xff0c;也方便后续自己回顾&#xff0c;如有什么错误的地方欢迎指出&#xff01; 二、判断注入类型 按照注入点类型分类 数字型…

精品基于Uniapp+springboot疫情资讯信息管理系统App-新闻

《[含文档PPT源码等]精品基于Uniappspringboot疫情信息管理系统App》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;Java 后台框架&#xff1a;springboot、ssm …

峰华卓立:iPaaS集成平台,全面加速推进企业数智化建设

01 企业介绍 峰华卓立&#xff08;证券代码&#xff1a;834914&#xff09;是一家聚焦于3DP&#xff08;粘结剂喷射技术&#xff09;打印装备的研发、制造、销售及应用服务为一体的综合性服务供应商&#xff0c;国家高新技术企业&#xff0c;行业专精特新企业&#xff0c;工业级…

JAVA RPC Thrift基操实现与微服务间调用

一、Thrift 基操实现 1.1 thrift文件 namespace java com.zn.opit.thrift.helloworldservice HelloWorldService {string sayHello(1:string username) }1.2 执行命令生成Java文件 thrift -r --gen java helloworld.thrift生成代码HelloWorldService接口如下 /*** Autogene…

进程内协同:原子操作、互斥、同步和通信的原理

进程内协同&#xff0c;简单来说&#xff0c;就是在一个进程内部&#xff0c;多个执行体&#xff08;如线程、协程&#xff09;如何共享资源&#xff0c;如何协同工作以完成一项任务。这涉及到一系列的机制和技术&#xff0c;包括原子操作、互斥、同步和通信等。 那么&#xf…

Opencv轮廓检测运用与理解

目录 引入 基本理解 加深理解 ①比如我们可以获取我们的第一个轮廓,只展示第一个轮廓 ②我们还可以用一个矩形把我们的轮廓给框出来 ③计算轮廓的周长和面积 引入 顾名思义,就是把我们图片的轮廓全部都描边出来 也就是我们在日常生活中面部识别的时候会有一个框,那玩意就…

C语言实战系列一:经典贪食蛇

C语言学习必须实战&#xff0c;并且学完语法后就必须立即用实战来巩固。一般需要10来个比较复杂的程序才能掌握C语言。今天就教大家第一个小程序&#xff0c;贪食蛇。 首先上代码 一、代码 #include <stdio.h> #include <stdlib.h> #include <curses.h> #…

windows用mingw(g++)编译opencv,并install安装

windows下用mingw编译opencv貌似不支持cuda&#xff0c;选cuda会报错&#xff0c;我无法解决&#xff0c;所以没选cuda&#xff0c;下面两种编译方式支持。 如要用msvc编译opencv&#xff0c;参考我另外一篇文章。 如要用Ubuntu编译opencv&#xff0c;参考我另外一篇文章http…

UE5 Windows打包时报错“SDK Not Found”解决方案

在Unreal Engine 5.0.3 Windows平台下打包时报错&#xff1a;“Windows的SDK未正常安装&#xff0c;而其是生成数据的必需项。请检查主工具栏中“启动“菜单SDK部分来更新SDK。” 解决方案&#xff1a; 1、打开 Visual Studio Installer&#xff0c;点击“修改”按钮&#xf…

时空预测网络ST-Resnet 代码复现

ST-ResNet&#xff08;Spatio-Temporal Residual Network&#xff09;是一种用于处理时空数据的深度学习模型&#xff0c;特别适用于视频、时间序列等具有时空结构的数据。下面是一个简单的使用PyTorch搭建ST-ResNet的示例代码。请注意&#xff0c;这只是一个基本的示例&#x…

Hadoop基本概论

目录 一、大数据概论 1.大数据的概念 2.大数据的特点 3.大数据应用场景 二、Hadoop概述 1.Hadoop定义 2.Hadoop发展历史 3.Hadoop发行版本 4.Hadoop优势 5.Hadoop1.x/2.x/3.x 6.HDFS架构 7.Yarn架构 8.MapReduce架构 9.大数据技术生态体系 一、大数据概论 1.大数…

【动态规划】【广度优先搜索】【状态压缩】847 访问所有节点的最短路径

作者推荐 视频算法专题 本文涉及知识点 动态规划汇总 广度优先搜索 状态压缩 LeetCode847 访问所有节点的最短路径 存在一个由 n 个节点组成的无向连通图&#xff0c;图中的节点按从 0 到 n - 1 编号。 给你一个数组 graph 表示这个图。其中&#xff0c;graph[i] 是一个列…

Java开发分析工具 JProfiler的详细使用方法解析(附 JProfiler for Mac许可证秘钥)

JProfiler 是一款功能强大的Java代码分析工具&#xff0c;JProfiler的直观UI可帮助您解决性能瓶颈&#xff0c;确定内存泄漏并了解线程问题且JProfiler Mac破解版配置会话非常简单&#xff0c;第三方集成使得入门变得轻而易举&#xff0c;并且以自然的方式呈现数据分析。 解…

AlmaLinux 8.9 安装图解

风险告知 本人及本篇博文不为任何人及任何行为的任何风险承担责任&#xff0c;图解仅供参考&#xff0c;请悉知&#xff01;本次安装图解是在一个全新的演示环境下进行的&#xff0c;演示环境中没有任何有价值的数据&#xff0c;但这并不代表摆在你面前的环境也是如此。生产环境…

C++ 知识列表【图】

举例C的设计模式和智能指针 当谈到 C 的设计模式时&#xff0c;以下是一些常见的设计模式&#xff1a; 工厂模式&#xff08;Factory Pattern&#xff09;&#xff1a;用于创建对象的模式&#xff0c;隐藏了对象的具体实现细节&#xff0c;只暴露一个公共接口来创建对象。 单例…

scanpy预处理总结

欢迎关注我们组的微信公众号&#xff0c;更多好文章在等你呦&#xff01; 微信公众号名&#xff1a;碳硅数据 公众号二维码&#xff1a; 记录一下关于scanpy preprocessing的结果 import scanpy as sc adata sc.read("/Users/yxk/Desktop/test_dataset/pbmc/pbmc.h5ad&…