Hacker News new | past | comments | ask | show | jobs | submit login
Ask HN: Which tool do you use to create beautiful diagrams?
681 points by lichtenberger on Dec 30, 2018 | hide | past | web | favorite | 212 comments
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 :(

Very surprised to see no one mentioning yeD here. It is _the one_ diagram making tool I go to, when I make any diagrams related to software development. The only areas where I had issues with it, that I can remember were:

- "How do I teach it to make these halfcircle-circle joints of component diagrams?"

- Sequence diagrams are a bit slow to make with it, because yeD not knowing their semantics and not doing much for you.

Apart from that, it has many features I depend on and that save time:

+ far more functionality than things like drawio

+ performance when dragging stuff around, no lags like in many browser apps

+ Export formats: SVG, PDF, PNG, graphml (its own format, so that you can edit later), others - Also looking like the diagram you created and looking clean, now like Dia

+ forcing rectangular edges

+ connecting edges and shapes so that they stick together, still enforcing rectangular edges, something I find very difficult with other tools like Inkscape and being able to connect the edges to any point of the shape, not so limited like Dia.

+ moving anything will bring up helping lines and snapping to certain alignments

+ when edges cross there is a setting to display "bridges"

+ Import SVG as new shapes

+ many settings for shapes and independently for labels

+ can add multiple labels to a shape or edge (multiplicities in class diagrams for example, or cardinalities in ERMs)

and probably more thing I don't remember right now.

It is one of the very few Java tools, that really works well for me.

For ASCII I recommend taking a look at Emacs artist mode, especially, if you are already using Emacs to write the code.

I used yED a lot at my previous job and I found it to be quite clunky in several cases, sequence diagrams above all. Also it doesn't look very slick, and learning how to properly tweak object props is not immediate. I often resorted to MS Power Point for quick and dirty diagramming.

With that said, it's just good enough for a free product, though it doesn't have any special edge over some of the web-based alternatives out there.

A very impressive feature IMO is automatic re-arrangment. Typical use case, when you want to draw complex activity of class diagrams when, e.g. following some legacy code, or just brainstorming ideas, it's easy to end up with a very tangled mess of shapes and arrows. yED has this magic button that rearranges the graph in a smart way, mostly based on direction of edges. And suddenly your diagram looks sane again. Kudos to them for this.

Seconded, yEd is amazing.

I've found it fantastic for eg UML-like class diagrams. It has a beautifully simplistic approach to UML (which is an overdesigned mess, but that doesn't mean that all class diagrams are useless): for each class, the method list and attribute list are just two multiline text fields. Compare that to other UML tools that have a "Edit Method" dialog and whatnot.

The UX is amazing, especially once you get the hang of it and know how to circumvent its few quirks. I find that for many kinds of diagrams, drawing them in yEd is faster than on paper (the actual drawing is roughly as fast, changing my mind is an order of magnitude faster)

Thanks, first time I hear of it! Link: https://www.yworks.com/products/yed

Since it's free, even for commercial use, I'm wondering what their business model is.

Yed is the "demo product" for their java library which you can integrate into products to get diagram drawing and editing functionality. I know of a few enterprise products that use it. I have worked for the professor where yworks was started and we got to use the generous academic license for the library.

yWorks employee here, though not working on yEd. As shezi noted, it's a demo for the capabilities of our commercial diagramming library. Said library handles displaying and editing graphs, automatic layout and analysis algorithms and yEd showcases all of those things to some extent. The library itself is quite customizable, though, so our customers often create applications for very specific diagrams and interactions with it.

I would assume, however, that the intersection between yEd users and yFiles licensees is fairly small, though. It still remains a good showcase for what developers could do with the library (along with the 100+ demo applications that ship with it [1]).

[1]: https://live.yworks.com/demos/

yEd is really great! I stumbled upon it while googling about 7 years ago, and it was awesome even then (and it comfortably beat visio). What's even more cool is their (newish) online version, which means you can do all the diagramming in the browser and even share it conveniently.

Thank you to the creators of yEd - you've put together a wonderful product! If there is one feature I would like to see, it's the ability to bulk format elements and label fonts. From what I remember, that was just a tad monotonous.

yWorks employee here, though not working on yEd. Thanks for the kind words.

As for your wish, I think that's already there. You can select many items at once and change them all in the same way, e.g. changing the label font. To select all elements of the same type, simply select one of them (e.g. a label (you may have to use Ctrl+click to select a label on top of a node)) and press Ctrl+A. That should select all labels, while not selecting anything else. From there you can change properties for all of them at once. I think we've added this to yEd Live (the online version) as well recently.

There is also a powerful selection dialog under Tools > Select elements where you can basically select everything that matches certain criteria, such as all nodes with the same color, or predecessors of the currently selected node. Afterwards you can change properties in the panel as usual. This one only exists in the desktop version, though.

I use yED, for quite some time now


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.


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.

The best thing about plant is that you don't draw things out. you describe them. I actually feel like this is the way we SHOULD do diagrams so that we have flexibility to re-do them. I wish that Markdown would include plantUML natively.

Demo of PlantUML text and diagrams: https://github.com/joelparkerhenderson/demo_plantuml

I love PlantUML so much that I made my own Confluence plugin Called PowerPlantUML: https://marketplace.atlassian.com/apps/1219122/powerplantuml...

