API reference
The public surface is intentionally small. Most callers only need renderSvg.
Type declarations (
.d.ts) are emitted bynpm run build(thebuild:typesstep runstsc -p tsconfig.build.json). Thepackage.jsonexportsmap wirestypesconditions for each entry, sographviz-ts,graphviz-ts/api, andgraphviz-ts/renderall resolve types in editors and downstream builds.The build also emits declaration maps (
.d.ts.map) and JS source maps, and the package ships itssrc/sources — so "go to definition" jumps straight to the real TypeScript, making it easy to read the code and open a PR.
renderSvg
function renderSvg(dotSource: string, engine: string): string;Parses the DOT source, runs the named layout engine, renders to SVG, and returns the SVG string.
dotSource— DOT-language graph source.engine— one ofdot,neato,fdp,sfdp,circo,twopi,osage,patchwork.- Throws
ParseErrorifdotSourceis invalid, or an error ifengineis not registered.
parse
function parse(dotSource: string): Graph;Parses DOT into the in-memory graph model without laying it out. Useful for inspecting or transforming the graph before rendering.
setImageSizer
type ImageSizer = (src: string) => { w: number; h: number } | null;
function setImageSizer(sizer: ImageSizer | null): void;Registers a callback that returns the intrinsic dimensions of an external image referenced by a node (e.g. image="logo.png"). Return null when the size is unknown. Pass null to clear a previously-set sizer. See Browser usage.
Library API — new in Batch 3
Four functions cover programmatic construction, geometry readout, multi-format rendering, and custom draw-op access. Each has a dedicated guide page.
createGraph
function createGraph(opts?: {
directed?: boolean;
strict?: boolean;
name?: string;
}): GvGraphBuilder;Build a graph in code without writing DOT. Returns a GvGraphBuilder with addNode, addEdge, addSubgraph, setAttr, getAttr, and a .graph property for handoff to render / getLayout / getDrawOps. See Build a graph in code.
render
function render(
g: Graph,
format: OutputFormat,
opts?: { engine?: string },
): string;Lay out and render a graph to the requested format. OutputFormat is 'svg' | 'dot' | 'xdot' | 'json' | 'plain' | 'plain-ext' | 'imap' | 'cmapx'. Engine defaults to 'dot'. See Render to other formats.
getLayout
function getLayout(g: Graph, opts?: { yAxis?: 'up' | 'down' }): LayoutSnapshot;Return a plain, JSON-serializable snapshot of the graph's computed geometry (node positions, edge spline points, bounding box). Call after render has run. Default yAxis: 'down' gives screen coordinates (origin top-left). See Read computed geometry.
getDrawOps
function getDrawOps(g: Graph, opts?: { engine?: string }): XdotOp[];Lay out a graph, render to xdot, and return a flat typed draw-op array for feeding a custom renderer. Switch on op.kind to dispatch each operation. See Custom rendering with xdot draw-ops.
Lower-level orchestration
For callers that need to drive layout and rendering as separate steps, the GVC-style orchestration layer is exposed.
class GvcContext {
constructor(measurer: TextMeasurer, options?: { debug?: DebugOptions });
register(plugin: LayoutEngine | RendererPlugin): void;
layout(g: Graph, engineName: string): void;
freeLayout(g: Graph, engineName: string): void;
}
function renderWithContext(ctx: GvcContext, g: Graph, format: string): string;renderSvg is a convenience wrapper over this: it constructs a context, registers the eight engines and the SVG renderer, lays out, renders, and frees. The root render(g, format, opts?) does the same but accepts any registered output format. Reach for GvcContext / renderWithContext directly only when you need that control — for example, to register a subset of engines or to render the same laid-out graph to multiple formats without re-running layout.