It has a mermaid WYSIWYG editor and once the diagram is inserted you can edit it, move objects, add text just like you had drawn it directly in excalidraw.
I usually enter mermaid and then move things around to my liking rather than drawing from scratch.
You can also paste csv in, it's been a while since I've done it but I think it even generates a chart.
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.
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".
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). :)
:root { --varname: #FFE; }
@media (prefers-color-scheme: dark) {
:root { --varname: #022; }
}
I used this on a personal project to add a README logo that is dark mode friendly: https://paul.af/github-readme-dark-mode
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.
[0] -- https://github.com/excalidraw/excalidraw-mcp
[1] -- https://modelcontextprotocol.io/extensions/apps/overview
Also, and that's personal, I think it's cute.
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.
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.
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.
I went a different route using diagram-as-code with Mermaid instead of manual drawing.
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.
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.
2) You claim you don't understand why people use it.
3) You claim your vibecoded substitute is more "normal" implying Excalidraw is abnormal.
1. Will you be making the source code public?
2. How to export the JSON for SCM, then re-import for updating/maintenance?
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.
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.
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.
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
That way, the diagram source and
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.
[1]: https://darshanmakwana412.github.io/2026/03/a-system-of-jour...
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
And the GitHub repo says: An open source virtual hand-drawn style whiteboard. Collaborative and end-to-end encrypted.
It's the intended design...
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.
Now it reads like an ad for some extension to a program I've never heard about.
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.
For the self-host, finally I build the solution myself so I can self-host Excalidraw and several other plaintext diagramming format while still able to working with my peers using realtime collaboration.
I open sourced it on https://github.com/andes90/collabmd, and if you want to try you can play around with the demo on https://demo.collabmd.app
Excalidraw is excellent for low-friction sketches.
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.
TLDraw: https://www.tldraw.com/
Excalidraw: https://excalidraw.com/
TikzMaker: https://tikzmaker.com/
The three-lines-menu also has a "Save to..." option that lets you create a sharable link or save to your local disk.
But in general AI-diagramming is still unsolved; needs several iterations to get rid of wonky/wrong arrows, misplaced boxes, misplaced text etc.
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.