journeyscript

JourneyScript API Documentation

This guide is for developers who want to embed JourneyScript visualizations programmatically in their applications. If you just want to create flow diagrams from markdown, see the main README.

Constructor

new JourneyVisualizer(containerSelector, options)

Parameters

Options

{
  layout: {
    direction: 'TB',    // 'TB', 'LR', 'BT', 'RL'
    rankSep: 100,       // Vertical spacing
    nodeSep: 80,        // Horizontal spacing
    edgeSep: 30         // Edge spacing
  },
  zoom: {
    initial: 1,         // Initial zoom level
    min: 0.1,          // Minimum zoom
    max: 3,            // Maximum zoom
    step: 0.1          // Zoom step
  },
  arrows: {
    showLabels: true,   // Show arrow labels
    color: '#333',      // Arrow color
    width: 2           // Arrow width
  },
  navigation: {
    animationDuration: 300,      // Animation time (ms)
    highlightOnNavigate: true    // Highlight destination
  }
}

Methods

init()

Initialize the visualizer. Returns a Promise.

await visualizer.init();

Navigate to a specific step.

visualizer.navigateTo('step-2', {
  animate: true,
  zoom: 1.2
});

reset()

Reset view to start step.

visualizer.reset();

refresh()

Re-compute layout (call after DOM changes).

visualizer.refresh();

getState()

Get current state.

const state = visualizer.getState();
// { currentStep, totalSteps, scale, pan }

destroy()

Clean up and destroy instance.

visualizer.destroy();

Events

on(eventName, callback)

Register event handler.

visualizer.on('navigate', ({ from, to }) => {
  console.log(`Navigated from ${from} to ${to}`);
});

visualizer.on('layout-complete', () => {
  console.log('Layout finished');
});

visualizer.on('destroy', () => {
  console.log('Visualizer destroyed');
});

Error Handling

The library throws errors for:

Warnings are logged for: