Node-RED Flow Viewer
Vue-based renderer for Node-RED flows.
pnpm add vue-node-red-flow-viewerimport { FlowViewer } from 'vue-node-red-flow-viewer'
import 'vue-node-red-flow-viewer/style.css'<template>
<div class="flow-viewer">
<FlowViewer :flow-data="flow" />
</div>
</template>
<script setup>
import { FlowViewer } from 'vue-node-red-flow-viewer'
import 'vue-node-red-flow-viewer/style.css'
import flow from './flow.json'
</script>
<style scoped>
.flow-viewer {
height: 520px;
}
</style>The wrapper element needs a height because the viewer fills its parent.