ExcaliDash：带管理面板的Excalidraw

发表于 分类于 Waline： 阅读次数： 本文字数： 2.2k 阅读时长 ≈ 2 分钟
ExcaliDash 是一个自托管的仪表盘和组织器，专为 Excalidraw 设计，提供实时协作功能。

简介

什么是 ExcaliDash？

ExcaliDash 是一个自托管的仪表盘和组织工具，专为 Excalidraw 设计，提供实时协作功能，增强了团队协作和文档管理的能力。ExcaliDash 还提供了一个持久化存储所有绘图的环境，允许用户搜索、拖放绘图到集合中，并支持导入导出以进行备份。

主要特点

  • 持久化存储：所有绘图都可以存储和管理，确保用户可以随时访问自己的作品；
  • 实时协作：支持多用户实时编辑和更新绘图内容，提升团队协作效率；
  • 绘图搜索：方便用户快速查找和定位所需的绘图，有效管理大量文档；
  • 拖放组织：提供拖放功能，可以将绘图归入不同的集合（文件夹），优化组织方式;
  • 导入/导出：允许导入和导出绘图及数据库，以便于数据备份和迁移；
  • 用户友好的界面：现代响应式设计，适应各种设备，无缝操作体验；
  • 容器化部署：支持 Docker 部署，简化安装和管理流程，提升可移植性；

应用场景

  • 团队协作：团队成员可以共同创建和编辑图表、线框图和草图，推动项目进展；
  • 个人项目：个人用户可以快速记录和整理创意，使用 Excalidraw 绘制图形和概念；
  • 教育培训：教师和学生可以利用该工具进行互动教学，增强参与感和学习效果；
  • 设计和规划：设计师可以使用 ExcaliDash 生成思维导图、流程图和其他设计原型，以可视化思路和方案；

ExcaliDash 是一个强大的工具，为需要集成和管理 Excalidraw 绘图的用户提供了丰富的功能和便利。

安装

在群晖上以 Docker 方式安装。

采用 docker-compose 安装，将下面的内容保存为 docker-compose.yml 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
services:
  backend:
    image: zimengxiong/excalidash-backend:latest
    container_name: excalidash-backend
    restart: unless-stopped
    volumes:
      - ./data:/app/prisma
    environment:
      - DATABASE_URL=file:/app/prisma/dev.db
      - PORT=8000
      - NODE_ENV=production
    healthcheck:
      test:
        [
          "CMD",
          "node",
          "-e",
          "require('http').get('http://localhost:8000/health', (r) => process.exit(r.statusCode === 200 ? 0 : 1))",
        ]
      interval: 30s
      timeout: 10s
      retries: 3

  frontend:
    image: zimengxiong/excalidash-frontend:latest
    container_name: excalidash-frontend
    restart: unless-stopped
    ports:
      - "6767:80"
    environment:
      - VITE_API_URL=/api
    depends_on:
      - backend
    healthcheck:
      test:
        [
          "CMD",
          "wget",
          "--quiet",
          "--tries=1",
          "--spider",
          "http://localhost:80",
        ]
      interval: 30s
      timeout: 10s
      retries: 3

然后通过 SSH 登录到您的群晖，执行下面的命令：

1
2
3
4
5
6
7
8
9
10
# 新建文件夹 excalidash 和 子目录
mkdir -p /volume1/docker/excalidash/data

# 进入 excalidash 目录
cd /volume1/docker/excalidash

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:6767 就能看到 ExcaliDash 的主界面

点右上角的 New Drawing，新建一个绘画

在其他地方打开实例，会显示不同的用户，可以同时协作编辑

返回到主界面会看到实例的缩略预览

官方有个动图，演示了 ExcaliDash 的主要功能

参考文档

ZimengXiong/ExcaliDash: A self hosted dashboard and organizer for Excalidraw with live collaboration.
地址：https://github.com/ZimengXiong/ExcaliDash

Locally hosted Excalidraw organizer/dashboard with persistence and live collab : r/selfhosted
地址：https://www.reddit.com/r/selfhosted/comments/1p4604t/locally_hosted_excalidraw_organizerdashboard_with/