Tech Tree Creator

Free Tool · No download required

What Is a Tech Tree?

A technology tree (or tech tree) is a directed graph of upgrades, abilities, or discoveries where each node represents something a player can unlock, and arrows show which prerequisites must be completed first. Tech trees are a cornerstone of strategy game design, appearing in civilization builders, 4X games, engine-building card games, and RPG skill systems.

Designing a tech tree on paper is straightforward. Turning that sketch into a clean, printable graphic is where the work begins. You need consistent node sizes, aligned tiers, visible prerequisite arrows, readable labels, and a layout that communicates the progression path at a glance. Chitmunk's tech tree generator handles all of this parametrically.

Interactive Node Editor

The generator's configuration modal gives you an interactive canvas where you can:

• Add nodes — click on the canvas to place a new technology node. Give it a label, assign a tier level, and set its color.
• Drag nodes — reposition nodes freely. The generator maintains all prerequisite connections as you move things around.
• Connect nodes — draw a prerequisite arrow from one node to another. The arrow indicates that the source technology must be researched before the target becomes available.
• Edit properties — click a node to change its label, color, tier, or cost text.
• Delete nodes — right-click to remove a node and its connected edges.

Prerequisite Arrows and Edge Styles

Connections between nodes are drawn as directed arrows from parent to child. The generator supports two edge styles:

• Curved — smooth S-curve bezier arrows that flow naturally between tiers. This is the default and looks best for most tree layouts.
• Straight — direct lines for compact trees where visual simplicity matters.

Arrow color and thickness are configurable. Arrowheads are drawn automatically at the target node, making the direction of progression unambiguous.

Tier and Level System

Assign each node to a tier (1, 2, 3, and so on). The generator draws horizontal tier separator lines across the tree, visually grouping technologies by progression level. Tier labels appear along the left edge.

This tier system communicates game progression at a glance. Players immediately see which technologies are early-game, mid-game, and late-game, and which prerequisites gate the transitions between stages.

Configuration Options

• Node shape — rounded rectangle (default), rectangle, circle, or hexagon.
• Node dimensions — width and height of each node box.
• Font size — label text size, scales proportionally with element size.
• Background color — the area behind the tree (transparent by default).
• Tier line color — color and visibility of horizontal tier separators.
• Edge color and style — curved or straight, with configurable color.
• Locked opacity — nodes marked as locked render at reduced opacity, useful for showing unavailable technologies on player reference cards.

Use Cases

Civilization and 4X Games

The classic use case. Build a tech tree where players research Agriculture to unlock Irrigation, which unlocks Aqueducts. Place the tree on a player mat or reference card. Each player gets a copy and marks off technologies as they research them during the game.

Engine-Building Card Games

Many card games feature upgrade paths where buying one card unlocks access to more powerful cards. A tech tree on a reference card or game board shows players the full upgrade map so they can plan their strategy.

RPG Skill Trees

Design skill trees for RPG-style board games or dungeon crawlers. Each node is a skill or ability; arrows show which skills must be learned first. Color-code branches by class (warrior, mage, rogue) or skill type (offensive, defensive, utility).

Campaign and Legacy Games

Campaign games that unlock new content over multiple sessions can use tech trees to show the progression path. Nodes represent scenarios, upgrades, or story branches. The visual tree helps players track where they are and what comes next.

How It Works in the Editor

Open the editor, click Generators in the toolbar, and select Tech Tree from the generator palette. The interactive node editor opens. Place nodes, draw connections, assign tiers, and customize the appearance.

Click Apply and the tech tree renders on your canvas. Resize it to fit your component; the nodes, edges, fonts, and tier lines all scale proportionally. Layer it over a background, add a title with the text tool, and export as part of your card or board design.

The tree scales cleanly from small reference cards to full game boards. A 5-node tree on a poker card is just as legible as a 30-node tree on a large-format board, because the generator adjusts font sizes and node dimensions relative to the element's canvas size.