liulongbin1314 / excalidraw-cn Goto Github PK

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。

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.

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.

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!

• Missing something or found a bug? Report here.
• Want to contribute? Check out our contribution guide or let us know on Discord.
• Want to help with translations? See the translation guide.

• VScode extension
• npm package

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

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

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