VueAssetMapInfrastructure asset map for Vue 3

A component for entities, links and views of one graph, with search, filters and path tracing.

Get started

Examples

GitHub

One dataset, several views

Declare entities and links once. A view keeps the links whose layers name it, so the same data renders as a physical topology or as a VPN overlay.

Search, filters and tracing

Search by name, IPv4 wildcard or CIDR, filter by consumer-defined groups, open details in draggable windows, trace a path between two nodes.

Types, statuses and labels are yours

No node types, no statuses, no view names and no UI strings live in the package. Icons, colors, filter groups and locales all come from your data.

Show source

<script setup lang="ts">
import { ref } from 'vue'
import { AssetMap } from 'vue-asset-map'
import { useSiteTheme } from '../theme/useSiteTheme'
import { useSiteLocale } from '../theme/useSiteLocale'
import { entities, links, views, statusColors, kindIcons } from './fixture'

const view = ref('physical')
const selection = ref<string[]>([])
const theme = useSiteTheme()
const locale = useSiteLocale()
</script>

<template>
  <AssetMap
    v-model:view="view"
    v-model:selection="selection"
    class="demo-map"
    :entities="entities"
    :links="links"
    :views="views"
    :theme="theme"
    :locale="locale"
    :theme-config="{ statusColors, kindIcons }"
    :layout="{ engine: 'radial', options: { rootId: 'internet' } }"
    auto-fit-view
  />
</template>