My goal is that it renders on GitHub as well as on my blog. GitHub doesn’t support css based dark mode afaik

    :root { --varname: #FFE; }
    
    @media (prefers-color-scheme: dark) {
        :root { --varname: #022; }
    }

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

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.

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)

Whiteboard handwriting is childish?

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.

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.

In Excalidraw, you can reduce (and completely remove) the "sloppiness" in the element properties.

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

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

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.

Whimsical is a whiteboard/diagram app that I think looks pretty nice, not too far from how yours looks

Questions:

1. Will you be making the source code public?

2. How to export the JSON for SCM, then re-import for updating/maintenance?

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.

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

When a background shape is in focus it comes to the foreground covering the shapes that are on top of it.

I prefer excalidraw …

looks awesome man !

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

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.

Thanks for the flowers

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

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.

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

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.

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.

I use the Obsidian Excalidraw plugin, means I can add diagrams to notes without leaving Obsidian.

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.

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

Thanks for the hint - just updated the post and adde the attribution

Apparently Excalidraw is An open source virtual hand-drawn style whiteboard. Collaborative and end-to-end encrypted.

https://github.com/excalidraw/excalidraw

Pretty new to hn, thanks for the hint

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

Decades? Wasn't it created in 2020?

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.