Up next in 10
Build a Vue.js 3 vue-diagram-editor Example to Build Diagrams and Flowcharts in Browser Using JS
Jan 17, 2025
Get the full source code of application here:
https://codingshiksha.com/vue/build-a-vue-js-3-animated-flowcharts-diagrams-using-vue-flow-library-in-js/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you another
0:04
vuejs 3 package which allows you to
0:06
create this awesome little diagrams and
0:09
flowcharts inside your application so if
0:11
you want to create these multiple notes
0:13
and connect to each
0:15
other then you can use this package
0:18
which is called as view diagram editor
0:20
you can move it with your Mouse anywhere
0:22
in this location so the name of the
0:26
package is uh view diagram editor
0:31
so it works only with vuejs 2 not three
0:35
the latest version so I will use it the
0:38
CDN of this package the command and
0:41
simple it's a fairly new package so what
0:45
I have given all the source code in the
0:46
description so we will use the CDM we
0:50
built entirely in the browser so first
0:53
of all we need to include all the
0:56
CDN so in this way you will include
1:02
just after the title so we are including
1:05
the view which is 2.6 not three it's
1:08
compatible with only 2.6 and then we
1:10
including this package CDN the CSS and
1:14
the JavaScript so after you include all
1:16
these CDN now you can directly use this
1:20
so we'll have the div give it an ID
1:23
here and then you'll be initializing
1:26
this component diagram editor
1:30
and here it actually takes the
1:33
reference we'll create this reference so
1:36
we just creating reference
1:39
diagram and now to register this we will
1:42
just include the JavaScript code here so
1:46
just write all the JavaScript code in
1:49
the script.js file so right here we
1:53
first of all need to register the view
1:57
component like this
2:02
view
2:03
diagram
2:05
editor.
2:09
diagram and then we need to initialize a
2:12
new reference of
2:14
view element here we need to
2:22
pass so here you will create the
2:24
variable uh how many nodes you want to
2:26
create so node one and it will contain
2:29
VAR properties such as the ID the size
2:36
everything so here you can create as
2:38
many nodes as
2:46
possible so you create the nodes here
2:49
you will see node one which will contain
2:51
ID the title the size of the node which
2:54
is vs out then the node two the same
2:58
properties the coordinates
3:01
so once you declare everything right
3:04
here if you refresh you will
3:12
see now this will be this editor will be
3:15
initialized
3:17
and there is a life cycle method here
3:20
which is
3:22
uh this method I think
3:31
just after this you can mounted event
3:33
which will initialize this
3:38
plug-in so I have given all the source
3:41
code in the description so once you do
3:48
this so you can see that
3:51
so this init
3:53
function here we initialize the actual
3:56
diagrams you use the set model function
3:59
you provide the nodes and the
4:01
links and right here you provide the
4:03
linking the relationship between these
4:05
different nodes so node one is related
4:08
to node two so in this way guys you can
4:11
create this uh awesome flowchart and
4:13
diagrams you can control it with your
4:16
mouse so thank you very much for
4:18
watching this video and also check out
4:20
my website as well uh free mediat
4:22
tools.com uh which contains thousands of
4:25
tools regarding audio video and image
4:29
and I I will be seeing you guys in the
4:30
next video
#Programming
#Other