17 ms·

Ask HN: Which tool do you use to create beautiful diagrams?

681 points by lichtenberger 8y ago

For instance what they use for stuff like https://git-lfs.github.com https://git-lfs.github.com 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 :(

simonsarris 8y ago
I make a diagramming library: https://gojs.net/latest/index.html 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).
jsiepkes 8y ago
Often those kinds of diagrams you mention are hand made with for example Inkscape.
idclip 8y ago
Draw.io - though a friend actually used some Jira plugin that produced nice results.
- lichtenberger 8y ago
  I don't think that those diagrams can be easily made with Draw.io. I mean for instance the diagrams from Git LFS.
open-source-ux 8y ago
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.
- mirimir 8y ago
  Yes. I used CorelDRAW, some years ago. In your example, they obviously created (or borrowed) several icons, and then arranged them.
  - lichtenberger 8y ago
    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?
- sgaur 8y ago
  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 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.
adontz 8y ago
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.
- lichtenberger 8y ago
  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.
brox 8y ago
For the kind of diagram in your example I have been using Cacoo for some time now: https://cacoo.com 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.
hliyan 8y ago
I find that http://realtimeboard.com 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.
TXV 8y ago
I use Cacoo. https://cacoo.com/ 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
_Nat_ 8y ago
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.
tchaffee 8y ago
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.
- jimpudar 8y ago
  There's a senior architect in my organization who makes the most incredible, beautiful diagrams I've ever seen. He just uses PowerPoint.
ctchocula 8y ago
I use Dia: http://dia-installer.de/ 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.
- 13415 8y ago
  I use it, too, and I wish it had LaTeX/Pstricks export. I used to use LatexDraw, but it's too limited.
  - ctchocula 8y ago
    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 https://news.ycombinator.com/item?id=18789345 [2] http://lightonphiri.org/blog/latex-consistent-diagrams-using-dia http://lightonphiri.org/blog/latex-consistent-diagrams-using...
  - jbn 8y ago
    Dia does have a capability to export to PStricks. See https://gitlab.gnome.org/GNOME/dia/tree/master/plug-ins/pstricks 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 https://gitlab.gnome.org/GNOME/dia/tree/master/plug-ins/pgf
- inferiorhuman 8y ago
  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".
  - 8y ago
joelschw 8y ago
Mermaid!
- J253 8y ago
  I love Mermaid! Here’s a live editor that’s really handy: https://mermaidjs.github.io/mermaid-live-editor/ https://mermaidjs.github.io/mermaid-live-editor/
marczellm 8y ago
LaTeX/TikZ. + Describe your drawing in code + Mostly intuitive syntax + Not very steep learning curve - No visual editing: edit-compile-view cycle - Time consuming
- yesenadam 8y ago
  I use TikZ in LaTeX, it's awesome, has a comprehensive manual, great examples website http://www.texample.net/tikz/examples/ 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.
- jimhefferon 8y ago
  I also mostly work in LaTeX but I draw with Asymptote: http://asymptote.sourceforge.net/gallery/ 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_and_papers_files/asymptote_tutorial.pdf https://math.uchicago.edu/~cstaats/Charles_Staats_III/Notes_.... I use the graphtheory package a lot: https://github.com/taoari/asy-graphtheory https://github.com/taoari/asy-graphtheory.
leroman 8y ago
Google Draw is awesome for this, you can search and add icons from the web, basic vectorized shapes, embeddable in other Google office products.
- dangoor 8y ago
  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.
  - sologoub 8y ago
    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.
ljegou 8y ago
OmniGraffle works well for me. (MacOS)
- submeta 8y ago
  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.
- sghiassy 8y ago
  +1
- timka 8y ago
  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.
obahareth 8y ago
I use Whimsical. https://whimsical.co/ https://whimsical.co/ It makes it super simple to create good-looking diagrams, and it can do a lot more than just diagrams too.
- k7d 8y ago
  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.
- nullify88 8y ago
  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.
- tern 8y ago
  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.
mkarliner 8y ago
I use Simple Diagrams https://www.simplediagrams.com/ 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.
- mosselman 8y ago
  Wow this is great. I can’t believe I haven’t run into this in my searches for diagramming tools. Thank you
- lichtenberger 8y ago
  Wow, that's really nice, thank you :-)
- mpranjic 8y ago
  Really nice, unfortunately no support for Linux.
- skilled 8y ago
  Looks nice, is it possible to use external vectors?