PlantUML looks great, all the features I need, but their page is infested with fake ads, including fake download buttons of 5 different kinds. They also link to download page on SourceForge (hmmm, it's still alive) with even worse ads. Maybe it just me, but I immediately lost any desire to try it.

Also, text diagrams allows the use of source control and versioning, which is nice.

As well as accessibility for the vision-impaired, I favor GraphViz and PlantUML for all these reasons

I second, third and fourth this. Anytime I'm not sure about a design, I sketch it out in plantuml and play around with it. Every project of mine has at least one or two plantuml diagrams checked into it.

I can highly recommend the PlantUML plugin for Visual Studio Code [1]. I mainly use this for sequence diagrams and component diagrams. The plugin makes editing and previewing the diagrams awesome. Also checkout PlantUML integration for GitLab [2]. We recently deployed this at work, so not many miles yet, but looks pretty awesome. Main feature is to render embedded PlantUML markup in text files (markdown).

[1] https://marketplace.visualstudio.com/items?itemName=jebbs.pl... [2] https://docs.gitlab.com/ce/administration/integration/plantu...

I too use PlantUML a lot.

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.

Use plantuml a ton. Their google docs integration is quirky (it is hard to tell if you are going to edit the text in the doc or the diagram) but it's fast and anyone can edit it easily; I love it.

I use a combination of plant for sequence flows and lucid for arch diagrams.

I'm 100 agree! Plantuml is great, not as pretty as other tools but build diagrams for internal doc is awesome!like conflucence, wiki, sphinx, etc.. I'm in love with!

For serious print work, still nothing beats Illustrator. (And I really really wish something would.)

I really like gravit.io as an online lightweight version of Illustrator. For me it has been especially good for online targeted diagrams, e.g., for blog posts & web pages.

For my shameless plug, I helped build a whiteboarding tool that is great for simple hand-drawn diagrams, and truly looks whiteboardy. https://limnu.com. We intentionally kept the tools simple so you can iterate and obsess over the idea rather than the look. That might not be what you mean by “beautiful diagrams”, but personally I find a good whiteboard diagram quite beautiful. Maybe it’s a functional beauty. We used Limnu to create all the diagrams for the online book “Ray Tracing in One Weekend.” http://www.realtimerendering.com/raytracing/Ray%20Tracing%20...

I also worked at LucidChart for a while, and I know first-hand it’s very powerful and quite good compared to almost everything online, especially for flowcharts and serveral pre-baked styles of data driven diagrams.

Recently I used plotdevice.io to build a 3d line renderer for a bunch of diagrams in a book. It’s a Mac environment that is similar to Processing, but is based on Python and has built-in PDF export.

I frequently fall back to Illustrator too. It lacks a lot of features, but the low level control is great and it's still the best vector graphics software.

I've been using vectors since Corel Draw 4 in the 90s and have tried pretty much everything. I still prefer Illustrator over Sketch, Affinity Designer, and all these new web based tools (Figma, etc).

I've switched to Affinity Designer recently and have been pleasantly surprised. There's some really bad and clunky Adobe UI in Illustrator which affinity improves on. There's only been one or two thing's I've missed from Illustrator that are in their feature pipeline so hopefully they'll be coming soon.


I use Simple Diagrams https://www.simplediagrams.com/, specifically because it has a hand drawn feel, which I think makes people feel less intimidated and also conveys the impression that what is shown is not cast in stone.

Really nice, unfortunately no support for Linux.

In one of the videos a guy tells something from a tool, where you can simply sketch with pen/paper and then make a picture and it's converted to a vector graphic? How cool is that :-)

Adobe Capture (mobile app) does that. There are also several others.

Yeah, somehow the Android version of my tablet is not supported. But I've installed a sketching app, pretty nice.

Wow this is great. I can’t believe I haven’t run into this in my searches for diagramming tools. Thank you

Wow, this is beautiful. Will definitely give it a try.

Looks nice, is it possible to use external vectors?

Wow, that's really nice, thank you :-)

I've been looking off and on for the past year or two. The scene is depressing. Or there is just no market for cross-platform applications. However I doubt that is the case as over time there have been more fully-featured, once-desktop-only applications competing successfully cross-platform. (Figma vs. Sketch for example.)

Draw.io is free but requires you to do so much work yourself to create objects, size them, group them, connect them, arrange them.

Most other tools I've found when googling around require the same level of effort to use as Draw.io: AsciiFlow, Gliffy.

Omnigraffle is out of the picture since I need to be able to share and use graphs across Mac, Windows, and Linux users -- without needing to describe multiple tools and conversion between formats or anything.

The simplest tool I've seen that just works is Visio. It is primarily click-and-drag and has great suggested connecting, sizing, grouping, and arranging features. It has an online client that works in Chrome in Mac, Linux, Windows, and FreeBSD. On Windows there is also the fully-featured desktop client. It's also familiar/intuitive enough to old-school Office users and feels like a regular graphics application to those of us less Office-oriented.

I don't enjoy spending as much time as I have hunting for the ideal solution. But I'm happy to have found Visio.

Thanks for mentioning Visio. I work for the Visio team, so if you have any feedback pls lmk.

Mac. Pleeeeeeease support Mac! I'm a technical consultant who was given a Macbook for work and I have to run a VM to use Visio. We're working on spec'ing out a replacement technology that works on Mac, but none of the competitors are as good as Visio, and all of our clients expect Visio. In 2019 we've got a team of 65 people all ditching Visio (and our Windows VMs) and going with LucidChart or Omnigraffle because we need something that runs on Mac.

Also you probably don't have control over this, but I tried to add Visio to my personal Office 365 subscription for personal use, but apparently you need a business subscription to get Visio? What's the point of that? I want to give Microsoft my money but they just won't take it.

Free hunter: . The problem you encountered was an "improvement" MS introduced in with Office 2016. They decided that Visio was a "business" product that home users could not possibly want to use ... <big sigh>! More likely, that home users could not AFFORD to use at the price point MS is selling Visio. . Initially, they made it impossible to install Visio (and Project) with ANY other Office bundle. OOPS! It took them almost a year to fix for business users. . Here are a couple of links from MS about installing Visio . https://support.office.com/en-us/article/Install-Visio-f98f2... . SUPPORTED SCENARIOS FOR INSTALLING DIFFERENT VERSIONS OF OFFICE, VISIO, AND PROJECT ON THE SAME COMPUTER – DIFFERENT YEARS AND MSI VS CTR. . https://technet.microsoft.com/library/mt712177%28v=office.16... . This is an EXCELLENT resource. Starting on October 11, 2016, Office 2013 software that uses Click-to-Run can be installed on the same computer with Office 2016 software that uses Click-to-Run. . We can also Use the Office Deployment Tool to install volume licensed editions of Visio 2016 and Project 2016 . . Note: The MAK keys currently available on the Volume Licensing Service Center (VLSC) aren’t compatible with this specific installation scenario. We’re working on a solution, but we currently don’t have a date when we expect the solution to be available. KMS activation is available.

Try Omnigraffle Pro - imports and exports to Visio.

I've successfully used lucidcharts.com to import, edit & re-export back to Visio.

Consider the case of a metabolic pathway. It's a diagram that shows different biochemicals, and they're connected to one another by arrows labeled with an enzyme.

In this situation, you often have several chemicals that can all be converted to something you want to highlight. When presenting such things in linear logical order for explanatory power you'd have all the precursors in a row and then have them all have nice arrows going to the product.

What I had the most trouble with was getting the arrows to combine nicely with curves. Consider something that makes it so that when multiple arrows go to a single connection point, it replaces the arrowheads with a single composite arrowhead. This deals with slight angle issues and color mismatches. Arrow labels were relatively straightforward to get adjusted right, but arrow bodies were not.

In this kind of diagram I also need to often pull a secondary arrow out of the main arrow to indicate a species that was removed, for instance ATP might come in and go out as ADP. This is very tricky to blend right visually, the arrows will be overlapping, they're defined to touch from the center of the secondary arrow to a point on the main arrow, etc. Consider a tool to launch additional arrows (casting both forward and backwards if desired) from evenly spaced control points on a main arrow?

Example of how bad it is when most people do it (this one is typical or above average). If Visio could to those right (don't worry about adding a chemical editor, those are just PNG or vector graphics from ChemDraw 100% of the time) it would make biology so much easier to present nicely.


This is probably a long shot, but if y'all ported it to Linux, I'd buy it in a heartbeat.

(Or improve the feature-parity between the online and desktop versions, like the other commenter suggested.)

Please make a Mac version

Since you are on the team, puzzle me this. . The original creators sold out to MS back in the mid 2000's. Now MS calls it an "Office" product. . So why is Visio not included in ANY Office bundled offering? It is only sold as an overpriced standalone product, back to 1980's marketing! It strikes me as contrary to the key concept underlying Office! That is selling bundles of products cheaper than standalone competitors.

As this question shows, there are lots of free and low cost alternatives.

Visio (and Project) should be included in at least one Office bundle, ie Pro Plus.

Make it more stable.

Everybody in my class started with Visio, they almost all went to alternatives due to unreliability. Crashes with no autosave files happened way too often.

I'm a long-time Visio user (maybe 10+ years), and I also find it crashes way more often than any other Office product.

Bring Visio online to feature parity with Visio desktop! Demonstrated progress/goals toward this would go a long way too.

Sorry, that is not going to happen. (my opinion as an informed user ...) . The Office online (onlie <sic>) (cr)applets will NEVER have feature parity with desktop equivalents. The online applets are intended for simple use only. They can read and do simple edits on files created in the "real" desktop applications without corrupting features they cannot edit. . They are essentially a "bait and switch" tactic. Get you used to using the simple applet, to "encourage" you to spend money to rent Office 365 (their preferred product). Like "Office 2010 Starter" that came "free" with some computers, for a short time. .

Confused about your premise. I'm paying for service now. I pay the same price for the desktop version as for the online version.

I'm not trying to save money, I'm trying to ensure a good experience for folks who need to use Visio on Mac/Linux/FreeBSD in addition to the Windows users.

I love Visio. Good job.

Is there a way I can interface C# to it easily? Basically I'd like to add some intelligence to a standard Visio document to almost make it a schematic capture system. Even if that isn't possible, keep up the good work!

Please release a full client for macOS :)

Maybe it's just because I haven't invested the time to learn it properly, but the one time I was forced to use Visio instead of my go-to, Dia, for a diagram I found it excruciating. Specifically I recall not being able to work out how to make it let the diagram be arbitrarily large instead of forcing me to cram it onto a single page.

As someone who went out and bought a license and used it frequently for figures in grant proposals and other documents, Visio is excruciating. It's not even much of a learning curve, it's just frustrating and feels like you're fighting it.

This is because I was using Visio where the final product needs to look aesthetically perfect, and the workflow would get you to 95%. But we all know how much manual tweaking it takes for that final 5% -- getting none of the text overlapping, making sure arrow dashes don't alias with each other, making sure colors can be distinguished, moving the logical structures around to get the overall shape and flow right, and so on. That stuff is pretty good, and I've only seen worse in other tools. But it's still excruciating.

It’s an unusual, red-headed stepchild product.

Personally, it’s unusual in that it’s an acquired product that’s sort of an Office component and it has gotten worse with every release until very recently. Even Outlook, while awful, gets better.

BTW, Visio isn't the only Office component that was acquired, FrontPage was as well (both the client and the server-side extensions), and even venerable PowerPoint, which was Microsoft's very first acquisition back in 1987.

This represents my exact experience with diagramming programs. Over the past five years, I setup a virtual machine just to run Visio, at least 5 times.

Draw.io could be so much better but it is exhausting to create anything with it.

How is Draw.io different than Visio when it comes to creating our own objects, sizing, grouping, connecting, arranging them?

It was difficult for me to articulate in the original comment and still difficult for me to articulate now. :) Give it a try yourself, Visio has free trials. If you don't see a difference then it doesn't matter!

