Excalidraw在線白板的搭建與使用

Excalidraw在線白板的搭建與使用 - 博客園

Excalidraw：在線白板

Excalidraw是一款非常輕量的在線白板工具，可以直接在瀏覽器打開，輕松繪制具有手繪風格的圖形。

比如可以繪制這樣的圖形：

手繪風格圖形

工具地址

https://excalidraw.com/ 但是最近這個地址好像被牆了，所以可以自己搭建本地環境的來使用。

主要功能

1. 瀏覽器直接打開，無需安裝；可以在任何設備上使用，比如電腦端、手機、平板電腦，只要在瀏覽器打開上述鏈接即可使用
2. Excalidraw支持最常用的圖形元素：方框、圓、菱形、連接線，可以方便的使用這些元素繪制簡潔的圖形

Docker部署

• 拉取項目，並進入到目錄

git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw/

• 修改docker-compose配置文件

  ports為要映射的端口號,此處修改為9006.其他配置根據自己的情況修改

  version: "3.8"
  services:
    excalidraw:
      build:
        context: .
        args:
          - NODE_ENV=development
      container_name: excalidraw
      ports:
        - "9006:80"
      restart: on-failure
      stdin_open: true
      healthcheck:
        disable: true
      environment:
        - NODE_ENV=development
      volumes:
        - ./:/opt/node_app/app:delegated
        - ./package.json:/opt/node_app/package.json
        - ./yarn.lock:/opt/node_app/yarn.lock
        - notused:/opt/node_app/app/node_modules
  volumes:
    notused:
  

• 編譯

  docker-compose up --build -d
  

普通模式部署

• 環境要求

  • Node.js
  • Yarn
  • Git

• 下拉代碼

  git clone https://github.com/excalidraw/excalidraw.git
  

• 安裝依賴

  yarn
  

• 啟動服務

  yarn start
  

• 開始訪問

  現在，您可以打開http://localhost:3000訪問本系統了

• 常用命令

  命令

  命令	描述
  yarn或yarn install	安裝依賴關系
  yarn start	運行項目
  yarn fix	與更漂亮的人一起修改所有文件
  yarn test	運行測試
  yarn test:update	更新測試快照
  yarn test:code	與更漂亮格式的測試
  yarn build	編譯項目

引入第三方庫

插件庫地址

編譯使用靜態代碼

• 拉取代碼

  git clone https://github.com/excalidraw/excalidraw.git
  

• 修改package.json文件

  // 修改之前
  "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build"
  // 修改之后
  "build:app": "react-scripts build",
  

  

• 安裝依賴

  yarn install
  

• 編譯

  yarn build
  

• 編譯之后會在項目下生成Build文件夾，該文件夾下就是的生成的靜態頁面。可以部署在Git Pages上。或者自己的服務器上面

  

  https://cuianbing.gitee.io/ 這是我部署在Gitee Pages上的頁面