live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
This VSCode Extension Integrates Canva Image Editor to Make Flowcharts Diagrams and Image Files
Jan 9, 2025
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
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 a visual
0:04
studio code extension which allows you
0:07
to actually make these colorful
0:09
flowchart
0:10
diagrams and you can even make YouTube
0:13
video
0:14
thumbnails uh you can export them to
0:17
svgs or PNG anything and this is a fully
0:21
fleshed editor which comes in visual
0:23
studio and this extension allows you to
0:25
do this so the extension name is draw
0:28
IOU this is actually if I show you you
0:32
need to go to extensions and the name of
0:34
this extension is draw simply need to
0:37
type
0:38
draw do iio
0:41
integration so this is a very famous
0:43
website which is draw IO which is lets
0:46
you uh actually draw flowchart diagrams
0:50
so they have their integration extension
0:53
right in the vs code this is the name of
0:55
the extension and this is unofficial
0:59
integration which integrates draw IO
1:01
into V vs code it has almost 2 million
1:04
weekly downloads so
1:08
simply if I start from scratch we need
1:10
to go to EXT
1:13
uh right in the extensions Tab and just
1:16
type here draw
1:19
IO integration so just type this the
1:23
very first link which comes in simply
1:25
click on enable so once you enable this
1:28
extension it uh you you can actually
1:30
reload your vs code simply restart it
1:34
and just uh restart
1:36
it so after you restart you just need to
1:41
make a simple file called as text do
1:46
draw IO this is the name of the
1:49
extension we need to give so this will
1:51
be the file name and this is actually
1:53
the extension you need to give draw IO
1:56
so this will change to this uh icon
1:58
right here and now you can
2:00
actually have let me just zoom out so
2:03
that you can clearly see so you will
2:05
have a fully fleshed editor where you
2:08
can actually draw any sort of shapes you
2:10
can import these ovals rectangles
2:13
triangles
2:15
everything you can see that so you can
2:17
zoom in basically you can adjust the
2:20
size anything you can change the color
2:24
of it let's
2:25
suppose in the right hand center you can
2:28
change the properties right here
2:31
and you can change the color accordingly
2:33
pick your favorite color you can even
2:35
choose gradient as well so you can pick
2:38
any from the Color Picker so it has all
2:40
the options available so you don't need
2:42
to go to any can work loan Editor to
2:45
actually make your graphics and images
2:46
you can just use this extension in vs
2:49
code it's good for programmers because
2:51
many of times we need to build out
2:53
Graphics so we don't need to go to third
2:57
party websites you can directly use
2:58
split uh vs code so here you can write
3:01
your just choose your text uh font so
3:05
you can just write any text let's
3:08
suppose I write this
3:10
so I can adjust the size so here you can
3:14
change manually provide the size
3:17
here just inside this tab you can
3:20
increase the size of
3:27
it so now you will basically see you can
3:31
also manually do this by increasing
3:35
it so after you are done with it you
3:39
will see that you can even import any
3:42
fonts from Google fonts as well so let's
3:46
suppose you want to import a custom font
3:48
you can import web fonts as well import
3:51
Google fonts as well you just need to
3:54
give the name of the Google
3:56
font so if you visit Google fonts you
3:58
can actually use any fonts of your
4:00
choice you just need to give the name of
4:02
the
4:03
font so here you can actually if you
4:07
want to give this
4:09
uh latto you can see this is the font
4:12
name we just need to provide the name
4:14
right
4:15
here so just provide the
4:18
name click on apply so now it will apply
4:21
this font right here you'll see that so
4:24
this font is added right here in the
4:26
editor itself so you can pick the
4:29
built-in folds as well so you can pick
4:32
your custom phone that you select so
4:35
after you do this uh there is option
4:39
right here in the file menu you can
4:41
import export and you can export this to
4:44
a SVG file or PNG file or Draw IO file
4:48
so this is actually a diagram file so if
4:51
I want to export this into a PNG file so
4:54
what I can do I
4:58
can let me now show you this is actually
5:02
the image file which is saved right here
5:04
very simple you can make complex
5:06
flowchart diagrams as well inside this
5:09
it has all the extensions available you
5:11
can increase the size decrease it
5:13
accordingly if you're making it for
5:15
Instagram YouTube so totally depend upon
5:18
you can choose the size so it has all
5:22
the options so in this short little
5:24
video I can't show you all the options
5:26
but you can see it has a fully flesh
5:28
editor
5:29
built inside vs code so you can also
5:33
choose the background color as well so
5:36
you can also provide any background
5:38
color that you
5:43
want so you can see that the background
5:45
color is changed right here so I can
5:48
just select the black one which is
5:50
looking good so
5:55
here for this font color you can change
5:59
it to any color let's suppose you want
6:01
to change it to Yellow you can see that
6:04
so everything is customizable in
6:09
this this is you can change the
6:12
background color to
6:13
anything can see that so all these
6:17
shapes are available this is the oval
6:18
shape that you can see if you want to
6:20
remove element you can right click these
6:23
all options give you can just make it to
6:26
front to back bring forward bring
6:28
backward and you can delete this any
6:31
individual element you want to delete
6:33
you can simply click delete and let's
6:35
suppose you accidentally deleted element
6:37
you have the option of redo as well you
6:40
can see that redo undo all these options
6:43
are available you can individually
6:46
select elims and click the dpin icon to
6:48
remove it and uh everything is lined up
6:51
guys you can uh save it as a SVG as well
6:55
so there is an SVG option as well you
6:57
can save it as a SV file as well so all
7:01
the files are available so this opens it
7:04
in the browser you'll see that
7:07
so it's a fully fleshed editor guys you
7:10
can draw complex flowchart
7:14
diagrams so I don't have experience in
7:17
using it but uh I just telling you
7:20
you'll see it has pre-built components
7:22
icons you will see that this is the
7:26
icon this is a you can see it's a table
7:30
structure you can addit values right
7:32
here you can provide
7:44
values so this is the cool little
7:47
extension guys uh and uh you can see
7:51
that so please hit that like button
7:54
subscribe the channel as well you can
7:55
change the portrait and landscape mode
7:58
as well so all these things are given so
8:01
please hit that like button subscribe
8:03
the channel as well and I will be seeing
8:05
you in the next video
#Visual Art & Design
#Programming
#Multimedia Software
#Family-Oriented Games & Activities
#Drawing & Coloring
#Clip Art & Animated GIFs
#Visual Arts & Design Education