But it had to do with all of those items being very manual in Draw.io with little assistance. Whereas Visio auto-resized and offered connections and new elements very fluidly.

It seemed like it was taking me 20-30 minutes to do a simple diagram on Draw.io with good layout and sizing when it took me 5 minutes to do it in Visio.

I disagree. I found draw.io really simple and fast compared to visio.

Depending on what type of diagram I need, I use one of:

1. LaTeX + TikZ - if my diagram is simple or lends itself well to the TikZ syntax, I can usually get it done quickly and have it look professional.

2. Graphviz - if I'm drawing anything that can be represented as a directed graph, Graphiviz is fantastic due to it's automatic positioning and layout.

3. ipe (http://ipe.otfried.org/) - for heavy lifting where neither of the above will cut it, ipe does a great job. It's basically xfig, but on steroids and with a modern UI. Here are some samples: https://github.com/otfried/ipe-wiki/wiki/Showcase

For others reading: TikZ can be made arbitrarily complex. I used it to make this trigonometry puzzle, for example: https://imgur.com/a/z0Pqnlk

The downside is that LaTeX doesn't support many primitives that engineers are used to, such as arrays.

I second ipe, used it together with LaTeX for my theses. It looks great, gives you many options while being an easy-to-use WYSIWYG tool and integrates with LaTeX typesetting (you can typeset in the diagram). The PDF export makes it also usable in other contexts.

Graphviz for simple diagrams that can represented with basic shapes.

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.

For a subset of "ASCII art" diagrams, check http://asciiflow.com I find it handy sometimes :)

I love ascii flow bc it's universal, copy and paste, etc

Try Emacs artist mode for ASCII diagrams in code.

If you're using PlantUML on Confluence, check out the free plugin that I threw together: https://marketplace.atlassian.com/apps/1219122/powerplantuml...

I use Dia: http://dia-installer.de/

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.

One thing I've noticed with Dia is that it simply doesn't launch for me. Does Dia require X11 on a Mac? If so, I couldn't find anything in the documentation stating this (although not launching on Windows is covered).

Likewise I'm a bit leery that Dia is requesting access to "system events".

Yes, I believe it requires X11 on Mac. I use XQuartz. Getting it to run the very first time may be a bit challenging, but it's worth it.

Well it's bailing right now because of an rpath issue (which looks like it's been an issue for a few years now). Which is to say that this isn't really very encouraging for dia on OSX.

