Home / Flow and Network / Flowchart
Flowchart in HTML, CSS and JavaScript
A flowchart shows the steps of a process and the choices along the way. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows how an online shop handles a return request.
What is a flowchart?
A flowchart shows the steps of a process and the choices along the way. Rectangles are steps, diamonds are yes or no questions, and arrows show what happens next.
It turns a written process into something anyone can follow in seconds. Lighting up the path for a real example, like a faulty item, shows exactly what the customer and the team will go through.
At a glance
- Best for
- Processes with steps and decisions
- Data you need
- A list of steps, questions and the arrows between them
- Skip it when
- Processes with dozens of branches. Split them up.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a flowchart
- Customer service and returns processes
- Sign up, approval and support workflows
- Troubleshooting guides
- Training material for new staff
When to pick another chart
- Sankey Diagram: you want to show how many people took each path
- Tree Diagram: you have a hierarchy, not a process
What you get in this template
- Steps, questions and start and finish shapes in plain SVG
- Arrows with Yes and No labels
- Buttons that light up the path for three example cases
- The chosen path fades in step by step
- Text wraps to fit each box on any screen
- A table that writes out each path in words
How the code works
Here is a short version of the idea behind this flowchart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const steps = [['Request comes in', 150, 20, 'box'], ['Within 30 days?', 150, 100, 'question'], ['Refund', 150, 190, 'box']];
steps.forEach(([label, x, y, kind]) => {
if (kind === 'question') make('polygon', { points: [[x + 90, y], [x + 180, y + 30], [x + 90, y + 60], [x, y + 30]].map(p => p.join(',')).join(' '), fill: '#fff3d6', stroke: '#d9a520' });
else drawRect(x, y, 180, 50, '#dcf0ee');
drawText(x + 90, y + (kind === 'question' ? 34 : 30), label, 'middle');
});
drawLine(240, 70, 240, 100, '#6a645a', 1.5);
drawLine(240, 160, 240, 190, '#6a645a', 1.5);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 flowchart.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 do the shapes in a flowchart mean?
Rounded shapes mark the start and end, rectangles are steps, diamonds are questions with yes or no answers, and arrows show the order.
How do I make a flowchart in HTML?
Place each step on a simple grid, draw rectangles and diamonds with SVG, and join them with arrow lines. This template does it in plain JavaScript with no library.
How can a flowchart be interactive?
Add example cases that highlight the path they take, like this template does. It helps readers see how the process works for a real situation.
How big should a flowchart be?
Keep it to about 15 shapes. If it grows past that, split it into smaller flowcharts that link to each other.
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
056. Tree Diagram
Example: a garden centre website map with monthly visits
057. Dendrogram
Example: grocery items that shoppers buy together
058. Org Chart
Example: the team structure of a design studio