Excalidraw
开源虚拟手绘风格白板。协作式、端到端加密。
一个开源的虚拟手绘式白板。协作性和端到端加密。
创建漂亮的手绘图,线框图,或任何你喜欢的。
功能介绍
Excalidraw 编辑器(npm 包)支持:
- 💯 免费和开源。
- 🎨 无限的、基于画布的白板。
- ✍️ 像手绘的风格。
- 🌓 黑暗模式。
- 🏗️ 可定制。
- 📷 图像支持。
- 😀 形状库支持。
- 👅 本地化(i18n)支持。
- 🖼️ 输出到 PNG、SVG 和剪贴板。
- 💾 开放格式--以 .excalidraw json 文件导出图纸。
- ⚒️ 广泛的工具 - 矩形、圆形、菱形、箭头、直线、自由绘制、橡皮擦...
- ➡️ 箭头绑定和标记的箭头。
- 🔙 撤销/重做。
- 🔍 支持缩放和平移。
Excalidraw.com
excalidraw.com 上的应用程序是一个最小的展示,展示了你可以用 Excalidraw 建立什么。它的源代码也是这个资源库的一部分,该应用的特点是:
- 📡 支持PWA(离线工作)。
- 🤼 实时协作。
- 🔒 端到端加密。
- 💾 本地优先支持(自动保存到浏览器)。
- 🔗 可共享链接(导出为只读链接,可与他人共享)。
我们将在未来把这些功能作为 npm 包的插入式插件来添加。
快速启动
安装 Excalidraw npm 包。
npm install react react-dom @excalidraw/excalidraw
或者通过 yarn
yarn add react react-dom @excalidraw/excalidraw
不要忘记查看我们的文档。
运行代码
代码沙盒
- 访问 https://codesandbox.io/s/github/excalidraw/excalidraw
- 你可能需要用 Github 登录,然后重新加载页面。
- 您可以立即开始编码,甚至可以从那里发送 PR!
本地安装
这些说明会让你在你的本地机器上得到一个项目的副本,并在你的本地机器上运行,用于开发和测试。
克隆 Repo
git clone https://github.com/excalidraw/excalidraw.git
命令
命令 | 描述 |
---|---|
npm install |
安装依赖 |
npm start |
运行项目 |
npm run fix |
用 Prettier 重新格式化所有文件 |
npm test |
运行测试 |
npm run test:update |
快照更新测试 |
npm run test:code |
用 Prettier 测试格式化 |
Docker Compose
如果不想设置Node.js env,可以使用docer -compose在本地处理excalidraw。
docker-compose up --build -d
自我托管(Self hosting)
我们在 excalidraw/excalidraw 发布了一个带有 Excalidraw 客户端的 Docker 镜像。你可以用它在自己的域名下、Kubernetes、AWS ECS 等平台上自助托管自己的客户端。
docker build -t excalidraw/excalidraw docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:last
Docker 镜像不含分析和其他跟踪库。
目前,自助托管自己的实例不支持共享或协作功能。
我们正在努力为自托管自己的 Excalidraw 提供一个完整的解决方案。
贡献
欢迎提出拉请求。对于重大的改动,请先打开一个问题来讨论你想改动的内容。
翻译
要将 Excalidraw 翻译成其他语言,请访问 我们的 Crowdin 页面。要添加新的语言,请打开一个问题,这样我们就可以先在我们的终端上进行设置。
如果翻译的完成度超过一定的阈值(目前为85%),就可以在应用上使用。
Excalidraw 是使用这些超棒的工具构建的。
而启动这个项目的主要灵感来源就是厉害的 Zwibbler 应用。