I use it, too, and I wish it had LaTeX/Pstricks export. I used to use LatexDraw, but it's too limited.

Dia does have a capability to export to PStricks. See https://gitlab.gnome.org/GNOME/dia/tree/master/plug-ins/pstr...

Even better, it has export to PGF/TiKZ : see https://gitlab.gnome.org/GNOME/dia/tree/master/plug-ins/pgf

According to one of the siblings [1], Dia can export to LaTeX. I haven't used it myself, but a ddg search yields a promising workflow [2]. Myself, I usually export it to SVG, which I then use Inkscape to convert to PDF and include it in the LaTeX file that way.

[1] https://news.ycombinator.com/item?id=18789345 [2] http://lightonphiri.org/blog/latex-consistent-diagrams-using...

https://www.draw.io is an elegant open-sourced program for that purpose. It has apps to install on Mac, Windows. Highly recommend.

This is my first choice as well. Found it when I moved from windows (and therefore Visio) to Mac. Doesn’t have exhaustive feature parity, but everything I needed for UML drawings works great. Natively supports source control to Github which was also great to keep documentation with the code.

I use Monodraw[1] on my Mac, I really like it because it's ascii rather than image or vector based which makes including the diagrams in markdown really easy.

It also has a really simple UI that allows me to quickly map out my thoughts so I use it for a lot of things.

1. https://monodraw.helftone.com/

I’m also a happy Monodraw user.

I felt sad to hear a few months ago that they are stopping its development [1].

That being said, the software —in its current version— works very well.

[1] https://blog.helftone.com/monodraw-maintenance-mode/

This is actually pretty nice. Sometimes to explain stuff and flows, I draw shitty graphics in emails by using a combination of ASCII characters. This is like the pro version of that.

