Installation

Requirements

Environment	Minimum version
Node.js	18+
vue	3.3.0+ (only for @macrulez/visual-linker-vue)
nuxt	3.9.0+ or 4.0.0+ (only for @macrulez/visual-linker-nuxt)

@macrulez/visual-linker-core has no framework dependency at all.

Installation

npm install @macrulez/visual-linker-core

For Vue 3 — includes every core export re-exported, so this alone is enough, no separate core install needed:

npm install @macrulez/visual-linker-vue

For Nuxt — wraps the Vue package and adds auto-imports:

npm install @macrulez/visual-linker-nuxt

Quick start: Vanilla JS

import { createVisualLinker } from '@macrulez/visual-linker-core'

const container = document.querySelector<HTMLElement>('#diagram')!
const linker = createVisualLinker(container, { lines: { curve: 'smoothstep' } })

linker.setBlocks([
  { id: 'a', el: document.querySelector<HTMLElement>('#block-a')! },
  { id: 'b', el: document.querySelector<HTMLElement>('#block-b')! },
])
linker.setConnections([{ id: 'a-b', from: { blockId: 'a' }, to: { blockId: 'b' } }])

The engine gives container a positioning context automatically (position: relative, only if its computed position was static) so the SVG overlay it creates lines up with the blocks inside it — no manual CSS needed.

Quick start: Vue 3

<script setup lang="ts">
import { VisualLinker, vVlBlock } from '@macrulez/visual-linker-vue'

const blocks = [{ id: 'a' }, { id: 'b' }]
const connections = [{ id: 'a-b', from: { blockId: 'a' }, to: { blockId: 'b' } }]
</script>

<template>
  <VisualLinker :connections="connections">
    <div v-for="b in blocks" :key="b.id" v-vl-block="b.id" class="card">{{ b.id }}</div>
  </VisualLinker>
</template>

To register <VisualLinker> and the v-vl-block/v-vl-port directives globally instead of importing them per component:

import { createApp } from 'vue'
import { VisualLinkerPlugin } from '@macrulez/visual-linker-vue'

createApp(App).use(VisualLinkerPlugin).mount('#app')

Quick start: Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/visual-linker-nuxt'],
})

<template>
  <VisualLinker :connections="connections">
    <div v-for="b in blocks" :key="b.id" v-vl-block="b.id" class="card">{{ b.id }}</div>
  </VisualLinker>
</template>

<VisualLinker>, useVisualLinker, and the v-vl-block/v-vl-port directives are all registered by the module — no explicit import needed.