Merge 0a377fde85 into 01304aac49

2025-04-14 16:40:58 -04:00 · 2025-04-14 17:12:31 +10:00 · 2025-04-14 17:12:31 +10:00 · a9c081343f
commit a9c081343f
parent 01304aac49 0a377fde85
1 changed files with 114 additions and 63 deletions
--- a/README.md
+++ b/README.md
@ -5,37 +5,36 @@
  </picture>
 </a>

+<h2 align="center">
+  ✨ Excalidraw - Collaborative Whiteboarding Made Easy ✨
+</h2>
+
+<p align="center">
+  <b>Excalidraw is a virtual collaborative whiteboard that lets you easily sketch diagrams that have a hand-drawn feel to them.</b>
+</p>
+
 <h4 align="center">
-  <a href="https://excalidraw.com">Excalidraw Editor</a> |
-  <a href="https://plus.excalidraw.com/blog">Blog</a> |
-  <a href="https://docs.excalidraw.com">Documentation</a> |
-  <a href="https://plus.excalidraw.com">Excalidraw+</a>
+  <a href="https://excalidraw.com">🎨 Excalidraw Editor</a> |
+  <a href="https://plus.excalidraw.com/blog">📝 Blog</a> |
+  <a href="https://docs.excalidraw.com">📚 Documentation</a> |
+  <a href="https://plus.excalidraw.com">➕ Excalidraw+</a>
 </h4>

-<div align="center">
-  <h2>
-    An open source virtual hand-drawn style whiteboard. </br>
-    Collaborative and end-to-end encrypted. </br>
-  <br />
-  </h2>
-</div>
-
-<br />
 <p align="center">
  <a href="https://github.com/excalidraw/excalidraw/blob/master/LICENSE">
-    <img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  />
+    <img alt="MIT License" src="https://img.shields.io/badge/license-MIT-blue.svg"  />
  </a>
  <a href="https://www.npmjs.com/package/@excalidraw/excalidraw">
-    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  />
+    <img alt="npm" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  />
  </a>
  <a href="https://docs.excalidraw.com/docs/introduction/contributing">
-    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
+    <img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
  </a>
  <a href="https://discord.gg/UexuTaE">
-    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
+    <img alt="Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
  </a>
  <a href="https://twitter.com/excalidraw">
-    <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
+    <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
  </a>
 </p>

@ -52,76 +51,128 @@
  </figure>
 </div>

-## Features
+## 📝 Table of Contents

