Excalidraw, 一款超赞的开源白板工具

简介: Excalidraw, 一款超赞的开源白板工具

今天和大家安利一款超赞的开源项目, 基于这个项目我们可以轻松定制自己的白板, 思维导图, 原型草图设计, 流程图工具等, 它就是——Excalidraw.

image.png

接下来我会和大家介绍一下这款开源项目的功能特点, 如何二次开发, 以及如何使用我改造好的成品快速部署到自己的服务器上.

效果演示:

image.png

在线地址: https://board.dooring.vip

开源地址: https://gitee.com/lowcode-china/excalidraw-mini

功能介绍

首先 Excalidraw 的技术栈采用 Vite + React + TypeScript + Yarn + Husky, 目前开源 star 已经有 66k+, 还是非常受开发者喜欢的.

这里先介绍一下我使用完这款开源项目的一个功能总结:

  • 支持手绘风格的草图设计
  • 支持流程图, 思维导图的设计
  • 支持多人协同
  • 支持会议白板, 激光笔标注
  • 支持多种导出格式
  • 支持二次开发

虽然这款工具界面设计的非常简洁, 但是却可以做出非常精美的作品, 比如架构图(Dooring的架构就是用它画的~):

image.png

业务流程 & 设计思路

image.png

思维导图:

image.png

当然我们还能发挥想象, 应用在更多的场景. 我之前写的很多技术文章里的架构图, 流程图, 都是用它来设计的, 偶尔也会用它来设计一下产品草图, 非常方便.

二次开发

接下来就到了技术小伙伴最关注的环节了,如何使用它, 二次开发自己的白板应用.

安装

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

yarn add react react-dom @excalidraw/excalidraw

接下来写一个简单的demo:

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

预览效果如下:

image.png

当然如果觉得它默认的主题色不符合自己的业务场景, 我们还能自定义主图风格:

.custom-styles .excalidraw {
  --color-primary: #fcc6d9;
  --color-primary-darker: #f783ac;
  --color-primary-darkest: #e64980;
  --color-primary-light: #f2a9c4;
}
.custom-styles .excalidraw.theme--dark {
  --color-primary: #d494aa;
  --color-primary-darker: #d64c7e;
  --color-primary-darkest: #e86e99;
  --color-primary-light: #dcbec9;
}

excalidraw 组件还提供了很多自定义的属性, 可以让我们轻松扩展和定制, 比如我们想扩展右侧功能按钮, 可以用如下的代码:

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw
        renderTopRightUI={() => {
          return (
            <button
              style={{
                background: "#70b1ec",
                border: "none",
                color: "#fff"
              }}
              onClick={() => 
              window.location.href = 'https://dooring.vip'
              }
            >
              H5制作
            </button>
          );
        }}
      />
    </div>
  );
}

这里我们用到了它的 renderTopRightUI 属性, 类型是一个函数, 我们在函数里返回我们想要定制的组件按钮即可, 效果如下:

image.png

当然还有很多可定制的属性, 大家也可以自行探索, 我把我自己定制好的一套白板发布到 gitee 上了, 包括中文支持, 欢迎页面, 页面控件等, 感兴趣的也可以直接基于我的项目二次开发. 如下:

image.png

在线地址: https://board.dooring.vip

开源地址: https://gitee.com/lowcode-china/excalidraw-mini

目录
打赏
0
0
0
0
22
分享
相关文章
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
UI-TARS Desktop 是一款基于视觉语言模型的 GUI 代理应用,支持通过自然语言控制电脑操作,提供跨平台支持、实时反馈和精准的鼠标键盘控制。
1589 17
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
JSF 富文本编辑器横空出世,如魔法神器开启震撼富文本输入之旅!
【8月更文挑战第31天】在现代Web应用中,用户常需输入带样式、颜色及图片等功能的富文本。为此,JSF可集成如CKEditor等富文本编辑器,提供强大输入体验。首先选择合适编辑器并下载引入库文件,使用`&lt;textarea&gt;`与JavaScript实例化编辑器。后台通过`value`属性获取内容。此外,还需配置编辑器选项、处理特殊字符和进行充分测试以确保稳定性和安全性,提升用户体验。
81 1
|
11月前
盘点效率工具RunFlow那些容易被忽略的功能
RunFlow隐藏实用功能一览:固定工作窗口、预览菜单、浏览器直接打开剪贴板URL、多行输入(Ctrl+Enter换行)、固定结果展示。提升效率,从发现这些小窍门开始。
65 4
技术经验解读:【Unity3d游戏开发】UGUI插件入门之游戏菜单
技术经验解读:【Unity3d游戏开发】UGUI插件入门之游戏菜单
53 0
猿创征文|工具百宝箱-编辑器-笔记工具-日常小工具-原型设计工具
猿创征文|工具百宝箱-编辑器-笔记工具-日常小工具-原型设计工具
120 0
码农必备的8大工具神器:在线图片压缩超好用!
Hello,新人初到,给大家分享整理了作为新手码农,我最近很爱用的8个工作必备神器网站,解决你可能遇到的各种问题
码农必备的8大工具神器:在线图片压缩超好用!
这个高颜值的开源第三方网易云音乐播放器你值得拥有
有没有一个既简洁纯粹,颜值又高的网易云音乐播放器呢,答案是有的,它就是:YesPlayMusic,一个开源的第三方实现。
1209 0
这个高颜值的开源第三方网易云音乐播放器你值得拥有
我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器(开源)
我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器(开源)
我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器(开源)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等