- submeta 8y ago
  Wow, this is beautiful. Will definitely give it a try.
- lichtenberger 8y ago
  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 :-)
  - coldtea 8y ago
    Adobe Capture (mobile app) does that. There are also several others.
    - 8y ago
specialdragon 8y ago
http://plantuml.com http://plantuml.com 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.
- magic-chicken 8y ago
  Also, text diagrams allows the use of source control and versioning, which is nice.
  - samatman 8y ago
    As well as accessibility for the vision-impaired, I favor GraphViz and PlantUML for all these reasons
- cheez 8y ago
  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.
- jph 8y ago
  Demo of PlantUML text and diagrams: https://github.com/joelparkerhenderson/demo_plantuml https://github.com/joelparkerhenderson/demo_plantuml
- eloycoto 8y ago
  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!
- alangibson 8y ago
  I love PlantUML so much that I made my own Confluence plugin Called PowerPlantUML: https://marketplace.atlassian.com/apps/1219122/powerplantuml?hosting=cloud&tab=overview https://marketplace.atlassian.com/apps/1219122/powerplantuml...
starefossen 8y ago
Are there any handy tools for animating these diagrams? Like the one at git lfs?
deleted 8y ago
[deleted]
becauseiam 8y ago
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.
- zelphirkalt 8y ago
  Try Emacs artist mode for ASCII diagrams in code.
- int0x80 8y ago
  For a subset of "ASCII art" diagrams, check http://asciiflow.com http://asciiflow.com I find it handy sometimes :)
  - ykevinator 8y ago
    I love ascii flow bc it's universal, copy and paste, etc
- alangibson 8y ago
  If you're using PlantUML on Confluence, check out the free plugin that I threw together: https://marketplace.atlassian.com/apps/1219122/powerplantuml?hosting=cloud&tab=overview https://marketplace.atlassian.com/apps/1219122/powerplantuml...
BjoernKW 8y ago
Gliffy: https://www.gliffy.com/ 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.
faissaloo 8y ago
I use Dia, it's simple and does the job.
anhldbk 8y ago
https://www.draw.io https://www.draw.io is an elegant open-sourced program for that purpose. It has apps to install on Mac, Windows. Highly recommend.
- originate 8y ago
  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.
montroser 8y ago
Plectica https://www.plectica.com 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.
satisfice 8y ago
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.
- a-nikolaev 8y ago
  Yeah, really great for all sorts of vector drawing, including diagrams.
perssontm 8y ago
I really enjoy lucid chart, after using gliffy for a long time, I am now stuck on lucid. https://www.lucidchart.com https://www.lucidchart.com
- deforciant 8y ago
  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...
- yowlingcat 8y ago
  +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.
cygned 8y ago
I used to use Sketch, however, I switched to Affinity Designer which I use on both desktop and iPad.
zelphirkalt 8y ago
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.
- amenod 8y ago
  Thanks, first time I hear of it! Link: https://www.yworks.com/products/yed https://www.yworks.com/products/yed
- peter_retief 8y ago
  I use yED, for quite some time now
  - deleted 8y ago
    [deleted]
- amelius 8y ago
  Since it's free, even for commercial use, I'm wondering what their business model is.
deleted 8y ago
[deleted]
anonfunction 8y ago
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/ https://monodraw.helftone.com/
- whoisjuan 8y ago
  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.
- guessmyname 8y ago
  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/ https://blog.helftone.com/monodraw-maintenance-mode/
ComputerGuru 8y ago
Clickable link to OP’s example: https://git-lfs.github.com https://git-lfs.github.com
nikeee 8y ago
Shameless plug: I use https://edotor.net https://edotor.net to create simple Graphviz diagrams.
- qubex 8y ago
  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”.
Hoasi 8y ago
Sketch, Adobe illustrator, InDesign for custom designs. Monodraw, for simple diagrams that are text based.
- fimdomeio 8y ago
  +1 for Monodraw. To me limitations just make me focus on what's important. Use it all the time.
eatonphil 8y ago
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.
- sgaur 8y ago
  Thanks for mentioning Visio. I work for the Visio team, so if you have any feedback pls lmk.
  - eatonphil 8y ago
    Bring Visio online to feature parity with Visio desktop! Demonstrated progress/goals toward this would go a long way too.
    - rohn007 8y ago
      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. .
xte 8y ago
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 https://github.com/cuichaox/dml
wongarsu 8y ago
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.
- sgaur 8y ago
  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 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.
  - xpil 8y ago
    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.
