8 ms·

Excalidraw whiteboard – easily sketch diagrams with a hand-drawn feel

241 points by dragonsh 6y ago

Terretta 6y ago
> Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them In general, don’t whiteboard sketches have a hand-drawn feel? Seems like the trick would be a tool to give diagramming tools a hand-drawn whiteboard sketch feel, or take hand-drawn whiteboard sketches and give them a diagramming feel. Could be neat to put this engine behind e.g. graphviz/dot, for instance, a la “sketch viz”: https://sketchviz.com/new https://sketchviz.com/new Or for the real parlor trick, emit a literally hand drawn whiteboard sketch in dot! PS. Many contributions to graphviz needed: https://graphviz.gitlab.io/doc/todo.html https://graphviz.gitlab.io/doc/todo.html
- ghaff 6y ago
  Nirvana for me is a tool that takes my really sloppy sketches and writing and converts it to something that looks like an actual sketch artist drew it. Maybe pick different styles. No idea how one would go about doing that though. (TBH, it would probably be a case of it being better to just hire an artist.)
  - TheRealWatson 6y ago
    Some of these tools do exactly that. I draw my gross arcs, lines, ovals, rectangles and it renders much nicer ones, that feels like someone with way better motor skills had drawn it. I know Freehand does that.
    - ghaff 6y ago
      I should probably look again. When I went through various tablet tools a few years back I didn't see anything that really did it for me. But I should probably take another look.
  - pc86 6y ago
    Do people still use dribbble? If you can find a style there you like I'm willing to bet it would be more affordable than you'd think. I've always been surprised by the affordability of one-off graphic requests like these.
    - ghaff 6y ago
      I'm not surprised. And I have a couple people at work who I could always ask for a favor for a given project. There's just a certain amount of friction with bringing a person in; it's not so much about the cost.
- dahart 6y ago
  > In general, don’t whiteboard sketches have a hand-drawn feel? Whiteboard sketches on a physical whiteboard do, but in general, computer “whiteboard” sketches are a mixed bag that IMO land more often on the side of straight lines and perfect circles, especially if you look around at which computer whiteboard products are commercially successful. > Seems like the trick would be a tool to give diagramming tools a hand-draw whiteboard sketch feel, or take hand-drawn whiteboard sketches and give them a diagramming feel. Here’s one example of the former: https://matplotlib.org/xkcd/examples/showcase/xkcd.html https://matplotlib.org/xkcd/examples/showcase/xkcd.html The latter, converting sketches to diagrams, would be neat and is an interesting & difficult problem. The thing that neither of these use-cases really cover is the need for a fast iteration / ideation tool in the exact same role as a physical whiteboard. Once you’re concerned about the presentation & look, the majority of time is spent working on the layout and the presentation because it takes longer to make it pretty than to just work out or communicate an idea without regard to beauty. Very small changes to where something goes or what it looks like can lead to a large and time-consuming ‘refactor’ of a diagram.
EwanToo 6y ago
This blog post on their multi-user support is pretty interesting https://blog.excalidraw.com/building-excalidraw-p2p-collaboration-feature/ https://blog.excalidraw.com/building-excalidraw-p2p-collabor...
- GrumpyNl 6y ago
  They are describing the Github problem.
renke1 6y ago
It's also embeddable [0]. I can imagine a few use cases where that's useful. [0]: https://github.com/excalidraw/excalidraw-embed https://github.com/excalidraw/excalidraw-embed
paulgb 6y ago
I enjoyed this recent talk from its creator: https://youtu.be/fix2-SynPGE https://youtu.be/fix2-SynPGE
- jroseman93 6y ago
  Nice, thanks for sharing.
