Showing results for 
Search instead for 
Did you mean: 

Drawing from the UI

Level 1
Level 1


NextUI looks very very interesting.

But I first need to learn programming.


And Im wondering, if it is possible to draw a topology from the UI,

like to add nodes, connect nodes, and so on.

Currently we are using yaml topology files to start virtual router labs with KVM.

But to create the topology within the yaml file is always , hm lets say not so nice.

So it would be wonderful, if I could create the topology from the UI, fill my start script to create my virtual router lab.

Is something like this possible?


best regards


4 Replies 4

Cisco Employee
Cisco Employee

Hi Marcel,

Next does not support this feature by default, because it's primarily focused on visualization. However, there's a simple topology editor (follow the link: that you can upgrade into the app you need. It certainly requires a module to convert the topology data into the format you use in your project; and it could be YAML too!

Let me know if you have further questions.


Privet Alex!

many thanks for your answer and the link!

This looks like the way I would like to see it.

Are you familiar with Cisco VIRL?

In VIRL there's also a graphical UI to create very easy and fast a topology.

That VIRL UI works a bit more easy, than the CodePen example code,

For example you can link 2 nodes, just with selection link as a tool and then click on the nodes, you want to connect.

Is there a plan, to add such "drawing support" support direct into Next UI?

Or do you know maybe, how Cisco VIRL is doing it?

(I thought they are also using Next UI)



Hi Marcel,

Thanks for the follow-up!

Yes, I'm familiar with VIRL, and I know that use or used Next in their AutoNetKit tool. Here's the link to the repo: GitHub - sk2/autonetkit: AutoNetkit: an automated network configuration engine

I absolutely agree that the Codepen example is too basic and you need something that is more comprehensive and user-friendly. As a matter of fact, our team is currently focused on a different project, but I believe we're back in summer

Your idea to create the topology editor is great. What's even better is that Next is open-source and everyone can contribute. It has everything to get started with your app (Next can manage DOM, track such events as click on a node, it can dynamically change the topology). So we encourage you and your team to benefit from it, and create the cool stuff with our framework! Basically, our goal is to provide you tools and documentation, while you can use all of it to create specific apps.

By the way, here's are select apps that are built with the power of Next: next-tutorials/ at master · NeXt-UI/next-tutorials · GitHub

I hope I was able to help you!


We use NeXt UI in VIRL. The earlier version was based on that code from my GitHub, but we moved to NeXt UI.

It's possible to write an editor building on top of NeXt UI, but does require a bit of coding.

#VIRL Web-editor alpha detailed walkthrough - YouTube