Shameless plug: https://diagramiq.com/

This is a product that I've been working on for the last 2 years. You won't be able to create those animated diagrams (yet), but you can create pretty much anything else: Flowcharts, UML, BPMN, VENN, server architecture and other unique diagrams.

Interesting. But, having no idea about the future pricing, I'm very reluctant to really use it.

I totally understand your concern. That's why a free plan will always be available for basic diagramming needs. Our pricing will be tied to advanced features that are not publicly available yet.

This is really great

I really enjoy lucid chart, after using gliffy for a long time, I am now stuck on lucid.


yeah me too, 'stuck' :) I have been using it for several years but I am getting a bit annoyed by it. I just don't think I extract enough value from the paid product. Also, I feel locked-in too...

+1 here, surprised to not see that it's not the top response here. It's always been slick, reliable and easy to use in a collaborative corporate environment. I would wager that Visio is probably similarly nice but I've never played around with it.

Not like the example you've given, but for well designed and easy to configure diagrams that can be saved or exported in plain text (e.g. for use in documentation, websites or markdown) I use Monodraw: https://monodraw.helftone.com

For graphical diagrams I use yEd or occasionally draw.io for quick and simple graphical flow charts (online or offline as a gross javascript web frame - but it works well enough and it's free).

Monodraw is great. Well worth it.

Having worked in a few IT architecture departments at huge companies the most popular tool by far at these companies really shocked me at first: PowerPoint. It's not that hard to build these things by hand using basic shapes. One of our diagrams was about 3 feet by 4 feet when printed and had thousands of elements and lines connecting those elements. Similarly now that I don't use Windows I've reverted to Google Slides.

There's a senior architect in my organization who makes the most incredible, beautiful diagrams I've ever seen. He just uses PowerPoint.

This is HN at it’s best, nobody answered the original question. Diagrams such as the one on the git-lfs site are most likely created with the traditional tools in the Adobe Creative Suite (or something similar). I have seen and used my share of design, diagramming and modeling tools over pas 20-30 years and until now I haven’t run into anything that ticks all the boxes. Usually diagramming and modeling tools aren’t the ones to make something look really nice.

I used to use Dia. I now swear by Inkscape. Both tools are free; both are quirky and idiosyncratic. Once I got past the idiosyncrasies, I fell in love with Inkscape.

Yeah, really great for all sorts of vector drawing, including diagrams.

I love using Mermaid https://mermaidjs.github.io/

There’s an online editor too which is basically what I use most of the time.

I use Mermaid as an extension in MediaWiki and can generate graphs from the structured data in my wiki, pretty slick.

There are some tweaks that would be really nice to make it more useful (designating two nodes to be on the same level, more control over node positioning, etc.), but I'm enjoying it so far.

Mermaid lets you create diagrams using code. Really nice.

I use Whimsical. https://whimsical.co/

It makes it super simple to create good-looking diagrams, and it can do a lot more than just diagrams too.

Thanks for the mention! We built Whimsical for a simple reason - all the existing diagramming apps had poor UX. It didn't feel like any of them were really optimized to visualize ideas as quickly as possible while make the result look decent.

I used Whimsical to spec a complex product flow for my last project and it was by far the fastest diagramming tool I've ever used. It is not, however, a way to make beautiful diagrams.

I wish Figma would integrate the snapping behavior of Whimsical – that, I think, would be the ultimate diagramming tool.

I was hoping to find someone else mention Whimsical too. It's so fast to use. I've been recommending it to coworkers and its allowed them to be much more productive.

I make such diagrams in two steps:

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.

Thank you :-)

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.

Depend of what I have to draw...

- TikZ good for nearly anything, the best results in any case, but a bit time-consuming. I use it only when I really need to draw impressive things (that happen really rarely);

- Dia (Gnome) works well for various / casual / simple stuff especially because of it's variety of icons/block libraries immediately available. I use it to made quick stuff that does not really need to be "visually impressive" and I do not have too much interest in them;

- Ditaa (with org-mode) is nice for simple/quick drawings for witch pure TiKz is overkill and Dia as an external tool is overkill due to the simplicity/regularity of the drawing itself;

- Matplotlib with Python or Hy can be a nice tool depending on what kind of diagram I have to produce;

- Last mentioned, more as a curiosity since I discover it recently and essentially tested only for play: https://github.com/cuichaox/dml

Draw.io - though a friend actually used some Jira plugin that produced nice results.

I don't think that those diagrams can be easily made with Draw.io. I mean for instance the diagrams from Git LFS.

I like using http://nomnoml.com, mostly, since its intuitive syntax allows you to create nice diagrams in only a few seconds.

I built an R package to easily support nomnoml in R Markdown: https://github.com/javierluraschi/nomnoml


+ Describe your drawing in code

+ Mostly intuitive syntax

+ Not very steep learning curve

- No visual editing: edit-compile-view cycle

- Time consuming

I use TikZ in LaTeX, it's awesome, has a comprehensive manual, great examples website http://www.texample.net/tikz/examples/ to learn from. The secret, I've found, is to avoid programming in TikZ as much as possible--it's terribly clunky as a language for anything beyond the basics--by writing macros in LaTeX (with \newcommand) to use in TikZ for any shapes you'll need repeatedly. They can have as many parameters as you like.

If I need control over every pixel I write graphics programs in Python or Cython or C, or use GIMP.

