Virtual whiteboard for sketching hand-drawn like diagrams
Go to file
Aakansha Doshi e8def8da8d
feat: Support mermaid flowchart and sequence diagrams to excalidraw diagrams 🥳 (#6920)
* feat: integrate mermaidToExcalidraw

* create mermaid to excal dialog

* allow mermaid syntax and export in preview

* fix

* fix webpack config

* fix markdown error by using named export

* center preview

* set elements as selected when inserted onto canvas

* persist mermaid data to storage

* store canvas data in refs

* load mermaid lazily

* tweak design

* compute width, height correctly for arrows

* fix undefined vertex issue

* add mermaid icon in dropdown

* add a note in dialog

* reset preview when error

* show error in preview when error

* show mermaid error messgae react way

* design tweaks

* add example and docs link

* fix

* tweak design to remove scroll bar

* show a spinner unless mermaid loaded

* regenerate ids when needed via programmatic api, this makes sure for mermaid diagrams ids are regenerated

* tweak

* add option to transform viewport to scene coords in transform api

* make opts optional and use 100% zoom when inserting to canvas

* fix arrow bindings in safari and firefox

* fix elements insert position and viewport centering

* fix: Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.

* defer rendering the preview

* tweak text

* fix tests

* remove only

* make design responsive

* fix: show extra tools dropdown in mobile

* fix mobile css

* width auto

* upgrade mermaid-to-excalidraw

* don't pass appState in deps as its not used

* upgrade mermaid-to-excalidraw to fix firefox issue

* use types from mermaid-to-excalidraw

* upgrade mermaid-to-excalidraw

* use stable version of mermaid-to-excalidraw

* upgrade mermaid-to-excalidraw

* fix width of shapes toolbar for smaller screen size and also fix regression of mobile menu

* use i18n

* better api

* enable test coverage in ui

* Add tests

* use common utils to update and get text editor

* updgrade mermaid-to-excalidraw to support sequence diagrams

* fix test

* don't update arrow container height anytime in when redrawing text bounding box

* increase size limit

* increase size limit of vendor to 900kb

* use openDialog for mermaid

* upgrade mermaid-to-excalidraw

* update frame id post generation

* upgrade mermaid-to-excalidraw to add entity codes support

* update size limit

* upgrade mermaid-to-excalidraw package with frame api changes

* upgrade mermaid-to-excalidraw to remove directive and use config

* don't highlight mermaid tool and remove unused api setSelection

* stop using loading state to update text area

* move some styling to scss

* review fixes

* use modifiedTableIcon props and remove stale snap

* css

* dialog css

* fix snap

* use dialog border

* change mermaidToExcalidrawLib to state

* better styling of errors

* make modal bigger

* fix mobile

* update snaps

* fix icon color

* fix dark mode insert button color

* horizontally center spinner

* render canvas conditionally on loaded state

* rd tweaks

* tweak class names

* remove max height

* typo in example

* upgrade mermaid-to-excalidraw

* simplify error state

* fix height & overflow on vertical breakpoint

* fix lint

* show errors in overlay

* set textarea font family

* reduce opacity

* update snap

* upgrade to mermaid  0.1.2

---------

Co-authored-by: dwelle <luzar.david@gmail.com>
2023-11-03 17:41:34 +05:30
.codesandbox chore: update required node version to 18 (#6837) 2023-07-31 23:47:41 +02:00
.github feat: update logo (#6979) 2023-09-11 17:47:41 +02:00
.husky build: temporarily disable pre-commit (#6132) 2023-01-19 13:50:42 +01:00
dev-docs revert: remove bound-arrows from frames (#7190) 2023-10-25 10:39:19 +02:00
excalidraw-app feat: Support mermaid flowchart and sequence diagrams to excalidraw diagrams 🥳 (#6920) 2023-11-03 17:41:34 +05:30
firebase-project fix: update `storage.rules` (#5020) 2022-04-17 22:47:00 +02:00
public fix: Icon size in manifest (#7073) 2023-10-03 11:07:02 +02:00
scripts fix: use subdirectory for @excalidraw/excalidraw size limit (#6787) 2023-07-19 22:07:18 +05:30
src feat: Support mermaid flowchart and sequence diagrams to excalidraw diagrams 🥳 (#6920) 2023-11-03 17:41:34 +05:30
.dockerignore build: stops ignoring .env files from docker context so env variables get set during react app build. (#5809) 2022-11-07 16:48:38 +05:30
.editorconfig add editorconfig (#1198) 2020-04-03 19:19:01 +02:00
.env.development fix: export to plus url (#6980) 2023-09-11 21:13:16 +00:00
.env.production fix: export to plus url (#6980) 2023-09-11 21:13:16 +00:00
.eslintignore feat: image support (#4011) 2021-10-21 22:05:48 +02:00
.eslintrc.json chore: Update Typescript to 4.4.4 (#4188) 2021-11-02 14:24:16 +02:00
.gitattributes Add gitattributes (#2164) 2020-09-15 21:59:00 +02:00
.gitignore build: migrate to Vite 🚀 (#6818) 2023-07-27 23:50:11 +05:30
.lintstagedrc.js Keep errors, elements and comments consistent (#2340) 2020-11-05 18:06:18 +01:00
.npmrc feat: color picker redesign (#6216) 2023-05-18 16:06:27 +02:00
.nvmrc chore: update required node version to 18 (#6837) 2023-07-31 23:47:41 +02:00
.prettierignore Change target branch of coverage and pretty print (#1850) 2020-07-01 12:05:21 +03:00
.watchmanconfig Don't reset cache while zooming using a gesture (#1103) 2020-03-28 16:59:36 -07:00
CONTRIBUTING.md docs: migrating dev docs to docusaurus :) (#6073) 2023-02-01 19:57:54 +05:30
Dockerfile build: update to node 18 in docker (#6822) 2023-07-28 12:06:33 +05:30
LICENSE Add MIT License (#176) 2020-01-05 13:09:29 -08:00
README.md docs: add npm downloads rate badge to README.md file (#7127) 2023-11-01 13:27:57 +01:00
crowdin.yml Locale 2020-03-19 20:38:52 +02:00
docker-compose.yml chore: Update action versions and docker build (#3065) 2021-02-20 14:28:33 +00:00
index.html feat: update logo (#6979) 2023-09-11 17:47:41 +02:00
package.json feat: Support mermaid flowchart and sequence diagrams to excalidraw diagrams 🥳 (#6920) 2023-11-03 17:41:34 +05:30
tsconfig-types.json build: migrate to Vite 🚀 (#6818) 2023-07-27 23:50:11 +05:30
tsconfig.json refactor: move excalidraw-app outside src (#6987) 2023-09-21 09:28:48 +05:30
vercel.json feat: redirect vscode.excalidraw.com to vscode marketplace (#5285) 2022-06-23 17:42:50 +02:00
vite.config.ts fix: Icon size in manifest (#7073) 2023-10-03 11:07:02 +02:00
vitest.config.ts feat: Support mermaid flowchart and sequence diagrams to excalidraw diagrams 🥳 (#6920) 2023-11-03 17:41:34 +05:30
yarn.lock feat: Support mermaid flowchart and sequence diagrams to excalidraw diagrams 🥳 (#6920) 2023-11-03 17:41:34 +05:30

README.md

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.

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 CloudMetaCodeSandboxObsidian ExcalidrawReplitSliteNotionHackerRank • 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