jonpurdy 6y ago
For quick sketches during sprint planning meetings or design sessions, I started using Witeboard.com a couple of years ago but have been experimenting with Excalidraw for the past two months. TL;DR: I still tend to use Witeboard.com for quick sketches, but if I plan on doing something more complicated and not time-sensitive I use Excalidraw. What I like about Witeboard.com: - fast to load and easy to get started - quick keys (t: typing, p: pencil) - pencil modifier keys: hold down l to switch from free drawing to drawing a line, or r to draw a rectangle Dislike about Witeboard.com: - It's like MS Paint, once the pixels are drawn you can't move them around (despite being vectors (I assume, infinitely zoomable)) What I like about Excalidraw: - Can move shapes around (fixes biggest gripe with Witeboard.com) - Sloppiness levels: Artist is what I use and is PERFECT for my needs, but nice to have options for other users - Also has quick keys (8: typing, 7: pencil) - Exports editable drawing as a file, not saved in cloud. So you can just import that file again and not rely on saving the URL. Dislike about Excalidraw: - Preventing me from switching to it: once a tool (ie. pencil) is used for a stroke, it reverts back to mouse cursor (I'd rather have it stay as pencil and hit 1 for it to switch to a cursor) - Majorly annoying: the open/save/color/stroke palette in top left is too similar to a square ratio, so it blocks a corner of the image If those two dislikes were fixed, I'd likely switch to it fulltime. For both products, I'd easily pay a few bucks a month for them.
- filipn 6y ago
  - Preventing me from switching to it: once a tool (ie. pencil) is used for a stroke, it reverts back to mouse cursor (I'd rather have it stay as pencil and hit 1 for it to switch to a cursor) There is a little lock icon next to the drawing tools which enables you to lock a tool, so it won't revert back.
  - jilles 6y ago
    Fun fact: I added this to Excalidraw for this exact reason! It was super annoying.
    - jonpurdy 6y ago
      Ah thanks, I’ll give this a try!
knbknb 6y ago
Anyone knows if there is someting similar available, but for uploading and editing Screenshots ? I'd like to have features "crop", "pixelize" and "add sequential-number label" available in a brwoser-based picture editor.
- xixixao 6y ago
  I imagine this could be added to excalidraw. I also had a use case for inserting images and drawing over them.
lovasoa 6y ago
Excalidraw is pretty cool, but its main drawback is that is has no backend. The drawings cannot be persisted to the server, and you cannot collaborate with someone on a drawing unless you are both connected at the same time. I maintain another opensource whiteboard web application that has a slightly different set of features, but allows persisting drawings to the server. It's called WBO : - https://wbo.ophir.dev/ https://wbo.ophir.dev/
- rco8786 6y ago
  Does this support touch/stylus drawing?
  - lovasoa 6y ago
    Yes it does.
    - melvinroest 6y ago
      When using the stylus, it doesn't support pressure sensitivity (I just tried with my Wacom). I created doodledocs.com as a side project, which does support it (and almost doesn't support anything else :P). The code is open source and also purely front-end based. So the Excalidraw authors can see how it could be implemented. It's basically Bresenham's algorithm combined with the DOM API. The code is at https://github.com/melvinroest/doodledocs/tree/master/app/components https://github.com/melvinroest/doodledocs/tree/master/app/co...
      - asadlionpk 6y ago
        The relevant part: https://github.com/melvinroest/doodledocs/blob/master/app/components/draw-engine.js#L156 https://github.com/melvinroest/doodledocs/blob/master/app/co...
        melvinroest 6y ago
        Yup, that's the Bresenham part. Somewhere else, I expose this to actually drawing it with a pencil. Thanks for pointing it out, I was overcomplicating it a bit in my mind (I wanted to point out more things) and therefore I didn't point it out.
zwischenzug 6y ago
I found the default font has the problematic side-effect that when shared through a zoom/google meet type platform, the 'handwriting' becomes illegible. This has annoyed me a lot at $company, which uses it widely.
- xixixao 6y ago
  You should file an issue on the repo - folks working on it are super open to contributions.
  - jilles 6y ago
    Totally! I was annoyed by the default 'jump back to selection' so I created a PR to lock that (with the little lock on the right). It took about 10 minutes after PR approval to merge to production. Really nice.
baristaGeek 6y ago
We use this when we need to design. It's amazing.
monkeydust 6y ago
Got this hosted on my own server using DigitalOcean and CapRover (from another HN post) works great.
aaronharnly 6y ago
Is there any API or method for pressure sensitive pens/tablets to work on the web? Or any native apps that support pressure and work with online apps? I love my Wacom and I love collaborative whiteboards, but it feels like neither is at its full potential.
- freedomben 6y ago
  Hopefully a better answer than mine comes along, but until then I tried several different options with my wacom and Miro was the best (far from perfect tho). I'm a wacom n00b and am still learning how to finely tune pressure sensitivity for myself, but for collaboration I liked Miro. It's free for small use and works well across mobile and web. No affiliation with Miro, just liked the service.
- mkl 6y ago
  PointerEvents: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events https://developer.mozilla.org/en-US/docs/Web/API/Pointer_eve... They are pretty easy to use, but most online whiteboards don't bother. Perhaps the developers don't have suitable hardware? The only pressure sensitive one I've seen is https://github.com/melvinroest/doodledocs https://github.com/melvinroest/doodledocs, which is ... not very polished yet.
golem14 6y ago
Neat! I wonder if there is a way to modify something like xfig to output in hand drawn "look". Collaborative editing is of course also very good and tools like xfig don't have it. I guess I'm wondering aloud if it makes sense to see "hand drawn look", collaborative editing and cloud storage/saas as orthogonal issues.
- golem14 6y ago
  Eg would be great to add 'hand drawn look' to other tools like graphviz without having to hugely modify the underlying tool, e.g. graphviz.
njessop 6y ago
started using this 1 month ago - now is my go-to. only things annoying (other than no-cloud backend as people note) is that the naming convention is a little funky (but once you get a file named it persists to img outputs as well). Lowers the bar for diagrams. And keyboard shortcuts super handy too.
sandGorgon 6y ago
this is brilliant. thank you so much for creating this. this also has end-to-end encryption built in. I think it should be the default and no hidden in a hard-to-find section. I wish it would export in the Mermaid format - https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/
sbkg0002 6y ago
Does anyone have a Helm chart to run this in k8s?
Axsuul 6y ago
Can anyone recommend a Sketch plugin that can achieve this same type of style?
tangoalpha 6y ago
Stumbled upon this tool when it was linked from a recent HN post (Six levels of interaction with a system). Have been using this ever since.
airstrike 6y ago
Make an iPad version and I'll pay $4.99 for it
- vjeux 6y ago
  It works on ipad. Feel free to donate $5 :)
