Ask HN: Which tool do you use to create beautiful diagrams?
For instance what they use for stuff like
Or I don't know how to describe it, because right now I can't find an example, but more "comic" like maybe. I know that Venka Subramanian once had such a nice article about Akka with beautiful diagrams, but can't find it either :(
217 comments
[ 3.0 ms ] story [ 249 ms ] threadYou'll have to design and style the diagram yourself though. With a vector drawing app, there are no constraints on how the diagram could look - the appearance is entirely up to you.
Dedicated diagramming programs like Omnigraffle (Mac only) and Visio (Windows only) come with predefined diagramming shapes and the ability to connect shapes with lines. They save time and include options to customise the appearance of the diagram. However, the finished diagram may be a little less visually attractive if you rely on the default settings.
Disclosure: I work for the Visio team, so if you have any feedback pls lmk.
1) Use pen and paper and/or graphviz to find most pleasant/understandable layout. It's may be not that obvious.
2) Use vector graphics editor (Adobe Illustrator, Inkscape or CorelDRAW) to draw by hand.
I always thought there must be some special tool, way better than Draw.io, OmniGraffle and everything, but just vector graphics. Maybe quiet some work.
https://cacoo.com
It does not take a lot of practice to get decent results and they also have some nice networking/AWS icon templates. I think they still have a free account option with limited sheets.
You can subscribe to a free account. The ‘signup free’ link is somewhat hidden under the pricing sections. The product has many nice drawing tools and templates and you can export to raster or vector formats.
You can make something like the one in your link by combining some preset icons Cacoo offers with regular drawing tools.
*Disclaimer: I’m a Cacoo developer
1. PowerPoint for composition. Unless whatever graphic you're making is simple enough to be produced by just 1 program, it's good to have a canvas-like program that you can assemble the components in. For me, that's usually PowerPoint, since it can be pretty free-form. PowerPoint slides can be embedded into Word documents as active content.
2. Equations: Word's equation editor or TeX. Other Microsoft Office products like PowerPoint and Excel have an equation editor built into them too, but those equation editors tend to be inferior to Word's. I used to copy/paste Word-equations into PowerPoint. Mathematica's an option if you're using it anyway, though it can look kinda clunky.
3. Graphs (excluding labels): Excel or a ray-tracer. For simple graphs, you can usually do them in Excel -- just have to learn the customization options (which I think folks often overlook, getting discouraged by the non-customized versions). For more complex graphs, sometimes it's just easiest to write your own ray-tracing scene. Matlab can be decent for some 3D surface figures, once you edit out its labels and replace them with better ones.
4. Labels: Word's equation editor or TeX again. While graph-creating tools can often insert labels just fine, they tend to be a bit rudimentary. So, once you make a graph, put it into PowerPoint, then insert your own axis labels and other markup by copying them from equation-editor tools. If you want to add arrows, circle something, or anything like that, then you can use PowerPoint's shapes.
5. Simple flow diagrams: Microsoft Visio or PowerPoint, depending on the kind. PowerPoint's probably better for the simplest things, but Visio scales better for larger diagrams.
6. Engineering designs: Whatever CAD you made them in. For example, I used to put chemical process schematics together in AspenTech's Aspen Plus, then copy/paste them into PowerPoint for further markup.
7. Minor tweaking: Paint, Paint.NET, etc.. If you just want to tweak a graphic or something before pasting it into PowerPoint, simple image-editing tools can let you do that.
8. Security: Write your own script. If you have some graphic that might have hidden tracking information embedded in slight pixel alterations, then you can do stuff like:
a. round pixel RGB values to the nearest 5 (or whatever);
b. merge pixels together (like Paint would if you shrink an image);
c. save as JPEG or some other lossful format;
d. randomly (using a CRNG) mutate pixel values by slight amounts to inject invisible noise.
9. Complex diagrams: Ray-tracing. Honestly I love ray-tracing stuff; it feels like a brute-force solution to just about anything you could want to draw, and if you like programming, I think it's one of those projects that you really ought to do at some point just as a matter of being well-versed in computers.
---
Overall, my big tip would be to be aware of the various tools that can do parts of the overall job well, then compose them in a general canvas-like setting like PowerPoint, and then finalize any little tweaks using an image-editor.
But for the sake of example, say that you download an image to be later used in a document/presentation that'll be made publicly available. The image server might choose to encode information like retrieval time, IP address, account you're logged in with, and any other tracking info it might have through cookies in an invisible watermark. Then after you post the image as part of a document/presentation, the original source can make that connection.
Ideally anyone tracking you would make the tracking mark cryptographically secure such that only they can interpret it, though there's also the possibility that they'd use some other mechanism that could reveal your personal information to anyone aware of the watermarking mechanism.
Alternatively, say that the image is retrieved over an insecure line, e.g. through HTTP, and, say, some country (with loose notions of civil rights) wishes to track its propagation. Then they can intercept the original image, watermark it, and serve the malicious version to you. Which such a state might wish to do if you're, say, working on a technology that they're interested in.
I mean, a scatter plot's axes can be drawn as cylinders while the points can be spheres, etc., which makes it simple enough to throw together from most quick ray-tracing tutorial projects.
But what's really cool is that, once you put some objects together that form graphs and such, it's trivial to merge them with other scenes. Like, I was really interested in having a 3D walk-through of a chemical processing plant, where I could insert graphs linked to real-time data, where the graphs themselves are just part of the ray-traced scene (rather than being something like a skin on an object). So then the 3D walk-through basically has pop-up data views.
But for stuff like documents, I mostly just think of ray-tracing as the brute-force solution to anything that's not more easily done using another tool. I think the first time I used it for a plain graph, I was frustrated by trying to make a plot that had both surfaces and point-bubbles in it. So, I figured, hey, surfaces can just be interpolations of sample points, and the point-bubbles can just be little spheres.
It's free open-source software, works on Windows, Mac and Linux. It gives great balance for drawing on grids (reduces arbitrary decisions) and usability (power to draw what you want). I've gotten several compliments at talks for diagrams made using this software, so I highly recommend it.
[1] https://news.ycombinator.com/item?id=18789345 [2] http://lightonphiri.org/blog/latex-consistent-diagrams-using...
Even better, it has export to PGF/TiKZ : see https://gitlab.gnome.org/GNOME/dia/tree/master/plug-ins/pgf
Likewise I'm a bit leery that Dia is requesting access to "system events".
https://mermaidjs.github.io/mermaid-live-editor/
+ Describe your drawing in code
+ Mostly intuitive syntax
+ Not very steep learning curve
- No visual editing: edit-compile-view cycle
- Time consuming
If I need control over every pixel I write graphics programs in Python or Cython or C, or use GIMP.
I use the graphtheory package a lot: https://github.com/taoari/asy-graphtheory.
I use it for the easy collaboration, but miss OmniGraffle every time I do.
Edit: And of course you can draw free hand. It's vector based.
BTW, until recently OmniGraffle was the only commercial mac app I used in past 10 years. Now I got FL Studio as well.
It makes it super simple to create good-looking diagrams, and it can do a lot more than just diagrams too.
I wish Figma would integrate the snapping behavior of Whimsical – that, I think, would be the ultimate diagramming tool.
I've been doing a lot of flow diagrams and PlantUML has been invaluable. I specifically like it because sharing the flow means sharing some text, which itself is vaguely human-readable. There's an online renderer (bottom of the page in the above link), which means simple diagrams are also quick to create and view. It's got a few different modes that it understands but I'd definitely add it to the list when you need simple vector graphics.
I use a combination of plant for sequence flows and lucid for arch diagrams.
My only complaint is that you can't manipulate layout directly. You can do some hacks like invisible directional arrows, but ultimately any change you make risks turning your beautiful diagram into complete spaghetti.
I wish there was a tool combining plaintext description with explicit layouting.
Has an online split screen view with your text on one side, and the diagram in the other. It's quite crude - no auto refresh, for example - but it works.
[1] https://marketplace.visualstudio.com/items?itemName=jebbs.pl... [2] https://docs.gitlab.com/ce/administration/integration/plantu...
PlantUML for sequence diagrams, state machines and the likes.
Powerpoint/Keynote for things that are presentations - and usually I will export one of the above formats as SVG, clean it up a bit, turn into PDF and drop into the slides. As a general rule all my diagrams must be vector based, and no bitmap objects should be embedded.
Confluence with Graphviz and PlantUML plugins for placing diagrams into documentation. This also gives more granular version control. Other diagrams may also end up in source control with the product itself.
Occasionally I have ASCII art embedded in source code, nearly all of this is hand cranked as I've yet to find tools that work for me. Almost always this is formatted to show up in generated documentation.
But most importantly is having consistent design elements - spend time having colour palettes that are consistent, typefaces and type positioning that match, that shapes and layouts are as consistent as possible. Having templates, colour palettes, and snippets help. Finally, understand basic colour theory, typography and layout. Looking at graphic design visual porn (Behance is a good starting point) after knowing the basic rules will hopefully give meaningful inspiration.
$7.99 per month for a single user or $4.99 per user per month for small teams.
It was one of the first browser-based diagram tools but it's kept up with the competition. Gliffy provides a wide variety of diagram types, design and theming options.