I'm guessing for a lot of people draw.io and Excalidraw are probably the go-to. If you use draw.io (or something else), what do you like about it, or what do you wish was better?
[1] - https://app.vexlio.com/ for the curious
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.
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.
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.
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.
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.
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/
schemdraw (python library) is a library for drawing beautiful circuit diagrams. It has a surprisingly effective flowchart part as well, that allows you even to draw custom beziers arrows and stuff. You can do manual positioning of everything, which is sometimes an anonoyance with mermaid. Outputs to svg or png. https://schemdraw.readthedocs.io/en/stable/
matplotlib (python library), people know it for drawing charts and such things, but if you want to build your own drawings that deviate strongly from existing solutions, all the drawing primitives are in there. See for example: https://matplotlib.org/matplotblog/posts/mpl-for-making-diag...
And for just wrapping your head around something, a piece of paper and a sharpened pencil are surprisingly effective at not wasting your time.
It's really useful for embedding diagrams in your code. Not so much for uses outside of code though.
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)
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
Doesn't mean small firms wouldn't want to. Just, it's not sold that way. Super disappointing!
For freehand drawing, to me, nothing beats Excalidraw[2]. I use it for pretty much everything—from system design work to planning a project and explaining a concept. Such a wonderful tool from the Czech Republic.
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.
```dot
digraph { a -> b }
```
[1]: https://www.openoffice.org/product/draw.html
[2]: https://www.archimatetool.com/
[3]: https://graphviz.org
- To be open source, or open specification/format.
- Easy eaditable (gui/tui/source), that is, primitives. I don't want to edit a text based diagram with a text editor (emacs artist mode).
- Free design features, so I have some control on the presentation.
- Render to text diagram as a first class feature, so it can be integrated in source code/control. From text rendering it can easily be converted to vectorial/raster.
- CLI to render.
- DSL, better with geometric (position, size) and styling features (color, bold face, ...).
I have found nothing that meets these criteria.
I'm actually using https://metacpan.org/pod/App::Asciio as the best approach.
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)
Some quick notes about your app:
- No touch zoom/pan. Apart from that it worked okay on a Galaxy Note phone with the pen.
- I managed to make a shape vanish by (I think) rotating it quickly. I couldn't repeat that.
- The polyline selection seems quite broken. Draw a shape, then draw a polyline around it. Now you can't select the first shape, even though it's not obscured by anything.
Increasingly, I'm describing my diagrams to an LLM and letting _it_ generate the Mermaid.
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.
For Enterprise-Grade Slideware™, I'll use either Lucidchart or draw.io.
For my personal projects, I'll use Mermaid.
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.
In a pinch and when on a call, it’s always Microsoft paint.
Of course, its made for developers trying to make applications, not end users.
very rarely use mermaid, but good for some simple README/markdown style diagrams.
I have tried Graphviz but the diagrams looked shoddy.