interactivecode 8y ago
https://airbnb.design/lottie/ https://airbnb.design/lottie/ lottie? if you already know how to make svgs
- goliatone 8y ago
  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
shanev 8y ago
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.
ryan-allen 8y ago
This is very nice for swim lane diagrams :) https://swimlanes.io/ https://swimlanes.io/
wisecommentator 8y ago
I use http://mayura.com/ 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.
andrepd 8y ago
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.
qrbLPHiKpiux 8y ago
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.
jasonshen 8y ago
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. https://www.plectica.com https://www.plectica.com
- sridca 8y ago
  Very interesting idea. Basically like mind maps but you can have structured content (eg: lists) in the nodes?
  - sridca 8y ago
    Wow, this app is really cool. Been using it to map out ideas about different things in my life. Thanks for sharing.
    - aar232019 8y ago
      Thx everyone - our team is working hard to make something special... let us know if you have questions, complaints, or requests... Adam Riggs
yonilevy 8y ago
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.
jestinjoy1 8y ago
I am using 1. Dia: Its FOSS and gives TeX output also 2. LibreOffice Draw 3. Inkscape
alanl 8y ago
I mostly use web sequence diagrams, and commit the text. https://www.websequencediagrams.com https://www.websequencediagrams.com Otherwise I just draw on a white board and take a photo Then finally Visio if needed.
Parkkeeper 8y ago
I use the Camuna Modeler (https://github.com/camunda/camunda-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.
Flavius 8y ago
Shameless plug: https://diagramiq.com/ 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.
- danmaz74 8y ago
  Interesting. But, having no idea about the future pricing, I'm very reluctant to really use it.
  - Flavius 8y ago
    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.
- the_other_guy 8y ago
  This is really great
lukevers 8y ago
I love using Mermaid https://mermaidjs.github.io/ https://mermaidjs.github.io/ There’s an online editor too which is basically what I use most of the time.
- jupin 8y ago
  Mermaid lets you create diagrams using code. Really nice.
- Ninjaneered 8y ago
  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.
atxhx 8y ago
Diagram Designer: http://logicnet.dk/DiagramDesigner/ http://logicnet.dk/DiagramDesigner/ Windows only but works really well in wine.
jhallenworld 8y ago
Xfig. It's old, but does what I want.
charlesdaniels 8y ago
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/ 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 https://github.com/otfried/ipe-wiki/wiki/Showcase
- j2kun 8y ago
  For others reading: TikZ can be made arbitrarily complex. I used it to make this trigonometry puzzle, for example: https://imgur.com/a/z0Pqnlk https://imgur.com/a/z0Pqnlk The downside is that LaTeX doesn't support many primitives that engineers are used to, such as arrays.
- brewmarche 8y ago
  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.
gamma-male 8y ago
Keynote. It's really good at that too.
kamranahmed_se 8y ago
https://balsamiq.com/ https://balsamiq.com/ 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 https://github.com/kamranahmedse/developer-roadmap or in some of my blog posts https://medium.com/tech-tajawal/rabbitmq-at-tajawal-c4eeccddf458 https://medium.com/tech-tajawal/rabbitmq-at-tajawal-c4eeccdd...
- GordonS 8y ago
  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.
AnIdiotOnTheNet 8y ago
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.
zacman85 8y ago
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.
- monocularvision 8y ago
  It also has great animation support which would support some of the “flash” seen in the OP’s example.
dahart 8y ago
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 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%20in%20a%20Weekend.pdf 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.
- pier25 8y ago
  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).
- vicarrion 8y ago
  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. https://affinity.serif.com/en-us/designer/ https://affinity.serif.com/en-us/designer/
neltnerb 8y ago
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.
occamschainsaw 8y ago
I work a lot with probabilistic graphical models. I use Daft for that. Daft: http://daft-pgm.org 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/ http://www.texample.net/tikz/
- ivan_ah 8y ago
  Daft seems pretty cool, but kind of verbose. You should check out this TikZ package for graphical models: https://github.com/jluttine/tikz-bayesnet https://github.com/jluttine/tikz-bayesnet