I also mostly work in LaTeX but I draw with Asymptote: http://asymptote.sourceforge.net/gallery/. It matches the same bullet points as you have written but I like that is it standalone, not usually part of the LaTeX compile, and that it carries the MetaFont algorithms to 3D. There is a great tutorial at https://math.uchicago.edu/~cstaats/Charles_Staats_III/Notes_....

I use the graphtheory package a lot: https://github.com/taoari/asy-graphtheory.

Keynote is actually a surprisingly good tool for building diagrams once you learn the interface and features. I use it for all of our architecture diagrams and for generating printable posters of such to hang in our office. I have tried nearly everything else, but unless you need semantics native to your diagram, Keynote is (oddly, I know) the best I have found.

It also has great animation support which would support some of the “flash” seen in the OP’s example.

OmniGraffle works well for me. (MacOS)

I second this. Very good tool for diagramming. All kinds of stencils / shapes / objects: Wireframes, UML, workflows, BPML,...

Edit: And of course you can draw free hand. It's vector based.

Around 2009 I saw someone's work made with OmniGraffle and it was so beautiful that wanted to have that too.

BTW, until recently OmniGraffle was the only commercial mac app I used in past 10 years. Now I got FL Studio as well.


Clickable link to OP’s example: https://git-lfs.github.com

Old School rules: easy flow diagrams with GNU PIC: http://floppsie.comp.glam.ac.uk/Glamorgan/gaius/web/pic.html

How does that diagram even work on that link?


It's a gif, but it becomes a static afterwards. I see no changes on the frontend whatsoever, no CSS property changes, no changes in image, etc. No canvas element etc. Refreshing the page, the gif stays static, but running it through a different browser replays gif animation.

I've never seen this done before, how does that work?

It is a feature of the GIF format. You can specify how often the animation shall loop or that it should loop forever.

ah I didn't know GIFs could do that.

I found a tool online for changing number of loops, set the value to 1


I haven’t inspected it myself (I’m on mobile atm) but usually that kind of thing is an animated SVG. You can animate SVG nodes with CSS just like HTML

True, but its just a gif file on the page. I can't seem to figure out how it stops the gif animation though. I've looked into this topic before, normally you apply a canvas element on top of it capturing one frame of the image. Or you can hotswap the image / gif at end of animation. But there's none here though, neither SVG or canvas.

It stops at the end of its animation here as well too, https://git-lfs.github.com/images/graphic.gif

I didn't see the answer on stackoverflow. https://stackoverflow.com/questions/5818003/stop-a-gif-anima...

Animated GIFs loop a specified number of times. The browser simply isn't re-running animations that have finished when the page reloads.

If you want to see it animate again, do shift-ctrl-r or shift-reload.

