[HN Gopher] I use Excalidraw to manage my diagrams for my blog
___________________________________________________________________
I use Excalidraw to manage my diagrams for my blog
Author : mlysk
Score : 262 points
Date : 2026-03-30 07:17 UTC (15 hours ago)
(HTM) web link (blog.lysk.tech)
(TXT) w3m dump (blog.lysk.tech)
| emil-lp wrote:
| Should be _Show HN_.
|
| Now it reads like an ad for some extension to a program I've
| never heard about.
| emil-lp wrote:
| Apparently Excalidraw is _An open source virtual hand-drawn
| style whiteboard. Collaborative and end-to-end encrypted._
|
| https://github.com/excalidraw/excalidraw
| bryanhogan wrote:
| Both Excalidraw and TLDraw are the two most popular apps of
| their kind, simplistic whiteboard tools, so I don't think
| it's that surprising and I don't see any reason why this post
| should be a "Show HN".
|
| TLDraw: https://www.tldraw.com/
|
| Excalidraw: https://excalidraw.com/
| jruohonen wrote:
| For me, draw.io is still the winner, and especially now
| that it runs locally also on Linux. As for works in
| progress, I hope this one succeeds (and would also run
| locally at some point):
|
| TikzMaker: https://tikzmaker.com/
| petepete wrote:
| I use Excalidraw extensively at work. For me, it's really
| close to perfection.
|
| It has an excellent UI, selections work way better than Lucid
| or Figma etc, the sketchy look makes it clear designs are
| rough and not blueprints, it's private and loads instantly.
|
| The one negative is that it's a pain to get the multiplayer
| self-hosted version running.
| fabbbbb wrote:
| I was surprised about that, too. Tried a bit but found very
| few sources online.
|
| A self-hosted version with storage (multiplayer) plus any
| Claude access would be a killer setup for team planning etc
| and let us drop Miro.
| macintux wrote:
| The company where I'm contracted retired Excalidraw in
| favor of Lucid and, while I understand that big companies
| are going to go with big, enterprise-y solutions, what went
| from a weekly "sketch something out to help with
| communicating my ideas" turned into "once every few months
| I begrudgingly document something".
|
| Excalidraw is excellent for low-friction sketches.
| foobarian wrote:
| My favorite aspect of it is the keyboard shortcuts. It
| makes things so much faster.
| postatic wrote:
| I love excalidraw, but don't need the excalidraw+. But
| Excalidraw open source is the frontend only, which means I
| have to delete my drawings each time. So I built the backend
| so I can create many canvases.
|
| https://drawx.ossy.dev
| jstanley wrote:
| Your site makes me make an account before I can use it,
| whereas excalidraw.com doesn't, and also excalidraw.com
| seems to save my drawing just fine? I closed a tab and
| reopened it and my drawing was still there, presumably from
| localStorage.
|
| The three-lines-menu also has a "Save to..." option that
| lets you create a sharable link or save to your local disk.
| blahlabs wrote:
| You can also embed the excalidraw drawing in the exported
| image. So you can drag/drop the exorted image back into
| excalidraw and edit it later.
| iCutMoon wrote:
| I actually created a completely free chrome extension
| exactly for that reason helps you to save and open the
| files at excalidraw
|
| https://github.com/AykutSarac/excalihub
| mlysk wrote:
| Pretty new to hn, thanks for the hint
| gethly wrote:
| Same. I started using it for Gethly blog. It's not perfect, some
| things make me crazy but overall it is better than draw.io that I
| used to use before. Excalidraw also has these great styles that
| just feel right :)
| wdroz wrote:
| You can also bootstrap your initial schema with LLMs with the
| excalidraw MCP "app" [0]. But MCP "apps"[1] are quite new and not
| very well supported yet.
|
| [0] -- https://github.com/excalidraw/excalidraw-mcp
|
| [1] -- https://modelcontextprotocol.io/extensions/apps/overview
| mi_lk wrote:
| I didn't have good experience with excalidraw-mcp when it first
| came out a month ago; the Claude-generated diagrams were too
| raw/unpolished. I'm sticking to mermaid for now but I'm
| interested in hearing how people make exclidraw-mcp work for
| them
| darshanmakwana wrote:
| I simply just draw in excalidraw and take a ss and past it in my
| obsidian note, I have a setup that automatically parses posts
| from my vault and then pushes them to my site
| elric wrote:
| I use the Obsidian Excalidraw plugin, means I can add diagrams
| to notes without leaving Obsidian.
| darshanmakwana wrote:
| Yeah I use that plugin too. I was just referencing it in
| relation to how I setup my blog[1]
|
| [1]: https://darshanmakwana412.github.io/2026/03/a-system-of-
| jour...
| count wrote:
| Protip: select the items in the canvas you want in your SS and
| 'copy to clipboard as PNG' instead of a screen shot and you can
| get transparent PNGs of diagrams or of detailed subsets of a
| larger diagram easily.
| walthamstow wrote:
| Excalidraw has proliferated quite widely in my company since we
| got Claude Code. Its a shame the default font is ugly, childish
| and inaccessible.
| lloydatkinson wrote:
| Whiteboard handwriting is childish?
| walthamstow wrote:
| It's not on a whiteboard, nor was it written by hand. It's a
| computer font.
| lloydatkinson wrote:
| The Excalidraw website describes itself as: Excalidraw is a
| virtual collaborative whiteboard tool that lets you easily
| sketch diagrams that have a hand-drawn feel to them.
|
| And the GitHub repo says: An open source virtual hand-drawn
| style whiteboard. Collaborative and end-to-end encrypted.
|
| It's the intended design...
| walthamstow wrote:
| Cool. I have stated my opinions on their intended design.
| lloydatkinson wrote:
| Cool. I have stated the facts of the product.
| bundie wrote:
| It just looks weird not childish.
| freedomben wrote:
| I love excalidraw, but I have to agree. It also looks very
| unprofessional so if you ever have to write customer-facing
| diagrams, you have tool fragmentation. I just stick to draw.io
| now (aka diagrams.net)
| ChadNauseam wrote:
| Why does it cause tool fragmentation? You can change the font
| to a normal sans-serif font or to a monospaced font.
|
| Personally I like the default font. It looks weird to have my
| crappy doodles next to a normal computer font. The default
| one is very legible but has a style (and ligatures) that make
| it feel not too neat
| dewey wrote:
| Everyone does that these days and they are becoming AI tells like
| the em-dash or the blue-glow of the early AI generated images
| that everyone added to their blog posts.
| hhh wrote:
| AI can generate mermaid diagrams, not excalidraw. If you use
| the mermaid to excalidraw, i guess it can be, but it just looks
| like a mermaid diagram then and not an excalidraw.
| dewey wrote:
| https://claude.com/connectors/excalidraw-app-demo
| mtsolitary wrote:
| PlantUML is a better ask for LLMs, you have a lot more
| control over the output
| functional_dev wrote:
| 100% agree
| count wrote:
| we have an excalidraw MCP for claude, it can easily do both
| :) (Excalidraw is basically just fancy SVG)
| hhh wrote:
| oh wow, cool
| Jnr wrote:
| Cool, I did a similar thing last week.
|
| I made a custom Payload CMS block that allows to create and
| update excalidraw diagrams within the CMS. It supports dark and
| light mode switching and rendering inline or as external SVG.
|
| And last weekend I added MCP server with Oauth so I could
| generate and update those diagrams and add them to post drafts
| from Claude. I think it is more convenient since I don't have to
| use API billing model and don't need to build a custom UI.
|
| Here is an example post:
| https://www.janhouse.lv/blog/network/self-hosting-tailscale-...
|
| Originally I wanted to sync posts from Obsidian but it doesn't
| have good enough image handling which I sometimes need and I
| needed extra metadata to unlist or password protect or noindex
| some posts.
| lnenad wrote:
| I love diagramming, but I genuinely don't understand how people
| can use these wonky looking tools. It looks off, I had to make my
| own[1] to create something that's easy to use and looks
| good/normal.
|
| [1] https://grafly.io
| superkai wrote:
| looks awesome man !
| emaro wrote:
| I like the wonky, hand-drawn looking style. I think it fits
| well beause usually if I use a diagram it's not 100% precise
| and accurate, but more a high-level illustration. The wonky
| style conveys the approximate precision of the presented
| concept.
|
| Also, and that's personal, I think it's cute.
| grosswait wrote:
| I thought they were saying the tool is wonky looking, but
| <shrug>?
| boomskats wrote:
| I agree with you. I think the 'wonky' comment was more to
| serve as justification for the plug than an actual criticism
| of Excalidraw.
|
| Excalidraw is my favourite thinking tool, and the style it
| produces is just the right level of limiting, disarming, and
| professional at the same time.
| lnenad wrote:
| It's not, I genuinely find it harder to read diagrams. And
| also the plug is very relevant, I wanted to share, it's not
| a saas it's a free tool.
| lnenad wrote:
| I agree 100% it's personal, wasn't trying to imply anything
| else, but for me the style takes away from the actual content
| and makes it harder to read/grasp.
| SatvikBeri wrote:
| One person's bug is another's feature.
| Ygg2 wrote:
| > It looks off
|
| Depends on what you want to achieve with your look. Do you want
| to scream professionalism, authority, and completed? Use a
| regular UML tool.
|
| Want to say this is a rough draft of a few ideas? Then using
| UML is probably THE wrong look. And Exaclidraw should be used
| instead.
|
| --- Anecdote time. According to one of my professors, they
| showed how the prototype will look in action, and the customers
| were so impressed by the smoke and mirrors prototype they
| wanted to start using it right away.
|
| In the end, customer walked away because they thought they were
| being strung along to pay for something that was already done.
| aniviacat wrote:
| In Excalidraw, you can reduce (and completely remove) the
| "sloppiness" in the element properties.
| geektips wrote:
| This looks really clean, nice work. I've had the same issues
| with most diagramming tools, it's either not so good looking or
| the insane pricing .
|
| I went a different route using diagram-as-code with Mermaid
| instead of manual drawing.
|
| [1] https://graphlet.xyz
| lnenad wrote:
| Thanks! I love Mermaid as well, I made it so you can import
| Mermaid diagrams as well.
| atentaten wrote:
| When a background shape is in focus it comes to the foreground
| covering the shapes that are on top of it.
| lnenad wrote:
| That is by design. If you deselect it it goes back to it's
| layer.
| count wrote:
| Excalidraw has a 1 click 'sloppiness' change. We do drafts and
| ideation in 'full sloppy' mode, to indicate to the reader that
| this is not fully thought through, or a final documented
| decision. Once we've gotten through discussions and analysis,
| the final diagram is changed to be 'not sloppy', and the font
| changed from handwriting to a san serif font.
|
| It's pretty effective to immediately communicate to folks that
| 'this is a concept' approach. Too many people instantly jump to
| conclusions about diagrams - if it's written down it must be
| done / fixed / formal.
| antback wrote:
| I prefer excalidraw ...
| dominotw wrote:
| https://news.ycombinator.com/item?id=47503348
| beAbU wrote:
| The best way to drive adoption to your product is to _not_ shit
| on someone else 's labour of love. Just a little pro-tip.
| lnenad wrote:
| How did I shit on excalidraw? I don't like how it looks, it's
| a personal preference. I don't think saying that equates to
| shitting on it.
| beAbU wrote:
| 1) You literally call Excalidraw a "wonky looking tool".
|
| 2) You claim you don't understand why people use it.
|
| 3) You claim your vibecoded substitute is more "normal"
| implying Excalidraw is abnormal.
| everybodyknows wrote:
| Questions:
|
| 1. Will you be making the source code public?
|
| 2. How to export the JSON for SCM, then re-import for
| updating/maintenance?
| lnenad wrote:
| It's open source, I just haven't linked it in the project (my
| bad).
|
| https://github.com/lnenad/grafly/
|
| In the upper right there is an import/export button that
| could be used for this. It's stored in localstorage so you
| could also dump that to wherever you like.
|
| edit: added link to the repo in the about modal. edit2: added
| import export of the entire localstorage entry on the bottom
| of the diagrams(left) panel.
| elias1233 wrote:
| Whimsical is a whiteboard/diagram app that I think looks pretty
| nice, not too far from how yours looks
| jaffa2 wrote:
| "USING AI TO GENERATE DIAGRAMS
|
| Click the AI button in the toolbar to copy the Grafly format
| reference. Paste it into any LLM (Claude, ChatGPT, Gemini...)
| along with a description of the diagram you want. Copy the JSON
| the LLM returns. Click the Import JSON button () in the toolbar
| and paste it in. "
|
| Super user friendly as well! I don't even understand the
| instructions on how to use it.
| subhobroto wrote:
| I absolutely love it that you can import mermaid. I love
| mermaid because I'm a huge fan of anything related to code that
| can I check into git, track its evolution and the thinking that
| went behind it.
|
| However, those who don't know mermaid have to struggle with
| updating my diagrams. Your approach, atleast in theory, should
| get us the best of both worlds. Mermaid for those who would
| like to and the mouse for those who don't.
|
| This also addresses the issue that large complex diagrams can
| get unwieldy using Mermaid and moving things around with a
| mouse would fix those edge cases.
| palijer wrote:
| Great article, should make sure to attribute xkcd comics though.
|
| https://xkcd.com/about/
| mlysk wrote:
| Thanks for the hint - just updated the post and adde the
| attribution
| tobiu wrote:
| nice one!
| d4rkp4ttern wrote:
| Another option I use open is to ask the code-agent to make a
| diagram using Tikz (as a .tex file), which can then be converted
| to pdf/png.
|
| But in general AI-diagramming is still unsolved; needs several
| iterations to get rid of wonky/wrong arrows, misplaced boxes,
| misplaced text etc.
| jillesvangurp wrote:
| I've always liked umlet and umletino (web version) for a nice
| mix of drag and drop and edit by text editor. In the absence of
| good enough layout algorithms, the ability to manually drag
| things to the right place is kind of essential. The resulting
| diagrams are not so pretty of course.
|
| I have tried a lot of tools in this space. If it comes out
| looking alright, that's usually because it was so simple that
| it didn't actually need a diagram. Anything with a bit of non
| trivial structure seems to quickly escalate with essentially no
| good options other then esoteric hacks with styling to make it
| look any good.
|
| This seems to be a thing where you can have pretty automated
| layouts, complex diagrams, or correct diagrams and can only
| have two out of three.
|
| Which means that almost 100% of my use cases for these tools
| never really work for me unless I sit down and grab some old
| school drawing tool (or just give up on the whole notion, which
| is much more likely). If it was trivial, I wouldn't bother
| making a diagram. These tools seem only usable for stuff where
| diagrams were overkill to begin with. I saw no examples on the
| linked article (and the rest of the site; I browsed the top few
| recent articles) to really counter this.
| jannesblobel wrote:
| That fits perfectly with the idea that everything should actually
| be in the repository. At last, I no longer have to update the
| images myself. Thanks!
| mlysk wrote:
| Thanks for the flowers
| subhobroto wrote:
| Documentation often rots away because it's often decoupled from
| the code it describes.
|
| I'm a huge fan of anything related to code that can I check into
| git, track its evolution and the thinking that went behind it.
| Why was Kubernetes chosen? Why was NATs chosen? Why are the
| topics named the way they are?
|
| I am a huge fan of mermaid diagrams because it lets me check in
| my diagrams into git. I am a huge fan of mermaid diagrams because
| my code can generate diagrams that I (or they) can check into git
| - and this was before AI.
|
| Now that AI can generate mermaid diagrams, people look at my Git
| repos and go "oh, you use AI a lot!" - then I point to my git
| history and they see it's from 2018.
|
| I'm really happy that mermaid and related tools like Excalidraw
| are taking off - we have another chance at documentation being
| automated, uptodate and "fresh".
| johspaeth wrote:
| Uh, that's a nice approach.
| agnishom wrote:
| I want to write a blog whose posts will be all about the
| technical details of how the blog works.
| mlysk wrote:
| Author here: Haha - yeah that is kind of meta - i know. Other
| content will be more about the acutual problems i solve. Check
| out https://blog.lysk.tech/sqlite-on-git-prologue ;-)
| quanta-rs wrote:
| Hey, I found that interesting and went looking for an RSS
| feed link on your site but couldn't find any. Assuming you
| don't have it already, do you plan to add it?
| mlysk wrote:
| on it
| mlysk wrote:
| https://blog.lysk.tech/rss.xml
| 1a527dd5 wrote:
| Huge fan of https://github.com/mermaid-js/mermaid, not the
| prettiest things but enough to scratch the itch.
| mlysk wrote:
| Author here: I use mermaid lot as well and for some things like
| process flows, and to model interactions it it outrules
| excalidraw and posts will follow where i need exactly that. but
| to visualize things high level i find excalidraw way nicer.
| latchkey wrote:
| I made it so that anyone who writes mermaid in HN comments, can
| see it inline comments, when the OJ extension is installed.
|
| https://oj-hn.com/assets/mermaid-light.png
| shrivats25 wrote:
| I have noticed diagrams are most useful early in thinking, but
| once things get complex they either become outdated or too hard
| to maintain. Curious how people here deal with that, do you keep
| diagrams in sync with code, or treat them as disposable?
| Normal_gaussian wrote:
| My approach:
|
| Do use diagrams to explain an abstraction, and attach a word to
| it. Don't use diagrams to represent the exact state of a
| system.
| al_borland wrote:
| I find I end up needing to walk the code to make diagrams of
| the current state anytime management wants to know what's going
| on. It's the only way my managers seem to understand or accept
| anything.
|
| It's a lot of work, as starting over is often easier than
| reviews and edits. Usually the diagrams are slightly out of
| date, but good enough to satisfy whoever is looking at it.
|
| I wish I had a better solution. Now I'm wondering I could write
| something that walks the code for me.
| rafterydj wrote:
| Hey look, someone else has the exact same problem I do! I
| even use Excalidraw for diagramming as well, and have been
| wondering about how best to generate them according to some
| kind of binary format.
| beAbU wrote:
| I have reverted to using mermaid where we are beyond the
| ideation phase. Then the mermaid code can live next to the
| document source, and I need not search for the original diagram
| file to edit and export. Confluence has a nice mermaid plugin.
|
| That way, the diagram source and
| relation_al wrote:
| I treat them as sketches, the way Martin Fowler used to
| describe a UML diagram. They have to be either disposable or
| treated as a notepad. I reconstruct the full picture only when
| it's necessary from "sketches". E.g., since Lucid has an
| infinite canvas, I'll put all my different diagrams on a single
| canvas, along with little diagrammatic "ideas", "notes",
| "brain-f$rts", etc.
|
| For a presentation or project documentation artifacts, I can
| then go thru my sketches and pull bigger pictures together
| easily. I applied Fowler's "sketch" principle in my own tool
| ormle.com
| irl_zebra wrote:
| Love Excalidraw. Used it for decades now, but reach for more
| powerful tools pretty often as I hit its limits. I'm not asking
| for the world, but some basics like being able to bold or
| italicize text would help out a lot.
| gilbetron wrote:
| Decades? Wasn't it created in 2020?
| alunchbox wrote:
| YES YES YES! Excalidraw is amazing, I recently embedded it into
| my vibe coded project to add version control integration with it.
| Honestly one of highest quality tools I've used for my workflow,
| does what it needs to do and doesn't get in your way.
| Surac wrote:
| Obsidian also offers a full excalidraw integration
| mlysk wrote:
| Not what I needed - my concepts life in one excalidraw,
| containing multiple frames of interest like
| https://github.com/martin-lysk/martin-
| lysk/blob/main/blog/26.... The blogposts reference some of them
| like here: https://blog.lysk.tech/nfs3-event-side-channel
| sandos wrote:
| Wow, I had no idea that excalidraw could "import" mermaid!! This
| is just awesome.. I can have my LLM generate mermaid, which it is
| really very good at. And then I can edit the diagram!
| mhawthorne wrote:
| Interesting approach. I make heavy use of Mermaid as I find it
| easier to make small changes and bulk generate-and-copy for
| publishing elsewhere. But being able to update the diagram and
| automatically generate the output files is a nice hybrid.
| tombert wrote:
| I use Mermaid too, but a lot of that comes down to the fact
| that it's easier to generate it with Claude.
|
| It can be exceedingly useful to do this if you have a big log
| file and you need to have a diagram of a trace, even if you're
| not sharing it on a blog.
| afc wrote:
| Looks pretty cool. I think it's great that you support light/dark
| mode. FWIWI, I'm also a huge fan of Excalidraw.
|
| I wanted to ask you: is there's a reason you use a separate svg
| file for each (light/dark) mode?
|
| A single SVG file using CSS can change it's own colors based on
| the user's preference. I have an example here:
| http://alejo.ch/3jj - the 3 plots should honor your mode (I put
| the generator code here: https://github.com/alefore/mini_svg)
|
| Just figure I'd ask. If you have a good reason for using separate
| files, I'd love to hear it (because it probably would also apply
| to what I'm doing). :)
| mlysk wrote:
| My goal is that it renders on GitHub as well as on my blog.
| GitHub doesn't support css based dark mode afaik
| tasuki wrote:
| Ah, you have a button for the toggle! Did you know that you
| can conform to the user's light/dark preference with CSS?
| Like this: :root { --varname: #FFE; }
| @media (prefers-color-scheme: dark) { :root {
| --varname: #022; } }
|
| Edit: To expand on this, I dislike light/dark toggles. If I
| have dark mode on, seeing a bright screen and having to
| search for a toggle is jarring. Just show me the colours
| according to my preference!
| auraham wrote:
| How can you detect the system preferences in the browser?
| tasuki wrote:
| I answered that in the comment you're replying to. If you
| want a more authoritative answer:
| https://developer.mozilla.org/en-
| US/docs/Web/CSS/Reference/A...
| pinjasaur wrote:
| Last I checked on this the workaround is embedding CSS inside
| an SVG, here's a demo: https://github.com/sindresorhus/css-
| in-readme-like-wat
|
| I used this on a personal project to add a README logo that
| is dark mode friendly: https://paul.af/github-readme-dark-
| mode
| regus wrote:
| And I'm over here using Graphviz like some caveman.
| sudhirkhanger wrote:
| It would have been great if Excalidraw made it easier to do
| manage multiple scenes. I use its PWA and save individual files
| on the disk.
| mlysk wrote:
| I thought about forking the pwa - should be easy to add the
| same concept using
| https://developer.chrome.com/docs/capabilities/web-apis/file...
| but I didn't want to leave vscode
| ajkjk wrote:
| I want to love Excalidraw but it can be really frustratingly
| mediocre a lot of the time. For example, I'm constantly retrying
| to rescale something and then an arrow repositions or resizes
| itself, which reveals some kind of mistake in the underlying data
| model. Or undo/redo just doesn't work correctly. Or you're draw
| an arrow and try as you might it refuses to not attach itself to
| some other element. And all sorts of things that should be
| customizable are not (like defaulting to the non-rough style, or
| resizing arrows separately from line thicknesses). And there is a
| basically-complete pull request for a math mode
| (https://github.com/excalidraw/excalidraw/pull/6037) which has
| been in limbo for years. Probably there are other things I'm
| forgetting.
|
| Anyway, it's kind of annoying to use for reasons like these. Just
| thought I would mention it since all the comments here seem
| positive.
| janalsncm wrote:
| Small related problem I am having, wondering if there's an
| existing solution for it:
|
| I draw a lot of software diagrams on Mac. Lots of rectangles,
| arrows, and free text. I'm wondering if there's anything that
| clean up my freehand boxes and potentially even text into
| something a little nicer? I want the boxes to snap to a nicer
| rectangle, the arrows to look cleaner, and the text to be more
| legible.
|
| I could send the whole thing into an LLM and maybe that would
| work, but I also fundamentally feel like that's overkill and less
| reliable.
|
| I tried Freeform which apparently has that functionality on iPad,
| but wouldn't you know the one thing you cannot do with Freeform
| on a Mac? Draw free form.
___________________________________________________________________
(page generated 2026-03-30 23:00 UTC)