⭐⭐⭐ Spring Boot 项目实战 ⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》 《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》 《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》 《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》 《Java 面试题 + Java 学习指南》

摘要: 原创出处 极客之家 「丛林」欢迎转载,保留摘要,谢谢!


🙂🙂🙂关注微信公众号:【芋道源码】有福利:

  1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
  2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
  3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
  4. 新的源码解析文章实时收到通知。每周更新一篇左右。
  5. 认真的源码交流微信群。

我们经常需要在工作和学习中绘制图表、流程图或架构图。虽然市面上有大量绘图工具,但大多数要么过于复杂,要么缺乏个性。今天给大家推荐一款很强的画图神器 —— Excalidraw。

简介

Excalidraw是一款基于浏览器的开源绘图工具,它可以让你创建具有手绘风格的图表、线框图或任何你能想到的图形。

功能特性

  • 无限的画布空间,让你的思维自由翱翔
  • 多种工具选择:矩形、圆形、菱形、箭头、线条、自由绘制、橡皮擦等
  • 多格式导出:支持PNG、SVG和剪贴板导出
  • 深色模式,保护你的眼睛的同时也更显时尚
  • 图像支持,可以在图中插入外部图片
  • 本地化支持,包括多语言界面
  • 自定义图形库,扩展你的创意工具箱

技术亮点

现代技术栈

Excalidraw采用Vite + React + TypeScript的技术组合,确保了开发的效率和代码的质量。

协同编辑

Excalidraw支持实时协作功能,多人可以共同在一个画布上绘制,方便团队成员进行讨论和创意交流。结合端到端加密技术,既保证了协作的便利性,又确保了数据的安全。

渐进式Web应用

Excalidraw.com网站是一个PWA(渐进式网络应用),支持离线工作,这意味着你可以在没有互联网连接的情况下继续创作。

使用教程

在线使用

最简单的方法是访问官方网站https://excalidraw.com 立即开始绘制,无需注册或安装。

集成到自己的项目

首先我们需要在自己的项目里安装它:

yarn add react react-dom @excalidraw/excalidraw

接下来写一个简单的demo:

function App() {
return (
<>
<h1 style={{ textAlign: "center" }}>Dooring Exampl</h1>
<div style={{ height: "500px" }}>
<Excalidraw />
</div>
</>
);
}

预览效果如下:

界面预览

业务流程 & 设计思路:

思维导图:

保存图片:

素材库:

技术方案设计:

开源地址

https://github.com/excalidraw/excalidraw

文章目录
  1. 1. 简介
  2. 2. 功能特性
  3. 3. 技术亮点
    1. 3.1. 现代技术栈
    2. 3.2. 协同编辑
    3. 3.3. 渐进式Web应用
  4. 4. 使用教程
    1. 4.1. 在线使用
    2. 4.2. 集成到自己的项目
  5. 5. 界面预览
  6. 6. 开源地址