Is there a good software to create a "tech tree" type diagram?

("Tech tree" is typically a word I thought of from Civilization video games tech tree. But here I'd see uses in completely different domains that have nothing to do with video games.)

I know that I could make it from a random diagram in various diagram softwares (such as draw.io, Visual Paradigm... ).

But here are a few things that would come handy:

  • when adding a node, other nodes could reorganise in a readable way (like I add a new node that is a requirement for a series of nodes, that series of nodes gets pushed forward ... a bit like in a MS Project Gantt chart but I don't think Gantt chart is what I'm looking for.)
  • each node should be able to have multiple dependencies and be dependencies for multiple other nodes, and they would reorganise in "tiers". Another way I would define a tech tree would be a kind of "reverse family tree but were one can have more than two parents, where tiers are generations".
  • Nice to have but not all required: each node could have some extra properties/colour/maybe a picture

Some precision after questions:

  • Software: I mean an already existing product.
  • 1
    Hint: do you have an organization chart at work? Maybe look for org chart software? The fancy name for it is organogram, so search for that too – Mawg says reinstate Monica Mar 19 '20 at 10:53
  • 1
    Now that you mention it, my idea ssems a bit like a reversed organization chart, or some kind of family tree, possibly with some extra features/constraint. In this specific case I'm more looking for an existing software, what I see so far are mostly JavaScript libraries (interesting nontheless) (Will see when I have time to look deeper into it.) – TTT Mar 19 '20 at 12:24
  • What should the output be? A simple graphic? Or should clicking on a "tech" do something? Can you tell u show you intend to use it? – Mawg says reinstate Monica Mar 20 '20 at 6:47
  • 1
    Clicking doesn't necessarily need to display extra things. I'm more hoping for to self-maintain, with the logic of a tech tree. – TTT Mar 20 '20 at 8:58
  • So, a simple graphic, such as JPEG or SVG woudl be fine? – Mawg says reinstate Monica Mar 20 '20 at 14:06

If you were asking for libraries that you want to integrate in the programs you build, then your question is too vague. Everything is software. If you want a program that will help you persisting your content, read on.

Note that a tree is a more constrained form of a graph. Software that knows graphs knows trees just as well.

You may want to look at XMind. They offer a lot of templates. The nodes will rearrange after you add a new one. There's a free version.

Another one which is great especially for trees is TheBrain (thebrain.com). It takes a different approach than most other graph renderers. Because all but non-trivial trees are huge and seeing all nodes is useless overview, this program allows you to act on the area around one node only (view, edit, add children) and navigate from one node to its immediate neighbors. You mentioned you would want pictures on nodes. They got you covered. Again, look at the free version of this software.

There are great resources (YouTube) that will help you make the best out of the free versions of those programs. I am associated with neither XMind nor TheBrain.

  • 1
    Hello, thank you. In my language software and program are synonyms.... In these case I'm rather looking for an already-made product. Mindmapping softwares don't match what I'm looking for because as far as I know, they from one node to many or from many to one. In a tech tree, dependencies go from many to many. I would describe it now more like a revese family tree, but where one can have more than two parents. – TTT Mar 20 '20 at 8:56

If you are willing to do some programming, d3.js enables many of the requested features.

Simple: A 'regular' tree diagram : https://bl.ocks.org/d3noob/8375092

More complicated: A full 'graph' diagram: https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048

The multiple dependencies requirement may make most tree layouts not what you want. A directed acyclic graph may be what you want: https://observablehq.com/@erikbrinkman/d3-dag-sugiyama-with-arrows

Since d3 is relatively low-level, you can perform all the goals with programming. But it is not ready to use as a final software product.

You might be able to search for "directed acyclic graph editor" and see what you like. A d3 example is http://bl.ocks.org/rkirsling/5001347 , but again, requires modification for images and such.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.