deleted 6y ago
[deleted]
dmix 6y ago
This is neat. One bit of feedback: I found the default and even "extra bold" stroke size way to small. White boards have that imperfect broad strokes feel to them, having tiny lines, especially as the default just doesn't connect well with it IMO. Otherwise the interface is very easy to use, I like the draggable and editable objects approach
ohsonice 6y ago
Cool! I found it a little unintuitive that after each stroke, it reset to the pointer tool. I would've expected to be able to draw more lines without pressing 'X' each time. Also, as a mathematician, I would love some Unicode support for greek letters and super/sub-scripts. Something similar to https://docs.julialang.org/en/v1/manual/unicode-input/ https://docs.julialang.org/en/v1/manual/unicode-input/. I tried to just draw the text I wanted but the first point I brought up made this more difficult. ETA: If you hold 'X' or '7' then it remains in the tool you chose. This makes sense.
- peterhunt 6y ago
  there's also a lock icon that keeps the tool selected which i think is the behavior you want
guerby 6y ago
A few weeks ago excalidraw was using google for storage, see: https://github.com/excalidraw/excalidraw-json/issues/76 https://github.com/excalidraw/excalidraw-json/issues/76 "I also wonder, why is this using google cloud ? Could this be used without google cloud (and without sending data -- even if encrypted) to them ?" I don't know if there is now a fully self-hosted version of excalidraw.
guerby 6y ago
One missing feature: import an image to ease workflow with other tools. https://github.com/excalidraw/excalidraw/issues/19 https://github.com/excalidraw/excalidraw/issues/19
KennyCason 6y ago
I really love this! My only complaint is having the brush reset to pointer after each stroke.
- KennyCason 6y ago
  I also noticed that when I place text in the box, as I type the text expands out to the left and out of the box due to centering. My expectation was that the text would start from where my cursor is, and go to the right. (like in powerpoint or slides)
- peterhunt 6y ago
  there's a lock icon that changes the behavior to what you want :)
rvivek 6y ago
Love excalidraw! This might seem like a plug but someone asked for a collaborative embed. We actually integrated theirs in our pair programming solution for system design interviews: https://www.hackerrank.com/products/codepair https://www.hackerrank.com/products/codepair

