Excalidraw, 一款超贊的開(kāi)源白板工具

作者：徐小夕 2024-02-23 08:13:25

接下來(lái)我會(huì)和大家介紹一下這款開(kāi)源項(xiàng)目的功能特點(diǎn), 如何二次開(kāi)發(fā), 以及如何使用我改造好的成品快速部署到自己的服務(wù)器上。

今天和大家安利一款超贊的開(kāi)源項(xiàng)目, 基于這個(gè)項(xiàng)目我們可以輕松定制自己的白板, 思維導(dǎo)圖, 原型草圖設(shè)計(jì), 流程圖工具等, 它就是——Excalidraw。

效果演示:

在線(xiàn)地址: https://board.dooring.vip。

開(kāi)源地址: https://gitee.com/lowcode-china/excalidraw-mini。

功能介紹

首先 Excalidraw 的技術(shù)棧采用 Vite + React + TypeScript + Yarn + Husky, 目前開(kāi)源 star 已經(jīng)有 66k+, 還是非常受開(kāi)發(fā)者喜歡的。

這里先介紹一下我使用完這款開(kāi)源項(xiàng)目的一個(gè)功能總結(jié):

支持手繪風(fēng)格的草圖設(shè)計(jì)
支持流程圖, 思維導(dǎo)圖的設(shè)計(jì)
支持多人協(xié)同
支持會(huì)議白板, 激光筆標(biāo)注
支持多種導(dǎo)出格式
支持二次開(kāi)發(fā)

雖然這款工具界面設(shè)計(jì)的非常簡(jiǎn)潔, 但是卻可以做出非常精美的作品, 比如架構(gòu)圖(Dooring的架構(gòu)就是用它畫(huà)的~):

業(yè)務(wù)流程 & 設(shè)計(jì)思路。

思維導(dǎo)圖:

當(dāng)然我們還能發(fā)揮想象, 應(yīng)用在更多的場(chǎng)景. 我之前寫(xiě)的很多技術(shù)文章里的架構(gòu)圖, 流程圖, 都是用它來(lái)設(shè)計(jì)的, 偶爾也會(huì)用它來(lái)設(shè)計(jì)一下產(chǎn)品草圖, 非常方便。

二次開(kāi)發(fā)

接下來(lái)就到了技術(shù)小伙伴最關(guān)注的環(huán)節(jié)了,如何使用它, 二次開(kāi)發(fā)自己的白板應(yīng)用。

安裝

首先我們需要在自己的項(xiàng)目里安裝它:

yarn add react react-dom @excalidraw/excalidraw

接下來(lái)寫(xiě)一個(gè)簡(jiǎn)單的demo:

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

預(yù)覽效果如下:

當(dāng)然如果覺(jué)得它默認(rèn)的主題色不符合自己的業(yè)務(wù)場(chǎng)景, 我們還能自定義主圖風(fēng)格:

.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 組件還提供了很多自定義的屬性, 可以讓我們輕松擴(kuò)展和定制, 比如我們想擴(kuò)展右側(cè)功能按鈕, 可以用如下的代碼:

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

這里我們用到了它的 renderTopRightUI 屬性, 類(lèi)型是一個(gè)函數(shù), 我們?cè)诤瘮?shù)里返回我們想要定制的組件按鈕即可, 效果如下: