App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
// Build a Vue.js 3 Animated Flowcharts & Diagrams Using vue-flow Library in JS <script setup> import { ref } from 'vue' import { VueFlow } from '@vue-flow/core' const nodes = ref([ // an input node { id: '1', type: 'input', position: { x: 250, y: 5 }, data: { label: 'Node 1' }, style: { backgroundColor: '#FF5733', color: 'white', borderRadius: '5px', padding: '10px' }, // Custom styling for node }, // default node { id: '2', position: { x: 100, y: 100 }, data: { label: 'Node 2' }, style: { backgroundColor: '#4CAF50', color: 'white', borderRadius: '5px', padding: '10px' }, // Custom styling for node }, // an output node { id: '3', type: 'output', position: { x: 400, y: 200 }, data: { label: 'Node 3' }, style: { backgroundColor: '#007BFF', color: 'white', borderRadius: '5px', padding: '10px' }, // Custom styling for node }, ]) const edges = ref([ // default bezier edge with customized color { id: 'e1->2', source: '1', target: '2', style: { stroke: '#FF5733', strokeWidth: 2 }, // Custom color and width for edge }, // animated edge with custom color { id: 'e2->3', source: '2', target: '3', animated: true, style: { stroke: '#4CAF50', strokeWidth: 2 }, // Custom color for edge } ]) </script> <template> <div class="flow-container"> <VueFlow :nodes="nodes" :edges="edges" /> </div> </template> <style> /* Import necessary styles for Vue Flow */ @import '@vue-flow/core/dist/style.css'; /* Set the width and height for the Vue Flow container */ .flow-container { width: 100%; height: 500px; /* Adjust the height as needed */ } </style> |