241 points by dragonsh 6y ago

> Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them In general, don’t whiteboard sketches have a hand-drawn feel? Seems like the trick would be a tool to give diagramming tools a hand-drawn whiteboard sketch feel, or take hand-drawn whiteboard sketches and give them a diagramming feel. Could be neat to put this engine behind e.g. graphviz/dot, for instance, a la “sketch viz”: https://sketchviz.com/new https://sketchviz.com/new Or for the real parlor trick, emit a literally hand drawn whiteboard sketch in dot! PS. Many contributions to graphviz needed: https://graphviz.gitlab.io/doc/todo.html https://graphviz.gitlab.io/doc/todo.html

ghaff 6y ago
Nirvana for me is a tool that takes my really sloppy sketches and writing and converts it to something that looks like an actual sketch artist drew it. Maybe pick different styles. No idea how one would go about doing that though. (TBH, it would probably be a case of it being better to just hire an artist.)
- TheRealWatson 6y ago
  Some of these tools do exactly that. I draw my gross arcs, lines, ovals, rectangles and it renders much nicer ones, that feels like someone with way better motor skills had drawn it. I know Freehand does that.
  - ghaff 6y ago
    I should probably look again. When I went through various tablet tools a few years back I didn't see anything that really did it for me. But I should probably take another look.
- pc86 6y ago
  Do people still use dribbble? If you can find a style there you like I'm willing to bet it would be more affordable than you'd think. I've always been surprised by the affordability of one-off graphic requests like these.
  - ghaff 6y ago
    I'm not surprised. And I have a couple people at work who I could always ask for a favor for a given project. There's just a certain amount of friction with bringing a person in; it's not so much about the cost.
dahart 6y ago
> In general, don’t whiteboard sketches have a hand-drawn feel? Whiteboard sketches on a physical whiteboard do, but in general, computer “whiteboard” sketches are a mixed bag that IMO land more often on the side of straight lines and perfect circles, especially if you look around at which computer whiteboard products are commercially successful. > Seems like the trick would be a tool to give diagramming tools a hand-draw whiteboard sketch feel, or take hand-drawn whiteboard sketches and give them a diagramming feel. Here’s one example of the former: https://matplotlib.org/xkcd/examples/showcase/xkcd.html https://matplotlib.org/xkcd/examples/showcase/xkcd.html The latter, converting sketches to diagrams, would be neat and is an interesting & difficult problem. The thing that neither of these use-cases really cover is the need for a fast iteration / ideation tool in the exact same role as a physical whiteboard. Once you’re concerned about the presentation & look, the majority of time is spent working on the layout and the presentation because it takes longer to make it pretty than to just work out or communicate an idea without regard to beauty. Very small changes to where something goes or what it looks like can lead to a large and time-consuming ‘refactor’ of a diagram.

EwanToo 6y ago

This blog post on their multi-user support is pretty interesting https://blog.excalidraw.com/building-excalidraw-p2p-collaboration-feature/ https://blog.excalidraw.com/building-excalidraw-p2p-collabor...

GrumpyNl 6y ago
They are describing the Github problem.

renke1 6y ago

It's also embeddable [0]. I can imagine a few use cases where that's useful. [0]: https://github.com/excalidraw/excalidraw-embed https://github.com/excalidraw/excalidraw-embed

paulgb 6y ago

I enjoyed this recent talk from its creator: https://youtu.be/fix2-SynPGE https://youtu.be/fix2-SynPGE

jroseman93 6y ago
Nice, thanks for sharing.

jonpurdy 6y ago

For quick sketches during sprint planning meetings or design sessions, I started using Witeboard.com a couple of years ago but have been experimenting with Excalidraw for the past two months. TL;DR: I still tend to use Witeboard.com for quick sketches, but if I plan on doing something more complicated and not time-sensitive I use Excalidraw. What I like about Witeboard.com: - fast to load and easy to get started - quick keys (t: typing, p: pencil) - pencil modifier keys: hold down l to switch from free drawing to drawing a line, or r to draw a rectangle Dislike about Witeboard.com: - It's like MS Paint, once the pixels are drawn you can't move them around (despite being vectors (I assume, infinitely zoomable)) What I like about Excalidraw: - Can move shapes around (fixes biggest gripe with Witeboard.com) - Sloppiness levels: Artist is what I use and is PERFECT for my needs, but nice to have options for other users - Also has quick keys (8: typing, 7: pencil) - Exports editable drawing as a file, not saved in cloud. So you can just import that file again and not rely on saving the URL. Dislike about Excalidraw: - Preventing me from switching to it: once a tool (ie. pencil) is used for a stroke, it reverts back to mouse cursor (I'd rather have it stay as pencil and hit 1 for it to switch to a cursor) - Majorly annoying: the open/save/color/stroke palette in top left is too similar to a square ratio, so it blocks a corner of the image If those two dislikes were fixed, I'd likely switch to it fulltime. For both products, I'd easily pay a few bucks a month for them.

filipn 6y ago
- Preventing me from switching to it: once a tool (ie. pencil) is used for a stroke, it reverts back to mouse cursor (I'd rather have it stay as pencil and hit 1 for it to switch to a cursor) There is a little lock icon next to the drawing tools which enables you to lock a tool, so it won't revert back.
- jilles 6y ago
  Fun fact: I added this to Excalidraw for this exact reason! It was super annoying.
  - jonpurdy 6y ago
    Ah thanks, I’ll give this a try!

knbknb 6y ago

Anyone knows if there is someting similar available, but for uploading and editing Screenshots ? I'd like to have features "crop", "pixelize" and "add sequential-number label" available in a brwoser-based picture editor.

xixixao 6y ago
I imagine this could be added to excalidraw. I also had a use case for inserting images and drawing over them.

lovasoa 6y ago

Excalidraw is pretty cool, but its main drawback is that is has no backend. The drawings cannot be persisted to the server, and you cannot collaborate with someone on a drawing unless you are both connected at the same time. I maintain another opensource whiteboard web application that has a slightly different set of features, but allows persisting drawings to the server. It's called WBO : - https://wbo.ophir.dev/ https://wbo.ophir.dev/

rco8786 6y ago
Does this support touch/stylus drawing?
- lovasoa 6y ago
  Yes it does.
  - melvinroest 6y ago
    When using the stylus, it doesn't support pressure sensitivity (I just tried with my Wacom). I created doodledocs.com as a side project, which does support it (and almost doesn't support anything else :P). The code is open source and also purely front-end based. So the Excalidraw authors can see how it could be implemented. It's basically Bresenham's algorithm combined with the DOM API. The code is at https://github.com/melvinroest/doodledocs/tree/master/app/components https://github.com/melvinroest/doodledocs/tree/master/app/co...
    - asadlionpk 6y ago
      The relevant part: https://github.com/melvinroest/doodledocs/blob/master/app/components/draw-engine.js#L156 https://github.com/melvinroest/doodledocs/blob/master/app/co...
      - melvinroest 6y ago
        Yup, that's the Bresenham part. Somewhere else, I expose this to actually drawing it with a pencil. Thanks for pointing it out, I was overcomplicating it a bit in my mind (I wanted to point out more things) and therefore I didn't point it out.

zwischenzug 6y ago

I found the default font has the problematic side-effect that when shared through a zoom/google meet type platform, the 'handwriting' becomes illegible. This has annoyed me a lot at $company, which uses it widely.

xixixao 6y ago
You should file an issue on the repo - folks working on it are super open to contributions.
- jilles 6y ago
  Totally! I was annoyed by the default 'jump back to selection' so I created a PR to lock that (with the little lock on the right). It took about 10 minutes after PR approval to merge to production. Really nice.

baristaGeek 6y ago

We use this when we need to design. It's amazing.

monkeydust 6y ago

Got this hosted on my own server using DigitalOcean and CapRover (from another HN post) works great.

aaronharnly 6y ago

Is there any API or method for pressure sensitive pens/tablets to work on the web? Or any native apps that support pressure and work with online apps? I love my Wacom and I love collaborative whiteboards, but it feels like neither is at its full potential.

freedomben 6y ago
Hopefully a better answer than mine comes along, but until then I tried several different options with my wacom and Miro was the best (far from perfect tho). I'm a wacom n00b and am still learning how to finely tune pressure sensitivity for myself, but for collaboration I liked Miro. It's free for small use and works well across mobile and web. No affiliation with Miro, just liked the service.
mkl 6y ago
PointerEvents: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events https://developer.mozilla.org/en-US/docs/Web/API/Pointer_eve... They are pretty easy to use, but most online whiteboards don't bother. Perhaps the developers don't have suitable hardware? The only pressure sensitive one I've seen is https://github.com/melvinroest/doodledocs https://github.com/melvinroest/doodledocs, which is ... not very polished yet.

golem14 6y ago

Neat! I wonder if there is a way to modify something like xfig to output in hand drawn "look". Collaborative editing is of course also very good and tools like xfig don't have it. I guess I'm wondering aloud if it makes sense to see "hand drawn look", collaborative editing and cloud storage/saas as orthogonal issues.

golem14 6y ago
Eg would be great to add 'hand drawn look' to other tools like graphviz without having to hugely modify the underlying tool, e.g. graphviz.

njessop 6y ago

started using this 1 month ago - now is my go-to. only things annoying (other than no-cloud backend as people note) is that the naming convention is a little funky (but once you get a file named it persists to img outputs as well). Lowers the bar for diagrams. And keyboard shortcuts super handy too.

sandGorgon 6y ago

this is brilliant. thank you so much for creating this. this also has end-to-end encryption built in. I think it should be the default and no hidden in a hard-to-find section. I wish it would export in the Mermaid format - https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/

sbkg0002 6y ago

Does anyone have a Helm chart to run this in k8s?

Axsuul 6y ago

Can anyone recommend a Sketch plugin that can achieve this same type of style?

tangoalpha 6y ago

Stumbled upon this tool when it was linked from a recent HN post (Six levels of interaction with a system). Have been using this ever since.

airstrike 6y ago

Make an iPad version and I'll pay $4.99 for it

vjeux 6y ago
It works on ipad. Feel free to donate $5 :)

