Iconos por tipo

Coloque un ícono dentro de cualquier nodo con svgIcon: una cadena SVG en línea, endereza en el mapa de estilos por tipo. El icono hereda el strokeColor del nodo, por lo que permanece legible en cualquier relleno. Combínalo con nodeTypeAccessor y obtendrás nodos iconificados y tipificados a partir de datos simples.

Opciones

// Inline SVGs use `fill="currentColor"`, which resolves to the node's strokeColor.
const icons = {
    user: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/></svg>',
    cloud: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 18H6a4 4 0 0 1-.6-7.95A5.5 5.5 0 0 1 16.5 9 4.5 4.5 0 0 1 19 18z"/></svg>',
    server: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm0 10h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zM7 6.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>',
    database: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c-4.4 0-8 1.3-8 3v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5c0-1.7-3.6-3-8-3zm6 17c0 .5-2.4 1.8-6 1.8S6 19.5 6 19v-2.7c1.5.9 3.8 1.4 6 1.4s4.5-.5 6-1.4V19zm0-5c0 .5-2.4 1.8-6 1.8S6 14.5 6 14v-2.7c1.5.9 3.8 1.4 6 1.4s4.5-.5 6-1.4V14zm-6-4.2C8.4 9.8 6 8.5 6 8s2.4-1.8 6-1.8S18 7.5 18 8s-2.4 1.8-6 1.8z"/></svg>'
}

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.type,
        nodeStyleMap: {
            user: { color: '#64748b', svgIcon: icons.user },
            cloud: { color: '#9333ea', svgIcon: icons.cloud },
            server: { color: '#2563eb', svgIcon: icons.server },
            database: { color: '#16a34a', svgIcon: icons.database }
        },
        defaultNodeStyle: {
            size: 22,
            strokeColor: '#ffffff',
            strokeWidth: 2,
            textColor: '#334155',
            text: (node) => node.getData()?.name,
            textVerticalShift: -1.6
        }
    }
}

Datos

const data = {
    nodes: [
        { id: 'visitor', data: { name: 'Visitor', type: 'user' } },
        { id: 'cdn', data: { name: 'CDN', type: 'cloud' } },
        { id: 'web', data: { name: 'Web', type: 'server' } },
        { id: 'api', data: { name: 'API', type: 'server' } },
        { id: 'db', data: { name: 'Postgres', type: 'database' } }
    ],
    edges: [
        { from: 'visitor', to: 'cdn' },
        { from: 'cdn', to: 'web' },
        { from: 'web', to: 'api' },
        { from: 'api', to: 'db' }
    ]
}