0n34n7 8y ago
No love for https://www.gliffy.com https://www.gliffy.com ?
dragosbulugean 8y ago
https://archbee.io https://archbee.io
grogenaut 8y ago
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.
50656E6973 8y ago
Gliffy is awesome! Super intuitive and easy to use. https://www.gliffy.com https://www.gliffy.com
mitchtbaum 8y ago
HTML + CSS + NoJS eg. this Pure CSS Flowchart: https://codepen.io/round/full/RgpEoE/ https://codepen.io/round/full/RgpEoE/
ajb413 8y ago
Every diagram I've made in the past 2 years has been done in Google Slides.
javierluraschi 8y ago
I like using http://nomnoml.com 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 https://github.com/javierluraschi/nomnoml
crazygringo 8y ago
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.
lucashn 8y ago
https://www.umlet.com https://www.umlet.com, small, simple and quick to use. May not be suited for "beautiful" diagrams, but it rocks for UML.
sbr464 8y ago
Check out Arcentry for Technical/DevOps style diagramming. Not really a generic library, but a nice new tool. https://arcentry.com https://arcentry.com
hashhar 8y ago
I personally feel that most of my use cases are covered by ASCII Flow (http://asciiflow.com/ http://asciiflow.com/) or MermaidJS (https://mermaidjs.github.io/mermaid-live-editor/ 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.
- erdo 8y ago
  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#quick-tutorial 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).
jutaz 8y ago
I love using http://asciiflow.com http://asciiflow.com for most of the flowcharts I make. This is nice as one can also embed these into code comments easily too.
bryanrasmussen 8y ago
My reason why I love yEd is it imports exports graphMl http://graphml.graphdrawing.org/ http://graphml.graphdrawing.org/ which means you can programmatically start a graph from analysis of something else and then embellish it as need be.
mbrookes 8y ago
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/ http://xkcdgraphs.com/ (there are plenty of others if you search for them).
janci 8y ago
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.
cs02rm0 8y ago
Well, the moving graphic on that page starts off as an SVG file here: https://github.com/git-lfs/git-lfs.github.com/blob/master/images/how-it-works-graphic.svg https://github.com/git-lfs/git-lfs.github.com/blob/master/im... 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.
smartmic 8y ago
Old School rules: easy flow diagrams with GNU PIC: http://floppsie.comp.glam.ac.uk/Glamorgan/gaius/web/pic.html http://floppsie.comp.glam.ac.uk/Glamorgan/gaius/web/pic.html
mrmondo 8y ago
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 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).
- jamescampbell 8y ago
  Monodraw is great. Well worth it.
mochja 8y ago
https://pencil.evolus.vn/Features.html https://pencil.evolus.vn/Features.html
- Hopka 8y ago
  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.
tgvaughan 8y ago
I still love using MetaPost.
ipunchghosts 8y ago
Tikz
HeavyStorm 8y ago
(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.
weishigoname 8y ago
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.
rvdmei 8y ago
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.
csense 8y ago
Microsoft Paint.
- xpil 8y ago
  Notepad.exe !
mmusc 8y ago
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
VvR-Ox 8y ago
Use Inkscape. Of course Adobe tools are the nicest concerning UI / workflow but also you'll pay for them until you die.
Yeaw 8y ago
My plug, I'm the maintainer of a UML diagramming app called Gaphor https://github.org/gaphor/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.
blabla321 8y ago
Microsoft Paint
deleted 8y ago
[deleted]
chuchurocka 8y ago
OmniGraffle for Mac has been my go to for years
Kagerjay 8y ago
How does that diagram even work on that link? https://git-lfs.github.com/ https://git-lfs.github.com/ 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?
- jgautsch 8y ago
  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
  - Kagerjay 8y ago
    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 https://git-lfs.github.com/images/graphic.gif I didn't see the answer on stackoverflow. https://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation https://stackoverflow.com/questions/5818003/stop-a-gif-anima...
    - webmaven 8y ago
      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.
- Hopka 8y ago
  It is a feature of the GIF format. You can specify how often the animation shall loop or that it should loop forever.
insign 8y ago
I like https://www.xmind.net https://www.xmind.net

Hallucinaut 8y ago
I'm curious as to the scenario in which the security edits you mention could be required. Could you give any examples?
- _Nat_ 8y ago
  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.
TKAB 8y ago
The ray-tracing idea really sounds great! What setup are you using for this?
- _Nat_ 8y ago
  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.
  - TKAB 8y ago
    Nice!

freehunter 8y ago

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.

Angostura 8y ago
Try Omnigraffle Pro - imports and exports to Visio.
a2dictator 8y ago
I've successfully used lucidcharts.com to import, edit & re-export back to Visio.
rohn007 8y ago
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-f98f21e3-aa02-4827-9167-ddab5b025710 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%29.aspx?f=255&MSPPError=-2147217396 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.