I personally feel that most of my use cases are covered by ASCII Flow (http://asciiflow.com/) or MermaidJS (https://mermaidjs.github.io/mermaid-live-editor/).

For everything else that cannot be covered by these two I break out my pen and paper and click a picture.

Same. I love to draw with a pencil and paper. It's also much quicker. I snap a photo, and then finish it off in GIMP (crop, increase the contrast, add an alpha layer and use the fuzzy select / magic wand to delete most of the white background).

Ends up looking like this: https://erdo.github.io/android-fore/03-reactive-uis.html#qui...

Easy to make minor changes, but probably not great for complex sequence diagrams of course (or collaborating on a diagram with someone else - but that's better done just on paper anyway IMHO).

For the kind of diagram in your example I have been using Cacoo for some time now:


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.


I use balsamiq all the time - helps me make diagrams with a sketchy feeling. It is designed to be used for the mockups only but I find myself using it for everything. You might have seen it used in (pretty famous?!) developer roadmap https://github.com/kamranahmedse/developer-roadmap or in some of my blog posts https://medium.com/tech-tajawal/rabbitmq-at-tajawal-c4eeccdd...

I've been using Balsamiq since it first came out years ago - it was one of the 1st popular wireframing tools.

It kind of feels like it's stood still though - they've had years to innovate, but haven't really. At the very least, I wish they'd add more shapes/components, because the library you get is severely lacking.

I find it a clunky tool sometimes, but the industry standard for those kind of diagrams in my field is Microsoft Visio. The icon database is fairly high quality, vector graphic, seems to have been done by professional graphic designers. The arrows actually have pleasant curves, it supports theming, etc.

I'm sure there are other tools, but the output quality is great. It's expensive though. I've seen some online tools that replicate the functionality and they're awfully close but have even more quirky UI issues that get in the way of getting it done. I don't want to be spending more than an hour on a nice figure for a publication, and even Visio ends up taking me three times that.

I mostly use web sequence diagrams, and commit the text.


Otherwise I just draw on a white board and take a photo Then finally Visio if needed.

Github employs a bunch of designers. The diagram in this specific example looks like a custom job to me. Probably Sketch or similar tool.

That said, my old standby is OmniGraffle. Makes it super easy to create any type of diagram on macOS.

TikZ. Takes a bit of study, sure, but I can do nearly anything I want now in a reasonable time. And it will look amazing.


eg. this Pure CSS Flowchart:


I use Cacoo. https://cacoo.com/

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

Every diagram I've made in the past 2 years has been done in Google Slides.

I work a lot with probabilistic graphical models. I use Daft for that.

Daft: http://daft-pgm.org

I also work with Turing machines and other automata/complexity stuff. I use TikZ for those purposes. It also seems to be versatile.

TikZ: http://www.texample.net/tikz/

Daft seems pretty cool, but kind of verbose. You should check out this TikZ package for graphical models: https://github.com/jluttine/tikz-bayesnet

Gliffy: https://www.gliffy.com/

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

To me it's less about making gorgeous diagrams and making shared collaborative diagrams. IF other people working on or reading the document can't tweak the diagrams easily then they're not useful to me or make me do a lot of extra work. So I prefer things like Plant UML or Lucid Charts for docs / diagrams / arch stuff.

I also have gotten to the point where I care more about speed / consistency / access than pretty. you can spend HOURS just tweaking color schemes on diagrams. If we're going to take the diagram to print in marketing material, sure spend that time. If I'm trying to get an idea across to others, nah, not worth it. To me it's a parallel to the go formatter argument.

Also auto-layout tools like plantuml mean I spend minutes on things insead of endlessly tweaking things.

I find that http://realtimeboard.com works very well for me, once I've chosen the right pen width and color. The "smart drawing" tool for example (which converts hand sketches to shapes) is a huge time saver.

This question seems to pop on HN every other month. I very much share the frustration- after trying every product under the sun I always end up coming back to Sketch, which is suboptimal to say the least. I tried to think what is it about Sketch (which isn't meant for diagraming) that makes it the best tool for the job, this is what i came up with: (1) it's native/fast (2) keyboard shortcuts (3) simple shapes / no "component overload" (4) pretty results. So for fun (and profit) I decided to write my own diagraming tool, with those points in mind. It's Mac only, very much work-in-progress and built specifically to replace Sketch in my workflow. If anyone's interested (in working on this, testing, whatever) - hit me up at my username here @ gmail.

My go-to is Dia, for a few reasons: It's portable, it's open, you can import sheets of widgets for whatever you're doing, it uses XML files so you can automate diagram generation if need be, and it's simple.

However, I doubt anyone will make the claim that what it produces is beautiful.

Any vector drawing tool will let you create a diagram like the example you posted. Examples: Inkscape, Adobe Illustrator, Sketch (Mac only), Affinity Designer, Figma (browser-based with an Electron desktop client).

You'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.

Thanks for mentioning Visio, it is now available on the browser as well, for basic, business, flowcharts, network, and cross-functional flowcharts. $5/per user/per month (annual plan) https://products.office.com/en-us/visio/visio-online-plan-1

Disclosure: I work for the Visio team, so if you have any feedback pls lmk.

Yes. I used CorelDRAW, some years ago. In your example, they obviously created (or borrowed) several icons, and then arranged them.

I have to say I'm not really experienced, but where do you find such icons, such that they can be simply imported into whichever (preferrably open source) vector graphics software?

Just search for "diagram icons".

(expecting a lot of hate...)

Microsoft Visio.

It's as flexible as possible without sacrificing too much usability; you can create any sort of diagrams I can think of, from simple flowcharts to complex sequence diagrams or process illustrations.

The main caveat is it's a commercial tool. I have it available at work as most of my clients (to the point there's usually a preference for it).

That said, on many specific cases I use other tools, like plantUML for generating more in depth sequence diagrams, and I prefer to stick to simple PowerPoint figures if I'm doing something that is very abstract - mainly because of its broad adoption; Most people will have a PowerPoint compatible tool installed at their computer and thus readily able to collaborate with me.

Often those kinds of diagrams you mention are hand made with for example Inkscape.

I love using http://asciiflow.com for most of the flowcharts I make. This is nice as one can also embed these into code comments easily too.

Check out Arcentry for Technical/DevOps style diagramming. Not really a generic library, but a nice new tool.


Well, the moving graphic on that page starts off as an SVG file here:


And the gif metadata says it was created using:

Adobe Photoshop CC 2014 (Macintosh)

So I guess that's how they did it. Personally I mostly use Gliffy for speed, but SVG is ideal and a bit of animation can go a long way.

Nowadays I do all my diagrams in Figma. Its a ui tool first but its so flexible it just works for any use case. And it has a strong component functionality so once you build a library of "blocks" for you use cases it's trivial to creatr alternate diagrams.

For those dismissing figma cause its a ui tool.. I'm a dev first but did a short course on ux/ui and got introduced to it. 15 min you tube tutorial was all was needed to get it and they have a Web app that works on all oses.

Try it

I use the Camuna Modeler (https://github.com/camunda/camunda-modeler) for business process models with my sideproject, that tries to describe a startup adventure as a business process to get the acceptance of the middle management of big corporates. It is quite easy to use, well maintained, and comes with all the required features.

My plug, I'm the maintainer of a UML diagramming app called Gaphor https://github.org/gaphor/gaphor

It is open source and written in Python. We are just about finished porting it to modern Python. My goal is to make it a really fast, cross platform, and simple drawing and modeling tool, and it is already very usable.

Shameless plug: I use https://edotor.net to create simple Graphviz diagrams.

It’s not a “shameless plug” if it’s something you’ve made and are encouraging people to try and use for free. That’s more akin to “warning: gifts ahead”.

Google Draw is awesome for this, you can search and add icons from the web, basic vectorized shapes, embeddable in other Google office products.

Google Drawings are convenient for their collaboration and ability to include in other Google docs, but I've mostly found that it seems optimized to produce ugly diagrams. It takes extra work to make things look lined up well.

I use it for the easy collaboration, but miss OmniGraffle every time I do.

You need good stencils for Google Draw. There a number of links out there for UML stuff and actually works quite well. Unfortunately, out of the box it’s definitely on the Spartan-side.

I use Pencil, too.

It has some limited features and the UX could be better, but it is open source and works across Linux, OSX and Windows, so other people on the team can edit diagrams I have created.


I love Mermaid! Here’s a live editor that’s really handy:


Gliffy is awesome! Super intuitive and easy to use.


This is very nice for swim lane diagrams :)


Plectica https://www.plectica.com can make beautiful, intricate, interactive diagrams that clearly convey technical infrastructure. Also nice that collaboration is real time like Google Docs, and so it's easy to keep updated as things evolve.

For beautiful, always Illustrator. Haven't found anything else that gives me the level of control I need (unfortunately, since I really don't like Adobe).

For quick & dirty, always Google Slides/Drawings (same engine), since it's free, in the cloud, works anywhere, and collaborates with anyone.

One that I haven't seen mentioned on this list is Plectica - great for explaining complex / in-depth concepts in a clean and easy to update / present / view fashion. Really robust forever-free option too.


Very interesting idea. Basically like mind maps but you can have structured content (eg: lists) in the nodes?

Wow, this app is really cool. Been using it to map out ideas about different things in my life. Thanks for sharing.

Thx everyone - our team is working hard to make something special... let us know if you have questions, complaints, or requests... Adam Riggs

My reason why I love yEd is it imports exports graphMl http://graphml.graphdrawing.org/ which means you can programmatically start a graph from analysis of something else and then embellish it as need be.

I make a diagramming library: https://gojs.net/latest/index.html

It's not for making diagrams per se, but for developers who are making their own webapps which involve diagramming (so their users will).

No love for https://www.gliffy.com ?

If you want to spend hours or days handcrafting and tuning, there are plenty of options, but for quickly making diagrams that still look good (and can be fine-tuned to look even better) I find Visio hard to beat. It's Windows only and costs money, but it is well worth the money.

Thanks for mentioning Visio, it is now available on the browser as well for basic, business, flowcharts, network, and cross-functional flowcharts. $5/per user/per month (annual plan) https://products.office.com/en-us/visio/visio-online-plan-1

Disclosure: I work for the Visio team, so if you have any feedback pls lmk.

What drives me absolute bananas is the way they changed licensing for Visio. You could get the database reverse-engineering feature (Pro version) for a fixed, one-off price up to some point. Now it's all subscriptions. Blah.

(great software though, I have to admit)

As for the main topic, my favourite diagramming tool is GraphViz, mostly because it is easy to script / automate, does a great job auto-placing things, handles large diagrams quite nicely and works on any OS.

I used to use Sketch, however, I switched to Affinity Designer which I use on both desktop and iPad.

I use http://mayura.com/ It is tiny, doesn't need installation (just unzip and run the .exe) and it creates PDF (suitable for latex) and SVG (suitable for web) files.

I use yEd for nicely organized diagrams (state diagrams, data flow, process models), Dia for information-rich structured diagrams (UML or network schemas), graphwiz for autogenerated diagrams and Inkscape to make final touches to any of those.

Sketch, Adobe illustrator, InDesign for custom designs.

Monodraw, for simple diagrams that are text based.

+1 for Monodraw. To me limitations just make me focus on what's important. Use it all the time.

Are there any handy tools for animating these diagrams? Like the one at git lfs?

LaTex + Tikz is very helpful for paper work, and viso is very useful tool to draw professional diagrams, and mindmanager and xmind are mind map tool, they can be used to draw some beautiful mind diagrams.

https://www.umlet.com, small, simple and quick to use. May not be suited for "beautiful" diagrams, but it rocks for UML.

Diagram Designer: http://logicnet.dk/DiagramDesigner/

Windows only but works really well in wine.


lottie? if you already know how to make svgs

I really like the polish/design of the Airbnb open source projects I’ve seen. I’m envious of the resources to pull it off :D

A large collection of tools. The trick seems to be to find apps that're good at particular jobs, then compose the components drawn from those apps together into a scene.

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.

I'm curious as to the scenario in which the security edits you mention could be required. Could you give any examples?

It's probably not something most folks have to worry about.

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.

The ray-tracing idea really sounds great! What setup are you using for this?

Really just a personal ray-tracing app. I coded it up in C# with an event-loop to update, and mouse-clicks emit a ray to hit-test against an object, allowing for interactivity. Then you can draw anything that you can programmatically describe to the ray-tracer.

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.


Use Inkscape.

Of course Adobe tools are the nicest concerning UI / workflow but also you'll pay for them until you die.

I am using

1. Dia: Its FOSS and gives TeX output also

2. LibreOffice Draw

3. Inkscape

OmniGraffle for Mac has been my go to for years

Keynote. It's really good at that too.

Xfig. It's old, but does what I want.

I still love using MetaPost.

You mention comic-like - for charts (as opposed to diagrams), XKCD has been a source of inspiration for a more casual style.

Here's one example: http://xkcdgraphs.com/ (there are plenty of others if you search for them).

Microsoft Paint.

Notepad.exe !


I use Dia, it's simple and does the job.

This is why there are coders and why we have graphic artists. Outsource the job to them. I've tried to do it myself, it's not worth it. This is why those jobs exist. We can't do it all.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact