Semi, aside, but I'm desperate for a better way to make math diagrams (WYSIWYG style, not TeX). I asked about this a while ago and nothing is really doing it for me: https://news.ycombinator.com/item?id=38351370. Although since then I have heard about https://penrose.cs.cmu.edu/ as well. Right now I use Excalidraw because there's a fork (never landed... ugh) which supports TeX in labels. But its actual drawing tools are quite limited, not to mention janky. There are some other options not mentioned in that thread which I've found in since then, but I still haven't seen anything satisfactory.
If you made math stuff easy to draw I'd use your tool in a heartbeat. Unfortunately there's probably not a large market for that sort of thing.
I completely get this usecase, TikZ is great but sometimes WYSIWYG is just easier to work with. Re: math stuff in particular, you may be in luck, my tool does already support LaTeX equations as first-class objects. Check out https://vexlio.com/latex-equation-editing/ for a quick screencap if you're interested.
I'm aware, but excalidraw is fairly underpowered for diagramming. It can do TeX but very little in the way of actual figures without a lot of finicky manual effort.
Mermaid - support in many markdown rendering pages. Embedding a ``` block in Markdown and having it versioned as text is the big win.
Graphviz - same basic reason as Mermaid, though no markdown support. Versioning text is a lot easier than versioning binaries.
Draw.io - if you've got to have a binary, this is it. In particular, it allows you to embed the drawing information in the image so that you can import a .png file into draw.io and get the drawing.
My big complaint about mermaid is that you cannot easily generate and store the SVGs without a browser engine—-even the CLI goes and runs Chrome, which feels insane.
Regarding graphviz/dot, I have been using it from what feels like the dawn of time and am somewhat sad that we haven’t improved upon it. The syntax, styling imitations, etc. put me off enough that I tend to avoid it.
For graphviz, the "problem" with it is that it truly is general purpose and trying to make a general purpose syntax for diagrams is difficult. Mermaid tackles this by not having it be applicable to all possible graphs (flow chart has a different syntax than gitGraph) allowing for a better domain specific language for each subset of functionality.
https://mermaid.js.org/syntax/packet.html is really neat... and it would be a pain to do that in GraphViz ... but I believe that's more of a demonstration that it might be better to do specific syntaxes for specific types of diagrams.
I'm a big fan of both Mermaid and Graphviz - Thanks to GitLab supporting Mermaid we can put relevant project diagrams inline in Markdown docs that live in the same git repo as the rest of the project code.
And if I need to generate a graph programmaticaly then I instinctively reach for Graphviz as it's solid and can produce the graphs in so many different file formats that they're easy to include wherever they're needed. Your code is a lot simpler as it doesn't need to handle any of the rendering logic, it just needs to work out which nodes are connected by which edges.
Occasionally it can be hard to wrestle with but my go-to is PlantUML, which has a simple syntax and for better or for worse doesn't support many formatting options, so I can't get distracted tweaking the specifics of the layout
Excalidraw for life. It can be embedded in Obsidian as well.
Draw.io is OK too, but the interaction is much slower when editing. The strict position/shape of arrows makes me want to clean things up way more than necessary and waste time.
I'd maybe consider miro or draw.io if I was working on something with other people and expected lots of edits and change history.
Mermaid is an interesting concept, but putting things in the reasonable location can be next to impossible and a single new connection can blow up the whole layout. And the integration is never quite polished - so many times I've been scrolling down a github page just to suddenly stop and resize a diagram. Then the panning/zoom is a bit clunky. (I know it's a client issue, but unless the defaults become reasonable, it's a mermaid issue too)
It depends on the use. If it is simple enough, mermaid diagrams have several advantages, like easy to understand versioning, and integration with many note taking programs.
https://mermaid.live/ ! Mostly because it lets me generate my diagrams in code rather than drawing them out by hand, which means I can version control them, as well as generate said code from human-language descriptions given to ChatGPT. Sequence diagrams are an especially favorite of mine.
There are a few good options in the code to SVG (PNG, JPG, whatever) space besides Mermaid. The venerable graphviz has been around since the 90s, I think, and uses the DOT language. The newer D2 language probably has the nicest overall aesthetics as well: https://play.d2lang.com/
Definitely a personal fan of Graphviz as well! One thing I'm curious about are usecases that require version-controlled diagram sources. Do you guys have e.g. a build step that updates the rendered version somewhere? Or Confluence integration, etc?
I'm not the person you replied to, but for projects I maintain at work we've got a plugin for Confluence called Mark. It allows using Markdown to create Confluence pages, which is useful because the company uses Confluence for some reason. For diagrams (Mermaid, GraphViz, etc.) the source for the diagram is kept with the Markdown & I've got a CI job that generates diagrams & then runs Mark to update Confluence.
It makes it a lot easier to keep the documentation in sync with the code than having to remember to go to Confluence and update things. And avoids the pain of dealing with Atlassian's slow-loading site.
I work at a BigCorp with a fancy md-to-html generator that supports graphviz via code blocks, e.g.
```dot
digraph { a -> b }
```
But day-to-day, I actually use graphviz inside emacs org-mode (and in a private git repo). If you press C-c C-c with your cursor on the code blocks, it plops the rendered graph below.
I'm a latex user so I tried tikz and I like the results but it's often too much work. I end up most of the time using PowerPoint and using those drawing tools on a blank slide and then printing that slide to pdf so I get vector graphics then loading that into a pdf tool to crop it. Not a great system but still faster than tikz. I would love a better tool.
I'm clearly biased since I work at Datadog[1], but I use and recommend Cloudcraft[2] for diagramming. As I don't use the cloud I focus more on the manual design tools, but the automatic stuff are pretty neat.
Recently, though, I've been using D2[3] a lot and really liking it. The diagrams don't look as aesthetically pleasing to my eyes, but being able to design everything with a simple language is pretty cool, and helps with automation.
[1]: Datadog owns Cloudcraft, hence the bias. Plus, I work in the Cloudcraft team, haha.
Due to pricing model, due to cost CloudCraft is effectively unusable for small shops using accounts as an information boundary (per best practices for certain sectors).
Doesn't mean small firms wouldn't want to. Just, it's not sold that way. Super disappointing!
Does Cloudcraft do generic diagramming? At least from the landing page it seems pretty purpose-built for cloud architecture diagramming only. I also have to give major kudos for whoever made the call to go with an isometric projection... visually and mentally, it's a perfect choice for that domain!
The focus is cloud architecture diagramming, but you can use the design tools to diagram bare-metal architectures if you want or anything else, really. Heck, we had an internal game of chess going at some point and someone was rebuilding pieces of New York City using the design tools.
Depends on the diagram. But a lot of times it's OpenOffice Draw[1]. I might also use Archi[2] or GraphViz[3] depending on what I'm trying to do. I've also dabbled with using Papyrus[4] but it hasn't yet become a routine part of my workflow. Maybe it should though...
For work especially if it's for a large audience I use Visio or GraphViz. For my own consumption (and a couple co-workers) I really prefer mermaidjs, especially just to have it embedded in markdown files.
For your large audience cases - do those typically go in one-off presentations or are they for more long-lived things (design docs, customer-facing docs, etc)?
It connects to your system using OpenTelemetry and it lets you automatically document all the components, dependencies, APIs, etc. I prefer it to static, drag and drop whiteboards because I get immediate visibility without having to waste time moving boxes and arrows.
(Of course you can still create sketches if you want, but the real value is in getting the information you need immediately)
Hah, I appreciate the distinction on enterprise-grade... Anything in particular you like or dislike in particular from your experience with Lucidchart or draw.io?
I prefer draw.io, honestly. It's lighter weight and does 99% of what I use Lucidchart for. However, Lucid has a bigger icon library, which matters sometimes.
Excalidraw and PlantUML
Each one has its own benefits / drawbacks.
PlantUML is great for version-controlled files.
Excalidraw for throwaway diagrams and discussion. Ocassionally I draw comic strips with Excalidraw.
This is timely. I have grown disappointed with mermaid as it can only render stuff in the browser and libraries that use dot underneath but do not afford full control over the generation, so I have stared writing little Python programs that generate SVGs for things like sequence diagrams and store their output.
None of the visual diagramming tools pass muster for me.
They are all too fiddly and trying to use them requires a lot of yak-shaving to get the layout acceptable.
The diagrams I draw are all done with something like graphviz, plantuml, mermaid, Structurizr, or d2.
Very rarely I'll use excalidraw to throw together a one-off.
Semi, aside, but I'm desperate for a better way to make math diagrams (WYSIWYG style, not TeX). I asked about this a while ago and nothing is really doing it for me: https://news.ycombinator.com/item?id=38351370. Although since then I have heard about https://penrose.cs.cmu.edu/ as well. Right now I use Excalidraw because there's a fork (never landed... ugh) which supports TeX in labels. But its actual drawing tools are quite limited, not to mention janky. There are some other options not mentioned in that thread which I've found in since then, but I still haven't seen anything satisfactory.
If you made math stuff easy to draw I'd use your tool in a heartbeat. Unfortunately there's probably not a large market for that sort of thing.
I completely get this usecase, TikZ is great but sometimes WYSIWYG is just easier to work with. Re: math stuff in particular, you may be in luck, my tool does already support LaTeX equations as first-class objects. Check out https://vexlio.com/latex-equation-editing/ for a quick screencap if you're interested.
Obsidian has an excalidraw plugin that supports LaTeX both math and text. Then you can export your final diagram in many formats (pdf, svg, png, jpg).
I'm aware, but excalidraw is fairly underpowered for diagramming. It can do TeX but very little in the way of actual figures without a lot of finicky manual effort.
Mermaid - support in many markdown rendering pages. Embedding a ``` block in Markdown and having it versioned as text is the big win.
Graphviz - same basic reason as Mermaid, though no markdown support. Versioning text is a lot easier than versioning binaries.
Draw.io - if you've got to have a binary, this is it. In particular, it allows you to embed the drawing information in the image so that you can import a .png file into draw.io and get the drawing.
My big complaint about mermaid is that you cannot easily generate and store the SVGs without a browser engine—-even the CLI goes and runs Chrome, which feels insane.
Regarding graphviz/dot, I have been using it from what feels like the dawn of time and am somewhat sad that we haven’t improved upon it. The syntax, styling imitations, etc. put me off enough that I tend to avoid it.
Digging, there's https://github.com/mermaid-js/mermaid-cli
For graphviz, the "problem" with it is that it truly is general purpose and trying to make a general purpose syntax for diagrams is difficult. Mermaid tackles this by not having it be applicable to all possible graphs (flow chart has a different syntax than gitGraph) allowing for a better domain specific language for each subset of functionality.
https://mermaid.js.org/syntax/packet.html is really neat... and it would be a pain to do that in GraphViz ... but I believe that's more of a demonstration that it might be better to do specific syntaxes for specific types of diagrams.
The most general Mermaid form is https://mermaid.js.org/syntax/block.html - and that syntax doesn't really feel like it is an improvement over GraphViz.
mermaid-cli uses puppeteer to run a browser. The container packs Chromium. It makes no real effort to render anything without all that overhead.
I'm a big fan of both Mermaid and Graphviz - Thanks to GitLab supporting Mermaid we can put relevant project diagrams inline in Markdown docs that live in the same git repo as the rest of the project code.
And if I need to generate a graph programmaticaly then I instinctively reach for Graphviz as it's solid and can produce the graphs in so many different file formats that they're easy to include wherever they're needed. Your code is a lot simpler as it doesn't need to handle any of the rendering logic, it just needs to work out which nodes are connected by which edges.
Occasionally it can be hard to wrestle with but my go-to is PlantUML, which has a simple syntax and for better or for worse doesn't support many formatting options, so I can't get distracted tweaking the specifics of the layout
I've had a great experience using Excalidraw, which is also open source:
https://excalidraw.com/
https://github.com/excalidraw/excalidraw
99% sure this is not what you're asking for, but I think it's worth mentioning monodraw: https://monodraw.helftone.com
It's really useful for embedding diagrams in your code. Not so much for uses outside of code though.
Hey, I got some good use out of Emacs artist-mode for a while - so I love seeing ideas like this! Thanks for linking that, hadn't seen it before.
This looks so much fun, thanks for sharing.
Excalidraw for life. It can be embedded in Obsidian as well.
Draw.io is OK too, but the interaction is much slower when editing. The strict position/shape of arrows makes me want to clean things up way more than necessary and waste time.
I'd maybe consider miro or draw.io if I was working on something with other people and expected lots of edits and change history.
Mermaid is an interesting concept, but putting things in the reasonable location can be next to impossible and a single new connection can blow up the whole layout. And the integration is never quite polished - so many times I've been scrolling down a github page just to suddenly stop and resize a diagram. Then the panning/zoom is a bit clunky. (I know it's a client issue, but unless the defaults become reasonable, it's a mermaid issue too)
It depends on the use. If it is simple enough, mermaid diagrams have several advantages, like easy to understand versioning, and integration with many note taking programs.
https://mermaid.live/ ! Mostly because it lets me generate my diagrams in code rather than drawing them out by hand, which means I can version control them, as well as generate said code from human-language descriptions given to ChatGPT. Sequence diagrams are an especially favorite of mine.
There are a few good options in the code to SVG (PNG, JPG, whatever) space besides Mermaid. The venerable graphviz has been around since the 90s, I think, and uses the DOT language. The newer D2 language probably has the nicest overall aesthetics as well: https://play.d2lang.com/
Graphviz! The syntax is kind of absurd, but it produces some beautiful results and can be version controlled.
Definitely a personal fan of Graphviz as well! One thing I'm curious about are usecases that require version-controlled diagram sources. Do you guys have e.g. a build step that updates the rendered version somewhere? Or Confluence integration, etc?
I'm not the person you replied to, but for projects I maintain at work we've got a plugin for Confluence called Mark. It allows using Markdown to create Confluence pages, which is useful because the company uses Confluence for some reason. For diagrams (Mermaid, GraphViz, etc.) the source for the diagram is kept with the Markdown & I've got a CI job that generates diagrams & then runs Mark to update Confluence.
It makes it a lot easier to keep the documentation in sync with the code than having to remember to go to Confluence and update things. And avoids the pain of dealing with Atlassian's slow-loading site.
I work at a BigCorp with a fancy md-to-html generator that supports graphviz via code blocks, e.g.
But day-to-day, I actually use graphviz inside emacs org-mode (and in a private git repo). If you press C-c C-c with your cursor on the code blocks, it plops the rendered graph below.TIL org-mode can do that (though I really shouldn't be surprised). Thanks for the info!
I'm a latex user so I tried tikz and I like the results but it's often too much work. I end up most of the time using PowerPoint and using those drawing tools on a blank slide and then printing that slide to pdf so I get vector graphics then loading that into a pdf tool to crop it. Not a great system but still faster than tikz. I would love a better tool.
I'm clearly biased since I work at Datadog[1], but I use and recommend Cloudcraft[2] for diagramming. As I don't use the cloud I focus more on the manual design tools, but the automatic stuff are pretty neat.
Recently, though, I've been using D2[3] a lot and really liking it. The diagrams don't look as aesthetically pleasing to my eyes, but being able to design everything with a simple language is pretty cool, and helps with automation.
[1]: Datadog owns Cloudcraft, hence the bias. Plus, I work in the Cloudcraft team, haha.
[2]: https://www.cloudcraft.co
[3]: https://d2lang.com
Due to pricing model, due to cost CloudCraft is effectively unusable for small shops using accounts as an information boundary (per best practices for certain sectors).
Doesn't mean small firms wouldn't want to. Just, it's not sold that way. Super disappointing!
Does Cloudcraft do generic diagramming? At least from the landing page it seems pretty purpose-built for cloud architecture diagramming only. I also have to give major kudos for whoever made the call to go with an isometric projection... visually and mentally, it's a perfect choice for that domain!
The focus is cloud architecture diagramming, but you can use the design tools to diagram bare-metal architectures if you want or anything else, really. Heck, we had an internal game of chess going at some point and someone was rebuilding pieces of New York City using the design tools.
Depends on the diagram. But a lot of times it's OpenOffice Draw[1]. I might also use Archi[2] or GraphViz[3] depending on what I'm trying to do. I've also dabbled with using Papyrus[4] but it hasn't yet become a routine part of my workflow. Maybe it should though...
[1]: https://www.openoffice.org/product/draw.html
[2]: https://www.archimatetool.com/
[3]: https://graphviz.org
[4]: https://eclipse.dev/papyrus/
For work especially if it's for a large audience I use Visio or GraphViz. For my own consumption (and a couple co-workers) I really prefer mermaidjs, especially just to have it embedded in markdown files.
For your large audience cases - do those typically go in one-off presentations or are they for more long-lived things (design docs, customer-facing docs, etc)?
Where I work now 95% of the time it's long-lived things - design docs, architecture diagrams, etc.,.
I use http://multiplayer.app/
It connects to your system using OpenTelemetry and it lets you automatically document all the components, dependencies, APIs, etc. I prefer it to static, drag and drop whiteboards because I get immediate visibility without having to waste time moving boxes and arrows.
(Of course you can still create sketches if you want, but the real value is in getting the information you need immediately)
Such a shame products like this hide features behind Call Us or Let's Chat buttons. Just let people buy it.
I use Mermaid.js - either through Notion or via an Mkdocs static site.
Increasingly, I'm describing my diagrams to an LLM and letting _it_ generate the Mermaid.
I'm a Sales/Solutions/Systems Engineer/Consultant/Architect, but I also code still. I create loads of diagrams for work.
For Enterprise-Grade Slideware™, I'll use either Lucidchart or draw.io.
For my personal projects, I'll use Mermaid.
Hah, I appreciate the distinction on enterprise-grade... Anything in particular you like or dislike in particular from your experience with Lucidchart or draw.io?
I prefer draw.io, honestly. It's lighter weight and does 99% of what I use Lucidchart for. However, Lucid has a bigger icon library, which matters sometimes.
I instruct sonnet-3.7-thinking in Cursor Agent mode to draw latex tikz diagrams for me and that works iteratively quite well.
Draw a circle, add a label to the circle, draw a box right to it, draw an arrow from the circle to the box, and so on.
Excalidraw and PlantUML Each one has its own benefits / drawbacks. PlantUML is great for version-controlled files. Excalidraw for throwaway diagrams and discussion. Ocassionally I draw comic strips with Excalidraw.
Well I make https://gojs.net, so I just use the GoJS diagramming library to make diagrams :D
Of course, its made for developers trying to make applications, not end users.
Lucidchart has worked well for me in the past, with built in AWS icon packs.
Seconded, very comprehensive paid tool that's been around for a while and works very well.
Do you use your AWS infra diagrams primarily as internal documentation? Or, where else do they end up?
I’ve worked at some very large networks.
In a pinch and when on a call, it’s always Microsoft paint.
Also, https://draw.io/
I’ve used terrastruct a lot over the past few years. It’s really nice to write your diagrams with code.
draw.io mostly, export as PNG and include the actual diagram XML within the PNG so it can be opened and edited.
very rarely use mermaid, but good for some simple README/markdown style diagrams.
I find Miro the least vexing to use, but they are all pretty limited.
Mind if I ask what kinds of limitations you're running into with Miro (and the other tools)?
I usually will do a draft in notability then use draw.io.
draw.io
Indeed, very useful, because they can be embedded and have many integrations.
This is timely. I have grown disappointed with mermaid as it can only render stuff in the browser and libraries that use dot underneath but do not afford full control over the generation, so I have stared writing little Python programs that generate SVGs for things like sequence diagrams and store their output.
MermaidJS
Apple Keynote.
FigJam by Figma
excalidraw as already mentioned above
Visio. No drama, just works. Not cheap though.
plantuml.
None of the visual diagramming tools pass muster for me. They are all too fiddly and trying to use them requires a lot of yak-shaving to get the layout acceptable.
The diagrams I draw are all done with something like graphviz, plantuml, mermaid, Structurizr, or d2.
Very rarely I'll use excalidraw to throw together a one-off.
Powerpoint
Powerpoint is also my go to. It just feels more natural and I prefer editing locally, not in web browser.
plantuml, it's hard to beat diagrams as code
miro
tldraw.com