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.
new JourneyVisualizer(containerSelector, options)
containerSelector (string): CSS selector for container elementoptions (object, optional): Configuration 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
}
}
Initialize the visualizer. Returns a Promise.
await visualizer.init();
Navigate to a specific step.
visualizer.navigateTo('step-2', {
animate: true,
zoom: 1.2
});
Reset view to start step.
visualizer.reset();
Re-compute layout (call after DOM changes).
visualizer.refresh();
Get current state.
const state = visualizer.getState();
// { currentStep, totalSteps, scale, pan }
Clean up and destroy instance.
visualizer.destroy();
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');
});
The library throws errors for:
Warnings are logged for:
data-dest references