-The Excalidraw editor (npm package) supports:
+- [🌟 Key Features](#-key-features)
+- [🚀 Getting Started](#-getting-started)
+  - [🌐 Excalidraw.com](#-excalidrawcom)
+  - [📦 NPM Package](#-npm-package)
+- [🤝 Contributing](#-contributing)
+- [👥 Who's Using Excalidraw?](#-whos-using-excalidraw)
+- [💖 Sponsors & Support](#-sponsors--support)
+- [🙌 Acknowledgements](#-acknowledgements)
+- [📜 License](#-license)

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

-## Excalidraw.com
+- 💯 **Free & Open-Source:** Excalidraw is completely free and open-source, giving you the freedom to use and customize it as per your needs.

-The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/excalidraw-app) is part of this repository as well, and the app features:
+- 🎨 **Infinite Canvas:** Unleash your creativity with an infinite canvas that allows you to expand your drawings in any direction.

- 📡&nbsp;PWA support (works offline).
- 🤼&nbsp;Real-time collaboration.
- 🔒&nbsp;End-to-end encryption.
- 💾&nbsp;Local-first support (autosaves to the browser).
- 🔗&nbsp;Shareable links (export to a readonly link you can share with others).
+- ✍️ **Hand-Drawn Style:** Give your diagrams and sketches a unique hand-drawn appearance with Excalidraw's distinctive visual style.

-We'll be adding these features as drop-in plugins for the npm package in the future.
+- 🌓 **Dark Mode:** Switch to dark mode for a more comfortable and visually appealing drawing experience, especially in low-light environments.

-## Quick start
+- 🌈 **Customizable:** Tailor Excalidraw to your preferences with customizable colors, fonts, and stroke styles.

-**Note:** following instructions are for installing the Excalidraw [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw) when integrating Excalidraw into your own app. To run the repository locally for development, please refer to our [Development Guide](https://docs.excalidraw.com/docs/introduction/development).
+- 📷 **Image Support:** Easily add images to your drawings and resize, rotate, or crop them as needed.

-Use `npm` or `yarn` to install the package.
+- 🖼️ **Export Options:** Export your drawings in various formats, including PNG, SVG, and JSON, for easy sharing and integration with other tools.
+
+- ⚒️ **Powerful Drawing Tools:** Access a wide range of drawing tools, including rectangles, circles, diamonds, arrows, lines, and free-form paths.
+
+- 🔗 **Arrow Binding:** Connect shapes with arrows that automatically adjust when the shapes are moved, making it easy to create flowcharts and diagrams.
+
+- 🔍 **Zoom & Pan:** Navigate large drawings effortlessly with smooth zooming and panning capabilities.
+
+- 🔙 **Undo/Redo:** Easily undo or redo actions, giving you the freedom to experiment and make changes without worry.
+
+- 💬 **Localization:** Excalidraw supports multiple languages, making it accessible to users worldwide.
+
+- 🖥️ **Excalidraw+:** Upgrade to Excalidraw+ for additional features like real-time collaboration, version history, and more.
+
+## 🚀 Getting Started
+
+### 🌐 Excalidraw.com
+
+The quickest way to start using Excalidraw is to visit [excalidraw.com](https://excalidraw.com). It's a fully-featured Progressive Web App (PWA) that works offline and supports real-time collaboration.
+
+### 📦 NPM Package
+
+To embed Excalidraw into your own application, you can install it via npm:

 ```bash
 npm install react react-dom @excalidraw/excalidraw
-# or
-yarn add react react-dom @excalidraw/excalidraw
 ```

-Check out our [documentation](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation) for more details!
+Then, import and use the Excalidraw component in your code:

-## Contributing
+```jsx
+import React from 'react';
+import Excalidraw from '@excalidraw/excalidraw';

- Missing something or found a bug? [Report here](https://github.com/excalidraw/excalidraw/issues).
- Want to contribute? Check out our [contribution guide](https://docs.excalidraw.com/docs/introduction/contributing) or let us know on [Discord](https://discord.gg/UexuTaE).
- Want to help with translations? See the [translation guide](https://docs.excalidraw.com/docs/introduction/contributing#translating).
+const App = () => {
+  return <Excalidraw />;
+};
+```

-## Integrations
+For more detailed instructions and advanced usage, refer to our [documentation](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation).

- [VScode extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor)
- [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw)
+## 🤝 Contributing

-## Who's integrating Excalidraw
+We welcome contributions from the community! Whether you have ideas, bug reports, or code improvements, we appreciate your help in making Excalidraw better. To get started, please follow our [contributing guidelines](https://docs.excalidraw.com/docs/introduction/contributing).

-[Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) • [Meta](https://meta.com/) • [CodeSandbox](https://codesandbox.io/) • [Obsidian Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) • [Replit](https://replit.com/) • [Slite](https://slite.com/) • [Notion](https://notion.so/) • [HackerRank](https://www.hackerrank.com/) • and many others
+Some key areas where we'd love your assistance include:

-## Sponsors & support
+- 🌍 [Translating](https://docs.excalidraw.com/docs/introduction/contributing#translating) Excalidraw into different languages.
+- 🐛 [Reporting bugs](https://github.com/excalidraw/excalidraw/issues) and helping us identify and fix issues.
+- 🛠️ [Contributing code](https://github.com/excalidraw/excalidraw/blob/master/CONTRIBUTING.md) to add new features, improve performance, or enhance the user experience.

-If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw) or use [Excalidraw+](https://plus.excalidraw.com/).
+Don't forget to join our [Discord community](https://discord.gg/UexuTaE) to connect with other contributors and stay updated on the latest developments!

-## Thank you for supporting Excalidraw
+## 👥 Who's Using Excalidraw?

-[<img src="https://opencollective.com/excalidraw/tiers/sponsors/0/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/0/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/1/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/1/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/2/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/2/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/3/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/3/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/4/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/4/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/5/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/5/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/6/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/6/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/7/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/7/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/8/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/8/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/9/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/9/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/10/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/10/website)
+Excalidraw is trusted by companies and projects of all sizes. Here are a few notable examples:

-<a href="https://opencollective.com/excalidraw#category-CONTRIBUTE" target="_blank"><img src="https://opencollective.com/excalidraw/tiers/backers.svg?avatarHeight=32"/></a>
+- [Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) uses Excalidraw for creating cloud architecture diagrams.
+- [Meta](https://meta.com/) utilizes Excalidraw for brainstorming and visualizing ideas.
+- [CodeSandbox](https://codesandbox.io/) integrates Excalidraw for sketching and planning within their online code editor.
+- [Obsidian](https://github.com/zsviczian/obsidian-excalidraw-plugin) has an Excalidraw plugin for taking notes and making sketches.
+- [Replit](https://replit.com/) incorporates Excalidraw for collaborative whiteboarding in their online coding environment.
+- [Slite](https://slite.com/) uses Excalidraw for team collaboration and visual communication.
+- [Notion](https://notion.so/) integrates Excalidraw for creating diagrams and sketches within their platform.
+- [HackerRank](https://www.hackerrank.com/) employs Excalidraw for creating coding challenge explanations and visualizations.

-Last but not least, we're thankful to these companies for offering their services for free:
+## 💖 Sponsors & Support
+
+If you find Excalidraw valuable and would like to contribute to its development and sustainability, please consider [sponsoring us on Open Collective](https://opencollective.com/excalidraw) or upgrading to [Excalidraw+](https://plus.excalidraw.com/). Your support helps us maintain and improve the project for the benefit of the entire community.
+
+We extend our heartfelt gratitude to our sponsors and supporters:
+
+[<img src="https://opencollective.com/excalidraw/tiers/sponsors.svg?avatarHeight=36"/>](https://opencollective.com/excalidraw#support)
+
+We also appreciate the companies providing free infrastructure and services:

 [![Vercel](./.github/assets/vercel.svg)](https://vercel.com) [![Sentry](./.github/assets/sentry.svg)](https://sentry.io) [![Crowdin](./.github/assets/crowdin.svg)](https://crowdin.com)
+
+## 🙌 Acknowledgements
+
+Excalidraw is made possible by the dedication and passion of our incredible [team](https://github.com/excalidraw/excalidraw/graphs/contributors) of contributors from around the world. We extend our sincere thanks to everyone who has contributed code, reported issues, provided feedback, and supported the project in any way.
+
+Special thanks to our core team members for their significant contributions and leadership:
+
+- [Lipis](https://github.com/lipis) - Project Lead
+- [Vjeux](https://github.com/vjeux) - Core Contributor
+- [Thibaut](https://github.com/thibautjombart) - Core Contributor
+- [Kiran](https://github.com/kiran-kumar-m) - Core Contributor
+- [Suchandra](https://github.com/suchandra) - Core Contributor
+
+## 📜 License
+
+Excalidraw is distributed under the [MIT License](https://github.com/excalidraw/excalidraw/blob/master/LICENSE). You are free to use, modify, and distribute the software as per the terms of this license.
+
+For more details, please refer to the [LICENSE](https://github.com/excalidraw/excalidraw/blob/master/LICENSE) file.
+
+---
+
+We hope this enhanced README provides a more comprehensive and informative overview of Excalidraw. Feel free to further customize it to highlight the unique aspects and strengths of your project. If you have any more questions or need further assistance, please let me know!