Skip to content

Instantly share code, notes, and snippets.

@JustinWouters
Created July 21, 2022 16:03
ExampleDiagram
<script>
import Svelvet from 'svelvet';
const initialNodes = [
{
id: 1,
position: { x: 225, y: 10 },
data: { label: 'Add Images!' },
width: 100,
height: 100,
bgColor: 'white',
borderColor: 'transparent',
image: true,
src: 'https://svelvet.io/_app/assets/Logo%201-cc7b0baf.svg'
},
{
id: 2,
position: { x: 390, y: 180 },
data: { label: 'Mixed Anchors' },
width: 125,
height: 40,
bgColor: 'white',
targetPosition: 'left'
},
{
id: 3,
position: { x: 225, y: 260 },
data: { label: 'Output Node' },
width: 100,
height: 40,
bgColor: '#FFE4E6'
},
{
id: 4,
position: { x: 25, y: 180 },
data: { label: 'Drag me!' },
width: 125,
height: 40,
bgColor: 'white',
targetPosition: 'right'
},
{
id: 5,
position: { x: 390, y: 380 },
data: { label: 'Custom Node' },
width: 125,
height: 40,
bgColor: '#C8FFC7',
borderColor: 'transparent',
borderRadius: 0
},
{
id: 6,
position: { x: 47.5, y: 360 },
data: { label: 'Custom Node' },
width: 80,
height: 80,
borderColor: '#FF4121',
borderRadius: 30,
bgColor: 'white',
textColor: '#FF4121'
}
];
const initialEdges = [
{ id: 'e1-2', source: 1, target: 2, label: 'edge label' },
{ id: 'e2-3', source: 2, target: 3, animate: true, label: 'animated edges' },
{ id: 'e1-4', source: 1, target: 4, type: 'step', animate: true, edgeColor: '#FF4121' },
{ id: 'e2-5', source: 2, target: 5, label: 'colored edges', animate: true, arrow: true, edgeColor: '#FF4121', labelBgColor: '#1F2937', labelTextColor: '#FFE4E6'},
{ id: 'e2-5', source: 4, target: 6, type: 'straight' },
{ id: 'e2-5',source: 3, target: 6, type: 'smoothstep', label: 'colored label', labelBgColor: '#FF4561', labelTextColor: 'white', animate: true}
];
</script>
<Svelvet nodes={initialNodes} edges={initialEdges} width={600} background />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment