Default edge style

render.defaultEdgeStyle sets the base look of every edge — color, width, curve, and arrow markers. Each end can carry a marker: arrow, circle, or diamond, set on markerStart / markerEnd. This card labels one of each, so it doubles as a marker reference.

Options

const options = {
    render: {
        defaultEdgeStyle: {
            strokeColor: '#94a3b8',
            strokeWidth: 2,
            curveStyle: 'straight',
            markerEnd: 'arrow'
        },
        defaultLabelStyle: {
            fontSize: 11,
            color: '#475569'
        },
        defaultNodeStyle: {
            size: 13,
            color: '#cbd5e1',
            strokeColor: '#94a3b8',
            textColor: '#334155',
            text: (node) => node.getData()?.label
        }
    }
}

Data

// Each edge overrides only its markers, so the rest comes from defaultEdgeStyle.
const data = {
    nodes: [
        { id: 'a', data: { label: 'A' } },
        { id: 'b', data: { label: 'B' } },
        { id: 'c', data: { label: 'C' } },
        { id: 'd', data: { label: 'D' } }
    ],
    edges: [
        { from: 'a', to: 'b', data: { label: 'arrow' }, style: { edge: { markerEnd: 'arrow' } } },
        { from: 'b', to: 'c', data: { label: 'circle' }, style: { edge: { markerEnd: 'circle' } } },
        { from: 'c', to: 'd', data: { label: 'diamond' }, style: { edge: { markerEnd: 'diamond' } } },
        { from: 'd', to: 'a', data: { label: 'start + end' }, style: { edge: { markerStart: 'circle', markerEnd: 'arrow' } } }
    ]
}