deleted 6y ago

[deleted]

dmix 6y ago

This is neat. One bit of feedback: I found the default and even "extra bold" stroke size way to small. White boards have that imperfect broad strokes feel to them, having tiny lines, especially as the default just doesn't connect well with it IMO. Otherwise the interface is very easy to use, I like the draggable and editable objects approach

ohsonice 6y ago

Cool! I found it a little unintuitive that after each stroke, it reset to the pointer tool. I would've expected to be able to draw more lines without pressing 'X' each time. Also, as a mathematician, I would love some Unicode support for greek letters and super/sub-scripts. Something similar to https://docs.julialang.org/en/v1/manual/unicode-input/ https://docs.julialang.org/en/v1/manual/unicode-input/. I tried to just draw the text I wanted but the first point I brought up made this more difficult. ETA: If you hold 'X' or '7' then it remains in the tool you chose. This makes sense.

peterhunt 6y ago
there's also a lock icon that keeps the tool selected which i think is the behavior you want

guerby 6y ago

A few weeks ago excalidraw was using google for storage, see: https://github.com/excalidraw/excalidraw-json/issues/76 https://github.com/excalidraw/excalidraw-json/issues/76 "I also wonder, why is this using google cloud ? Could this be used without google cloud (and without sending data -- even if encrypted) to them ?" I don't know if there is now a fully self-hosted version of excalidraw.

guerby 6y ago

One missing feature: import an image to ease workflow with other tools. https://github.com/excalidraw/excalidraw/issues/19 https://github.com/excalidraw/excalidraw/issues/19

KennyCason 6y ago

I really love this! My only complaint is having the brush reset to pointer after each stroke.

KennyCason 6y ago
I also noticed that when I place text in the box, as I type the text expands out to the left and out of the box due to centering. My expectation was that the text would start from where my cursor is, and go to the right. (like in powerpoint or slides)
peterhunt 6y ago
there's a lock icon that changes the behavior to what you want :)

rvivek 6y ago

Love excalidraw! This might seem like a plug but someone asked for a collaborative embed. We actually integrated theirs in our pair programming solution for system design interviews: https://www.hackerrank.com/products/codepair https://www.hackerrank.com/products/codepair