Hacker News new | past | comments | ask | show | jobs | submit login
Excalidraw whiteboard – easily sketch diagrams with a hand-drawn feel (github.com/excalidraw)
241 points by dragonsh on June 15, 2020 | hide | past | favorite | 54 comments



I enjoyed this recent talk from its creator:

https://youtu.be/fix2-SynPGE


Nice, thanks for sharing.


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/


Some people think of that as a feature.

I saw that you can save it (as a JSON file) or export to PNG,SVG or the Clipboard (was that what the icon was?).

So I prefer people let me use a tool without creating another online account.

Also, glad you have an option for people with a different view of this. And also for simultaneous collaboration, too.


The public whiteboard is very interesting. It is a nice way to showcase collaborating capabilities. It would have been a great messy canvas except for that one user or bot determined to erase everything someone else draws :-)


A few of us managed to collaborate a bit... Not really going to change the world but it was fun while it lasted https://i.stack.imgur.com/rV8gQ.png


Excalidraw can store the files, although it's a little hidden: the link option in export gives a link that downloads an encrypted JSON from their server.


Does this support touch/stylus drawing?


Yes it does.


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/co...



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.


> 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

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


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.)


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.


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.


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.


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.


> 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

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.


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/. 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.


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


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.


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.


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


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.


PointerEvents: 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, which is ... not very polished yet.


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.


It's also embeddable [0]. I can imagine a few use cases where that's useful.

[0]: https://github.com/excalidraw/excalidraw-embed


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.


You should file an issue on the repo - folks working on it are super open to contributions.


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.


A few weeks ago excalidraw was using google for storage, see:

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.


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


It works on ipad. Feel free to donate $5 :)


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


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


This blog post on their multi-user support is pretty interesting

https://blog.excalidraw.com/building-excalidraw-p2p-collabor...


They are describing the Github problem.


One missing feature: import an image to ease workflow with other tools.

https://github.com/excalidraw/excalidraw/issues/19


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.


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


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.


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/#/


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.


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


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)


there's a lock icon that changes the behavior to what you want :)


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.


  - 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.


Fun fact: I added this to Excalidraw for this exact reason! It was super annoying.


Ah thanks, I’ll give this a try!


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


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


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: