Message

canvas.nodes([1, 2, 3, 4, 5]).add({
    pos: (n, i) => [(i - 2) * 50, 0]
})
canvas.pause(0.5)

for (let i = 1; i < 6; i++) {
    canvas.node(i).size('1.5x').color('orange').pause(0.5)
}

canvas.onmessage('finished', () => {
    canvas.label('title').add({ text: 'Animation complete' })
})
canvas.message('finished')

canvas.node('b').add({
    shape: 'rect',
    size: [40, 20],
    fixed: true,
    pos: [-80, 0],
    labels: { 0: { text: 'Broadcast\n(Click me)' } }
})
canvas.node('r').add({
    shape: 'rect',
    size: [40, 20],
    fixed: true,
    pos: [80, 0],
    labels: { 0: { text: 'Received' } }
})

canvas.edge(['b', 'r']).add({ directed: true })

canvas.onmessage('click', () => {
    canvas.edge(['b', 'r']).highlight(0).traverse('red')
    canvas.node('r').highlight(0).color('red')
})

canvas.node('b').onclick(() => canvas.message('click'))