Getting started

@knowvah/dot-engine is a faithful TypeScript port of Graphviz. It parses the DOT language, runs Graphviz's layout engines, and emits SVG — in pure TypeScript — no C: no native Graphviz binary and no WASM port.

New to the library?

Read the Overview first — it maps the pipeline (parse/build → layout → render / read-geometry) and the three entry points (@knowvah/dot-engine, @knowvah/dot-engine/api, @knowvah/dot-engine/render) so you know which door to use before you install.

Install

@knowvah/dot-engine is published on npm:

npm i @knowvah/dot-engine

Zero runtime dependencies. The canvas package is an optional peer dependency, only needed for host-faithful text measurement in Node — see Text measurement. The package ships three entry points (@knowvah/dot-engine, @knowvah/dot-engine/api, @knowvah/dot-engine/render), each with its own .d.ts type declarations, declaration maps, and source maps — "go to definition" jumps into the real TypeScript source, which ships alongside the build.

To build from source instead:

git clone https://github.com/knowvah/dot-engine.git
cd @knowvah/dot-engine
npm install
npm run build        # → dist/index.js (ESM bundle, via esbuild) + .d.ts

Render a graph

import { renderSvg } from '@knowvah/dot-engine';

const dot = `
  digraph {
    a -> b;
    b -> c;
    a -> c;
  }
`;

const svg = renderSvg(dot, 'dot');
console.log(svg); // <svg ...>...</svg>

renderSvg(dotSource, engine) parses the DOT source, runs the named layout engine, renders to SVG, and returns the SVG string.

Here is that exact graph, rendered on this page by the engine itself (via @knowvah/vitepress-plugin-dot):

New to DOT? It is a small plain-text language for describing graphs — the canonical DOT language reference is the syntax guide, and Overview has a one-paragraph primer.

Next steps

• Overview — the mental model and the three entry points.
• Layout engines — the eight engines and when to use each.
• Build a graph in code — the createGraph builder.
• Recipes — task-oriented, runnable solutions.
• Read computed geometry — positions and splines via getLayout.
• Working with images — inlining, deployment, and CSP.
• Types — the public data shapes and how they relate.
• Browser usage — bundling and the setImageSizer hook.
• API reference — the full public surface.
• Playground — edit DOT and see SVG live, in your browser.