Hello, dear Habrazhiteli. I present to your attention the translation of the article From Draw.io to Vue.js app by Francesco Zuppichini.

This is my first post on Habré and I decided to start by translating an article about one cool tool that allows you to generate a Vue.js application from a UML diagram.
Surprised? I was just delighted when I stumbled upon it.

Of course, as in any beta version, there is a lot of work to do. For example, I first contacted the author and said that I wanted to make corrections to the structure of the component template and the naming of paths. The author came out in an hour on the link, put the code on GitHub and wrote a small tutorial. After adopting the PR, permission was granted to translate the article, with an indication of the link to the original.

Who cares - I ask under the cat.

From Draw.io to Vue.js app

From Draw.io to Vue.js app

Creating an application should be as easy as drawing a graph in draw.io
Francesco Saverio

What if I tell you that you can transform this:

Graph drawn in draw.io

in it:

Application structure

It turned out the Vue.js project with all the files and imports that you need to start creating your cool product. Cool, yeah?

I made a small demo video that you can watch here:

A web application is just a graph.

Each web application can be expressed as a graph.
Let's think a bit. When you use a framework such as React, Angular, or Vue, you always have one root component.

In our example, the root component is the App component, everything else is just a graph node. We can identify at the first level Home and Index nodes as direct children of the App .

A common standard when developing web applications is storing components in a graph-based directory structure. Therefore, usually for each component a directory is created with the same name where the component itself and all its children are located.

For example, Index is the root of a subgraph composed by itself, User and Post . Therefore, it makes sense to imitate this abstraction in application structures.

Index and child components

This has two advantages: scalability, since the subgraphs are independent, and an easy understanding of the structure and logic of the application.

In addition, you can always see the overall structure of the application, just looking at the graph.

From graph to application

So, we said that every web application is actually a graph, so we can generate them from it.

In the end, every file starting with a graph is simple. You just need to find the intersection of the trees and create each file in its local root directory, and you can do this recursively.

There is a problem, we know that in modern web applications, components import and use other components. Therefore, we need to associate each of them with its dependencies and create a dynamic template based on the current programming language, which contains the correct syntax for importing them within it.

In JavaScript, files are imported like this:

import italy from 'italy' // import whole module import { Spaghetti} from 'italy' // import a single entity in italy 

Therefore, to go from graph to application, we need to create each file, place it in the correct position based on the graph itself and display the correct template for importing dependencies.

Drawio2vuejs

I created a package that allows you to draw your application in draw.io and use the exported XML file to create the application Vue.js. It's called graph2app-drawio2vuejs .

The package can be found here:

FrancescoSaverioZuppichini / DrawIo2Vuejs

Actually, this is not a new idea, I developed a while ago a way to do almost the same thing using python:

FrancescoSaverioZuppichini / drawIoToVuejs

But keep in mind that this new version of the npm package is much better .

Therefore, first of all, install the package globally using npm:

  $ npm i -g graph2app-drawio2vuejs 

Now you can use it in the terminal with the command:

  $ drawio2vuejs 

But, of course, you need to pass a few arguments:

  $ drawio2vuejs --help Usage: drawio2vuejs [options] scaffold Vuejs app from Draw.io Options: -V, --version output the version number -d, --dist <n> Output destination -x, --xml <n> xmlPath -h, --help output usage information 

Be sure to pass the path to the xml file draw.io.

It's time to draw! Switch to draw.io , select UML in the left pane and click on Object :

The object is used to describe the node in the graph.

Now you can start by creating the first node. Remember that this will be your root component. For my cases, the root component is always the first node that is drawn on the diagram.

Our first node: App

Then, based on the application you want to create, you can add another node.

now we have two nodes!

Now we want Home to be a child of the App . So click on Home and use the arrow to connect to the App .

Home child component in App

What if we also want to import Home into the App as a dependency? Click on the use arrow in the UML section on the left and place it from the App to Home .

App imports Home as dependency

Good! You created your first graph! Let's use it to create a Vuejs application based on it.

We said that we need an xml file, so export it without compression . Click File> Export As> XML> Compressed (none) .

Now create the base application Vue.js using the Vue command line:

  $ vue init webpack app 

After you do this, we are ready to generate an application from the graph:

  $ drawio2vuejs --xml=<pathToYourXml> --dist=<pathToYourVuejsApp> 

For me there will be such a command:

  $ drawio2vuejs --xml=/Users/VaeVictis/Desktop/app.xml --dist=/Users/VaeVictis/Desktop/app/src 

If everything works correctly, you should see the following result:

result

The App.vue file will be updated since it was already there, adding the correct import for Home . A new component Home will also be created. If we open App.vue , we should see:

The component is correctly imported, and the Home folder with the Home.vue file has been correctly created!

graph2app

The drawio2vuejs package is designed using another package that I developed: graph2app .

https://www.npmjs.com/package/graph2app-core

Soon I am going to make an article about this, how to apply a module using three parts:

• App
• Graphbuilder
• File

App , where the main logic, creates a directory and files from the graph. The graph is made using an instance of GraphBuilder . In our case, I created DrawIoGraphBuilder , which extends it to parse the XML file from draw.io.
graph2app-drawio-graph-builder

Developers will be able to extend the base instance for analyzing the graph using other types of interfaces.

File is an abstraction of nodes on a graph. It has a template from which the component is generated. Thus, when graph2app receives a graph, it also needs a File instance to call the rendering method on it and save the file correctly.

For Vue.js, I created:
graph2app-vue-core

As you can see, the package has a modular structure. We could use the same DrawIoGraphBuilder with another File instance to create, for example, React applications from the same draw.io graph.

Conclusion

Hope you enjoy this article. I firmly believe that visualizing an application can improve performance. The library is still in beta, and needs some improvement. I think that people will like this idea and they will contribute to development.

Please let me know your opinion. Thank you for your interest.

Francesco Saverio