Posted by mlysk 12 hours ago
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). :)
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.
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...
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.
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.
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.
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.
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.
[0] -- https://github.com/excalidraw/excalidraw-mcp
[1] -- https://modelcontextprotocol.io/extensions/apps/overview
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.