Building a Flowchart

In this tutorial you will build a complete flowchart step by step — adding nodes, connecting them with edges, applying styles, and using different shape types that correspond to standard flowchart symbols.

Time: ~15 minutes  |  Prerequisites: Getting Started completed

---

Step 1: Lay out the basic shapes

A flowchart uses different shapes for different purposes:

Shape	Meaning	Builder method
Circle	Start / End	.circle(r)
Rectangle	Process	.rect(w, h)
Diamond	Decision	.diamond(w, h)
Parallelogram	Input / Output	.parallelogram(w, h)
Document	Report / Document	.document(w, h)

Let's start with the first three nodes:

Preview

Code

import { viz } from 'vizcraft';

const builder = viz().view(500, 300);
builder.node('start').at(250, 40).circle(22).fill('#4CAF50').label('Start');
builder.node('input').at(250, 120).parallelogram(120, 50).fill('#90CAF9').label('Read input');
builder.node('check').at(250, 210).diamond(80, 60).fill('#FFF176').label('Valid?');

builder.mount(document.getElementById('container'));

Step 2: Connect with edges

Now connect the nodes. Every edge needs a source and target node ID.

Preview

Code

import { viz } from 'vizcraft';

const builder = viz().view(500, 300);
builder.node('start').at(250, 40).circle(22).fill('#4CAF50').label('Start');
builder.node('input').at(250, 120).parallelogram(120, 50).fill('#90CAF9').label('Read input');
builder.node('check').at(250, 210).diamond(80, 60).fill('#FFF176').label('Valid?');
builder.edge('start', 'input').arrow();
builder.edge('input', 'check').arrow();

builder.mount(document.getElementById('container'));

Step 3: Add branching and labels

The decision diamond branches into "Yes" and "No" paths. Use .label() on edges to annotate.

Preview

Code

import { viz } from 'vizcraft';

const builder = viz().view(500, 400);
builder.node('start').at(250, 40).circle(22).fill('#4CAF50').label('Start');
builder.node('input').at(250, 120).parallelogram(120, 50).fill('#90CAF9').label('Read input');
builder.node('check').at(250, 220).diamond(80, 60).fill('#FFF176').label('Valid?');
builder.node('process').at(250, 320).rect(120, 50, 6).fill('#81C784').label('Process data');
builder.node('error').at(430, 220).rect(100, 40, 6).fill('#EF5350').stroke('#C62828')
.label('Show error', { fill: 'white', fontSize: 12 });
// Edges
builder.edge('start', 'input').arrow();
builder.edge('input', 'check').arrow();
builder.edge('check', 'process').arrow().label('Yes');
builder.edge('check', 'error').arrow().label('No');
builder.edge('error', 'input').arrow().curved().label('retry');

builder.mount(document.getElementById('container'));

Notice: the "retry" edge uses .curved() to route the loop back to the input without overlapping other edges.

Step 4: Complete the flowchart

Add a document node for the output and a terminal circle:

Preview

Code

import { viz } from 'vizcraft';

const builder = viz().view(500, 480);
builder.node('start').at(250, 40).circle(22).fill('#4CAF50').label('Start');
builder.node('input').at(250, 120).parallelogram(120, 50).fill('#90CAF9').label('Read input');
builder.node('check').at(250, 220).diamond(80, 60).fill('#FFF176').label('Valid?');
builder.node('process').at(250, 330).rect(120, 50, 6).fill('#81C784').label('Process data');
builder.node('error').at(430, 220).rect(100, 40, 6).fill('#EF5350').stroke('#C62828')
.label('Show error', { fill: 'white', fontSize: 12 });
builder.node('output').at(250, 420).document(120, 50).fill('#CE93D8').label('Save report');
builder.node('end').at(250, 460).circle(16).fill('#F44336');
// All edges
builder.edge('start', 'input').arrow();
builder.edge('input', 'check').arrow();
builder.edge('check', 'process').arrow().label('Yes');
builder.edge('check', 'error').arrow().label('No');
builder.edge('error', 'input').arrow().curved().label('retry');
builder.edge('process', 'output').arrow();
builder.edge('output', 'end').arrow();

builder.mount(document.getElementById('container'));

What you learned

In this tutorial you:

1. Used standard flowchart shapes — circles, rectangles, diamonds, parallelograms, and documents.
2. Connected nodes with directed edges using .arrow().
3. Added edge labels to annotate branches.
4. Used curved routing for loopback edges.
5. Applied fills and strokes for visual distinction.

Next steps

• Nodes & Shapes — Explore all 22 shape types, shadows, sketch mode, and embedded media.
• Edges & Connections — Markers, ports, rich-text labels, and self-loops.
• Layout & Positioning — Let algorithms arrange your nodes automatically.
• Animations — Add motion and timeline-driven sequences.

---

Found a problem? Open an issue on GitHub.