mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
178 lines
9.2 KiB
Markdown
178 lines
9.2 KiB
Markdown
<a href="https://excalidraw.com/" target="_blank" rel="noopener">
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" alt="Excalidraw" srcset="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2_dark.png" />
|
||
<img alt="Excalidraw" src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2.png" />
|
||
</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>
|
||
</h4>
|
||
|
||
<p align="center">
|
||
<a href="https://github.com/excalidraw/excalidraw/blob/master/LICENSE">
|
||
<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" 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" />
|
||
</a>
|
||
<a href="https://discord.gg/UexuTaE">
|
||
<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="Twitter Follow" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
|
||
</a>
|
||
</p>
|
||
|
||
<div align="center">
|
||
<figure>
|
||
<a href="https://excalidraw.com" target="_blank" rel="noopener">
|
||
<img src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2Fproduct_showcase.png" alt="Product showcase" />
|
||
</a>
|
||
<figcaption>
|
||
<p align="center">
|
||
Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.
|
||
</p>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
## 📝 Table of Contents
|
||
|
||
- [🌟 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)
|
||
|
||
## 🌟 Key Features
|
||
|
||
- 💯 **Free & Open-Source:** Excalidraw is completely free and open-source, giving you the freedom to use and customize it as per your needs.
|
||
|
||
- 🎨 **Infinite Canvas:** Unleash your creativity with an infinite canvas that allows you to expand your drawings in any direction.
|
||
|
||
- ✍️ **Hand-Drawn Style:** Give your diagrams and sketches a unique hand-drawn appearance with Excalidraw's distinctive visual style.
|
||
|
||
- 🌓 **Dark Mode:** Switch to dark mode for a more comfortable and visually appealing drawing experience, especially in low-light environments.
|
||
|
||
- 🌈 **Customizable:** Tailor Excalidraw to your preferences with customizable colors, fonts, and stroke styles.
|
||
|
||
- 📷 **Image Support:** Easily add images to your drawings and resize, rotate, or crop them as needed.
|
||
|
||
- 🖼️ **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
|
||
```
|
||
|
||
Then, import and use the Excalidraw component in your code:
|
||
|
||
```jsx
|
||
import React from 'react';
|
||
import Excalidraw from '@excalidraw/excalidraw';
|
||
|
||
const App = () => {
|
||
return <Excalidraw />;
|
||
};
|
||
```
|
||
|
||
For more detailed instructions and advanced usage, refer to our [documentation](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation).
|
||
|
||
## 🤝 Contributing
|
||
|
||
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).
|
||
|
||
Some key areas where we'd love your assistance include:
|
||
|
||
- 🌍 [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.
|
||
|
||
Don't forget to join our [Discord community](https://discord.gg/UexuTaE) to connect with other contributors and stay updated on the latest developments!
|
||
|
||
## 👥 Who's Using Excalidraw?
|
||
|
||
Excalidraw is trusted by companies and projects of all sizes. Here are a few notable examples:
|
||
|
||
- [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.
|
||
|
||
## 💖 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:
|
||
|
||
[](https://vercel.com) [](https://sentry.io) [](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!
|