Getting Started

This tutorial walks you through installing VizCraft and building your first interactive visualization. You will create nodes, connect them with edges, and mount the result to the DOM.

Time: ~10 minutes  |  Prerequisites: Node.js ≥ 18 and a bundler (Vite, webpack, etc.)

---

Step 1: Install VizCraft

npm install vizcraft

Or with pnpm / yarn:

pnpm add vizcraft
# or
yarn add vizcraft

Step 2: Create a container

You need an HTML element to mount the SVG into.

<div id="my-viz" style="width: 500px; height: 200px;"></div>

Step 3: Build your first scene

Import viz from vizcraft and start chaining:

import { viz } from 'vizcraft';

// 1. Create a builder with a 500×200 viewBox
const builder = viz().view(500, 200);

// 2. Add two nodes
builder
  .node('hello')
  .at(150, 100) // position
  .circle(30) // shape: circle with radius 30
  .fill('#89b4fa') // fill color
  .label('Hello'); // text label

builder
  .node('world')
  .at(350, 100)
  .rect(80, 40, 8) // shape: rectangle 80×40 with corner radius 8
  .fill('#a6e3a1')
  .label('World');

// 3. Connect them with an edge
builder.edge('hello', 'world').arrow();

// 4. Mount to the DOM
builder.mount(document.getElementById('my-viz')!);

Here is the result:

Preview

Code

import { viz } from 'vizcraft';

const builder = viz().view(500, 200);

builder
.node('hello').at(150, 100).circle(30).fill('#89b4fa').label('Hello')
.node('world').at(350, 100).rect(80, 40, 8).fill('#a6e3a1').label('World')
.edge('hello', 'world').arrow()
.done();

builder.mount(document.getElementById('my-viz'));

Congratulations — you just rendered your first VizCraft visualization!

Step 4: Style your nodes

VizCraft supports many styling options. Let's add fills, strokes, dashed edges, and different shapes:

Preview

Code

import { viz } from 'vizcraft';

const builder = viz().view(500, 250);
builder.node('start').at(80, 125).circle(22).fill('#4CAF50').label('Start');
builder.node('process').at(250, 125).rect(110, 50)
.fill('#2196F3').stroke('#1565C0', 2)
.label('Process', { fontSize: 13, fill: 'white' });
builder.node('end').at(420, 125).diamond(70, 50).fill('#FF9800').label('End?');
builder.edge('start', 'process').arrow().stroke('#666');
builder.edge('process', 'end').arrow().dash('dashed').label('next');

builder.mount(document.getElementById('my-viz'));

Step 5: Clean up

When you are done with a visualization (e.g. navigating away), call destroy():

builder.destroy();

This removes the SVG from the DOM, tears down pan/zoom, cancels animations, and releases event listeners.

What's next?

You now know the fundamentals. Here are recommended next steps:

Goal	Guide
Explore all 22 shape types	Nodes & Shapes
Learn edge routing, markers & labels	Edges & Connections
Use layout algorithms	Layout & Positioning
Add motion & timelines	Animations
Build a complete flowchart	Building a Flowchart
Look up API signatures	Builder API Reference

---

Found a problem? Open an issue on GitHub.