/excalidraw-cn

彬哥魔改的、支持中文手写体和自定义激光笔颜色的 Excalidraw。

Primary LanguageTypeScriptMIT LicenseMIT

Excalidraw

Excalidraw Editor | Blog | Documentation | Excalidraw+

An open source virtual hand-drawn style whiteboard.
Collaborative and end-to-end encrypted.


Excalidraw is released under the MIT license. npm downloads/month PRs welcome! Chat on Discord Follow Excalidraw on Twitter

Product showcase

Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.

彬哥自定义的功能

在线体验魔改后的 excalidraw。

自定义激光笔颜色

打开浏览器的调试工具（Chrome 快捷键 Ctrl + Shift + I），切换到 Application 面板下的 Local storage 工具，选中 https://excalidraw.escook.cn/ 域名，在其下新增 laser-pointer-color: #ff00ff 选项。配置完成后刷新浏览器即可生效。

支持的颜色：

  • 浏览器支持的颜色别名（举例：red、green）
  • 十六进制或带透明度的十六进制颜色值（举例：#2b4b6b、#2b4b6b45）
  • RGB 或 RGBA 的颜色值（举例：rgb(23, 111, 200)、rgba(23, 111, 200, 0.5)）

自定义中/英文手写体

若想自定义英文手写体的字体，请替换 public 目录下的 Virgil.woff2 字体文件。

若想自定义中文手写体的字体，请替换 public 目录下的 Zhushiti.ttf 字体文件。

注意：在替换字体文件时，必须保证替换后的字体文件名为 Virgil.woff2 和 Zhushiti.ttf，因为系统在加载字体时，字体的文件名是写死的。

其它注意事项

  1. 由于项目配置了代码 lint 插件，因此在修改项目代码的时候，字符串必须使用双引号表示；
  2. 运行 yarn fix 命令，可以修复代码格式上的问题；
  3. 运行 yarn start 命令，即可启动开发调试；
  4. 运行 yarn build 命令，即可启动发布部署，如果发布成功，会在项目根目录生成 build 文件夹；
  5. 新版的 Excalidraw 取消了多画布功能（小气了不是），如果您想使用多画布功能，点此使用旧版的 Excalidraw。

Features

The Excalidraw editor (npm package) supports:

  • 💯 Free & open-source.
  • 🎨 Infinite, canvas-based whiteboard.
  • ✍️ Hand-drawn like style.
  • 🌓 Dark mode.
  • 🏗️ Customizable.
  • 📷 Image support.
  • 😀 Shape libraries support.
  • 👅 Localization (i18n) support.
  • 🖼️ Export to PNG, SVG & clipboard.
  • 💾 Open format - export drawings as an .excalidraw json file.
  • ⚒️ Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
  • ➡️ Arrow-binding & labeled arrows.
  • 🔙 Undo / Redo.
  • 🔍 Zoom and panning support.

Excalidraw.com

The app hosted at excalidraw.com is a minimal showcase of what you can build with Excalidraw. Its source code is part of this repository as well, and the app features:

  • 📡 PWA support (works offline).
  • 🤼 Real-time collaboration.
  • 🔒 End-to-end encryption.
  • 💾 Local-first support (autosaves to the browser).
  • 🔗 Shareable links (export to a readonly link you can share with others).

We'll be adding these features as drop-in plugins for the npm package in the future.

Quick start

Install the Excalidraw npm package:

npm install react react-dom @excalidraw/excalidraw

or via yarn

yarn add react react-dom @excalidraw/excalidraw

Don't forget to check out our Documentation!

Contributing

Integrations

Who's integrating Excalidraw

Google Cloud • Meta • CodeSandbox • Obsidian Excalidraw • Replit • Slite • Notion • HackerRank • and many others

Sponsors & support

If you like the project, you can become a sponsor at Open Collective or use Excalidraw+.

Thank you for supporting Excalidraw

Last but not least, we're thankful to these companies for offering their services for free:

Vercel Sentry Crowdin