Home / Flow and Network / Tree Diagram
Tree Diagram in HTML, CSS and JavaScript
A tree diagram shows a hierarchy as branches. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows a garden centre website map with monthly visits.
What is a tree diagram?
A tree diagram shows a hierarchy as branches. It starts from one root, splits into sections, and each section splits again, just like folders on a computer or pages on a website.
Folding branches open and closed keeps big trees easy to read. Adding size to the circles, like monthly visits, turns a plain sitemap into a map of where people actually go.
At a glance
- Best for
- Hierarchies you want to read branch by branch
- Data you need
- A nested list of items, with a value for each end item
- Skip it when
- Comparing sizes exactly. Use a treemap.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a tree diagram
- Website sitemaps
- Folder and file structures
- Product categories
- Decision trees and family trees
When to pick another chart
- Treemap: you want to compare sizes and use space fully
- Radial Tree: you want a round layout for many end items
- Org Chart: you are showing people and roles
What you get in this template
- A tidy tree layout that places each branch between its children
- Circle size and branch width by monthly visits
- Click or press Enter to fold and unfold sections
- Folded sections turn dark so you know they hold more
- Keyboard focus stays on the section you toggled
- A table of every page with its visits
How the code works
Here is a short version of the idea behind this tree diagram. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const tree = { name: 'Home', kids: [{ name: 'Shop', kids: [{ name: 'Plants' }, { name: 'Tools' }] }, { name: 'Advice', kids: [{ name: 'Blog' }] }] };
let row = 0;
function place(node, depth) {
node.x = 60 + depth * 200;
if (node.kids) { node.kids.forEach(k => place(k, depth + 1)); node.y = (node.kids[0].y + node.kids[node.kids.length - 1].y) / 2; }
else node.y = 40 + row++ * 60;
}
place(tree, 0);
(function draw(n) {
(n.kids || []).forEach(k => { make('path', { d: 'M' + n.x + ',' + n.y + 'C' + (n.x + 100) + ',' + n.y + ' ' + (k.x - 100) + ',' + k.y + ' ' + k.x + ',' + k.y, fill: 'none', stroke: '#b9d3c0', 'stroke-width': 2 }); draw(k); });
drawCircle(n.x, n.y, 8, '#2f855a'); drawText(n.x + 12, n.y + 4, n.name);
})(tree);The example uses four tiny helpers that create SVG shapes. Put them above the code and it runs as is.
const svg = document.querySelector('svg');
function make(tag, attrs) {
const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (const k in attrs) n.setAttribute(k, attrs[k]);
svg.appendChild(n);
return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
t.textContent = str;
return t;
}How to add it to your website
- Download the file. Click Download HTML file above. You get one file called tree-diagram.html with everything inside.
- Change the data. Open the file in any code editor and find the DATA list near the bottom. Replace the names and numbers with your own.
- Change the colors and text. Colors are at the top of the style tag. The title, subtitle and main point are plain HTML near the top of the body.
- Put it online. Upload the file to any host, such as GitHub Pages, Netlify or your own server, or paste it into your site. There is no build step.
Questions people ask
What is a tree diagram?
A tree diagram shows a hierarchy as a set of branches that start from one root and split into smaller and smaller parts.
How do I make a collapsible tree in JavaScript?
Keep a closed flag on each branch, skip its children when laying out the tree, and redraw when the branch is clicked. This template does that without a library.
How is the layout worked out?
End items get their own row, one after another. Each branch then sits halfway between its first and last child, and its depth sets how far right it goes.
Is a tree diagram the same as a dendrogram?
No. A tree diagram shows a fixed structure, like a sitemap. A dendrogram shows items grouped by how similar they are, and the branch length has meaning.
More flow and network
051. Sankey Diagram
Example: website visitors from source to landing page to outcome
052. Chord Diagram
Example: customers switching between five phone networks
053. Arc Diagram
Example: characters who share scenes in a novel
054. Network Graph
Example: who runs with whom in a running club
055. Alluvial Diagram
Example: customers changing plans over three years
057. Dendrogram
Example: grocery items that shoppers buy together
058. Org Chart
Example: the team structure of a design studio
059. Flowchart
Example: how an online shop handles a return request