默认边缘样式

render.defaultEdgeStyle 设置每条边的基本外观 - 颜色、宽度、曲线和箭头标记。每个末端都可以带有一个标记：arrow、circle或diamond，设置在markerStart/markerEnd上。这张卡片对每一个都做了标记，因此它可以兼作标记参考。

选项数据

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
        }
    }
}

// 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' } } }
    ]
}

默认边缘样式 ​

默认边缘样式