I use excalidraw to manage my diagrams for my blog

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!

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.

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

Huge fan of https://github.com/mermaid-js/mermaid, not the prettiest things but enough to scratch the itch.

Excalidraw has proliferated quite widely in my company since we got Claude Code. Its a shame the default font is ugly, childish and inaccessible.

Obsidian also offers a full excalidraw integration

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!

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?

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.

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

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

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.

Great article, should make sure to attribute xkcd comics though.

https://xkcd.com/about/

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.

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

I want to write a blog whose posts will be all about the technical details of how the blog works.

Should be Show HN.

Now it reads like an ad for some extension to a program I've never heard about.

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

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.

nice one!

Uh, that’s a nice approach.

[dead]