![Video thumbnail for Create Your Own Diagram Editing Site with AI Capabilities [5 Min Docker]](https://video-meta.open.video/resized-posters/ro286OVPc72/res640.webp?cb=0)
Up next in 10
With this Github project, Next AI Draw.io, you can easily create your own draw.io diagram editing web site with AI capabilities. Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
This video is to show you a couple of different ways to create that, either using Docker or one click to deploy to Vercel. It also shows how to connect your own sub-domain to your deployment.
Related Links:
✍https://blog.51sec.org/2025/12/5-mins-docker-build-ai-driven-online.html
✍https://github.com/DayuanJiang/next-ai-draw-io
Related Videos:
🌟Run Free VPS Docker Containers (RDP Desktop and NextCloud) From GCP Cloud Shell (16G RAM, 4 vCPU) - https://youtu.be/IqE2EOywH_A
🌟[5 Mins Docker] Create Your Own Hand-drawn Style Diagram Site with Animation - Excalidraw - https://youtu.be/SKRk0NJS0x8
🌟Create Your Own Diagram Editing Site with AI Capabilities [5 Min Docker] - https://youtu.be/0uEDyKtaGJ4
🌟 Create Your Own Simple But Powerful MindMap Drawing Website- https://youtu.be/h4p8Jg45Oao
💖Chapters:
0:00 - Introduction
1:26 - Lets start it
3:34 - 1. Test Run in Labs.Play-With-docker.com
5:53 - 2. Get Your Free OpenAI API Key
6:56 - 3. Create Own AI Draw.IO Docker Server to Run
Show More Show Less View Video Transcript
0:07
Hello everyone, welcome back Johnny
0:10
YouTube channel. In this video, I'm
0:12
going to show you this AI pound diagram
0:14
creation tool. Next AI jaw.io.
0:19
This is their GitHub. You may familiar
0:22
with jaw io
0:24
online diagram creation website. They
0:27
have their app.d diagrams.net is website
0:31
for free to use. You can create your own
0:33
diagrams. You also can create your own
0:37
jaw.io website as I showing you in my
0:41
previous post. Uh there's a way you can
0:44
create your own jaw io similar website
0:47
using docker run command here. Very
0:50
impressive. Now since AI is became
0:54
standard for our production. Now there's
0:57
a new project called the next AI draw.io
1:00
which we can use those AI tools to
1:04
create the chart or diagrams or
1:07
whiteboard for you immediately just with
1:10
some prompt you entered in there. So
1:13
that's what this video for. I'm going to
1:15
show you how to get your own next ai.io
1:19
how to connect your AI tools together
1:22
and use it. Now let's jump into it.
1:30
project itself does have a demo website
1:35
which you can use to generate your
1:38
diagram immediately without create your
1:40
own. Here is the one I generated before.
1:44
You do able to see some diamonds from
1:49
here with some prompt.
1:54
The reason why I suggest you to create
1:57
your own because uh API
2:00
call has a limitation for this website.
2:04
The developers API has been overwhelmed.
2:08
So sometimes you may be able to see some
2:12
issue when you're trying to use it
2:14
because the daily limitation and the
2:17
request or has cap on it. So let's even
2:22
the developer suggest us to use our own
2:25
API key. So in this video we going to
2:28
show you how to use that or if you have
2:31
your own API key you also can set it up
2:35
in here to use it.
2:41
For example if you have your open AI key
2:45
then you can enter it here with model
2:47
ID.
2:49
In this video, I'm going to show you how
2:51
to create your own Nex AI joio website
2:55
on your own server and how to get your
2:59
AI this API keys and then put it in. I'm
3:04
going to use one of my Google cloud VM
3:08
as a demo to show you the steps how to
3:11
create it and eventually we're going to
3:14
create our own domain AI jaw and then we
3:19
can use your own customized domain to
3:23
access to it.
3:26
So let's start to play with uh docker uh
3:30
using the docker command provided by
3:33
developer.
3:39
So from the github project page you
3:43
should be able to find out the docker
3:47
command. It's pretty simple. You can
3:50
just copy this command and then I'm
3:52
throw it into docker playground shift
3:57
plus insert key. So that's the paste
4:00
command. So you can paste this docker
4:03
run command which is going to this
4:07
project on port 3000. And we are not
4:10
entering our open API key here yet. uh
4:14
but that won't stop us to create this
4:17
application. When we test it the the
4:20
command works well then we can move to
4:23
our docker server environment and then
4:27
get the API key to work on.
4:34
It's pretty fast as you can see 3,000
4:37
this port has been listing in here. You
4:40
can just directly click on it. It should
4:43
be open a new page.
4:50
After a couple seconds, the website is
4:54
up and running. It's almost exactly the
4:56
same as we showed you from the demo
4:59
side. Here, create the diagram with AI.
5:03
You can create a paper to diagram
5:05
animated diagram AWS architecture
5:09
replicate flow chart creative join. Here
5:14
you need to enter your prompt and then
5:18
telling the AI tools what kind of
5:22
diagram you want to create it. For now
5:25
even we asking create the background it
5:29
will not do anything since we don't have
5:32
API key here. So at least we know how
5:35
it's working. Now next step we going to
5:38
show you how to get the API keys. So
5:42
basically you just need to copy this to
5:45
your browser and then follow the step by
5:48
step I show you and then you can get
5:50
your free API key. There's no cost
5:52
behind it.
5:57
I'm going to use Open AI as an example
6:00
to show you how to get your own free API
6:03
keys. Just paste the URL into your
6:07
browser. Assuming you already have a
6:09
free Open AI account as I'm having, you
6:13
can create your own new secret key here.
6:18
If you don't have your existing key
6:21
store somewhere, then you might need to
6:23
create a new secret key just like I am
6:26
showing here. Or even if you never used
6:29
it, so you don't have one, then create a
6:31
new secret key here. Just saying my last
6:36
AI
6:38
show key.
6:42
So then you're going to have a chance to
6:44
copy this key out and then put into
6:50
here you can use it in your docker
6:54
ground command which is what we are
6:56
going to do.
7:00
I'm going to use one of VM I created in
7:04
Google cloud. This is a free VM. If you
7:07
don't know how to get your free forever
7:11
virtual machine in Google cloud, then
7:14
you can watch my videos here to try to
7:17
get your own free VM. Then you can play
7:19
with it. It doesn't has to be powerful.
7:22
The free tier VM is more than enough for
7:24
you to get this website running. I do
7:27
have a SSH session in browser. So you
7:31
can see I'm running um 22 2404.
7:36
My hard drive has um around 16 gig to
7:40
use and the Docker has been running on
7:44
this machine for a while. I don't have
7:47
any other Docker running on this machine
7:50
right now. So which I can throw into my
7:54
this docker in here.
7:58
We're going to copy this command and
8:00
modify
8:01
it and we're going to put our API key
8:04
here. Then you can copy this
8:09
directly into your virtual machine
8:17
and to let it run. There's no local
8:20
image. That's why it's go online to pull
8:23
a online image
8:26
3000 the port. Just make sure you have
8:29
this port open. We're going to go back
8:32
to our virtual machine here. Then open a
8:35
port 3000.
8:39
Go to VPC networks
8:42
firewall.
8:46
Create a new rule.
8:57
All instance in the network
9:03
source IP bn
9:08
only allow port 3000.
9:12
Great. Now we can go back our computer
9:15
engine
9:17
VM instance.
9:21
That's our public IP.
9:26
You can try to access to it.
9:30
Again, right away it's going to prompt
9:33
you up exactly same interface we will
9:36
see in the demo side. Of course, in this
9:39
right now, we have AI connect to it. So
9:43
now we can ask them to create a a zoo
9:47
diagram to show a basic landing zone top
9:52
ofology. Let's send it. So getting shape
9:56
library.
9:58
Yeah. Create generating diagram.
10:04
Perfect. So it did their work. Maybe not
10:08
perfectly for your requirement. You need
10:12
to make your prompt more specified for
10:16
your diagram based on what you need. But
10:20
the lab will automatically added some
10:22
component which give you a good started
10:25
just like we can show you. They have
10:27
virtual networks,
10:29
subnet, firewall, VM those kind of
10:33
things which also give you a good start.
10:35
You don't have to uh find it from
10:38
online. they already put those icons
10:41
into the diagram. So, this works well.
10:44
Um, regarding how to create the diagram,
10:47
you can try to go to the GitHub project
10:51
to find out how. For this video, I'm
10:55
going to show you the next step which is
10:57
to how to using your own domain.
11:04
To complete this step, you do need some
11:08
your own domains, your own MPM setup or
11:12
maybe Cloudflare account. I'm using
11:15
Cloudflare to manage my DNS record. So
11:18
that's what you can see from screen
11:19
which I found is very easy to use and
11:22
very powerful with lots of security
11:24
feature. I don't have AI joist DNS
11:28
record. So I'm going to create one. I'm
11:31
going to create a a record. I'm going to
11:33
enter and then IPv4 address because we
11:38
going to using a reverse proxy mpm I'm
11:42
using here. So in that way I have to put
11:46
my mpm public IP into this settings a
11:52
record point to the mpm and mpn going to
11:57
proxy the request to the final server.
12:02
So, we're going to add a proxy host.
12:05
We're going to put a domain which is AI
12:09
draw. Please make sure you add this in
12:13
here. Now, we can put the
12:17
into this forward or the name IP. Of
12:21
course, the port is 30,000. U make sure
12:25
it's publicly accessible.
12:27
Uh we need to configure our SSL request
12:31
a new SSL certificate here. We're going
12:34
to agree to the term let's encrypt
12:37
that's our SSL service provider.
12:41
Save it. So it's going to turn and going
12:44
to request a new SSL certificate.
12:48
When it get ready, it will show that the
12:51
record into our list mpn engine x proxy
12:56
manager proxy host list. So we see this
13:00
one here now mostly are ready. So let's
13:04
give it try to see how it looks like.
13:06
Now we're going to use in
13:09
ajaw.itpro.com.
13:11
So now it's fully working. We have our
13:15
own AI draw io website. We also have our
13:21
open AI embed into the configuration and
13:26
we are using our own domain to access to
13:28
it.
13:33
We already deployed it through a docker
13:36
just like recommended from the original
13:39
project developer. Here we're using the
13:42
docker run command. There's also another
13:46
easy way to deploy it if you have Verso
13:50
account. So here it says this the
13:52
easiest way to deploy your next.js app.
13:56
It's still similar vers platform. So it
13:59
even created a button for us to make it
14:02
everything simple. So we're going to try
14:05
this one. I do have vers account and use
14:09
it for some other project. So we're
14:11
going to do same thing. We're going to
14:14
create a new repository for this project
14:17
which going to clone from the author's
14:20
GitHub project. So it's in my hobby
14:24
plan. So going to go to create. You may
14:26
want to know one thing is environment.
14:30
You need to create all those environment
14:33
variables for your project which we're
14:36
going to do that. Perfect. We just
14:38
deployed a new project to NX perfectly.
14:42
We continue to dashboard.
14:44
Let's try to launch it.
14:48
Well, it works. As you can see, just a
14:52
couple of clicks using the version. You
14:55
can deploy it in couple minutes and it's
15:00
same as what we see from the demo and
15:03
it's also completely free. If you do
15:06
have a free account hobby plan then you
15:10
should be able to do it same as what I
15:12
did here. You also can customize
15:16
your domain. Right now we are using
15:20
vo.app app subdomain to access to it but
15:24
you also have option you can customize
15:26
it to your own domain add it here. So
15:30
this part will not cover here because it
15:32
just need to add domain as long as you
15:35
have whistle account you should be able
15:37
to figure that out by yourself. If you
15:39
have any questions for this video just
15:42
let me know. Put your comments feedback
15:45
into this video's description. I will
15:48
respond back as soon as possible. Thank
15:51
you for watching and see you in my next
15:54
video. Don't forget give me thumb up if
15:57
you like this video. Also subscribe my
15:59
channel if you haven't. Bye for now.