From Draw.io to Vue.js app
What if I tell you that you can transform this:
A graph drew with draw.io
to this:
Application’s tree
A ready to go Vue.js project with all the files and the imports that you need to start coding amazing stuff. Cool huh?
I have made a little demo that you can watch from here:
https://www.youtube.com/watch?v=ktnOmnHjDns
A web app is just a graph
Every web application can be expressed as a graph. Let’s think for one second. When you are using a framework such as React, Angular or Vue you always have one entry in winch you application is rendered: that’s the root.
In our example, the root is the App component, everything else is just a node in the graph. We can identify in the first level the Home and Index nodes as direct children of App.
A common standard while develop web applications is to store the components into a graph-based directory structure. So usually for each component a directory with the same name is created where the component itself and all its children are putted.
For example, Index is the root of the subgraph composed by itself, User and Post. So it makes sense to mimic this abstraction into the application’s structures.
This gives two advantages, scalability since subgraphs are independent and it is easier to understand the application structure and logic.
Also, it is always possible to have a global view of the app by just looking at the graph.
From a graph to an App
So we have said that every web app is actually a graph, therefore we could generate them from it.
In the end, created each file starting from a graph is easy. You just need to traverse the tree and create each file inside its local root directory and you can do it recursively.
A problem arises, we know that in a modern web application components import and use other components. So we need to link each one of them with its dependencies and create a dynamic template, that based on the current programming language, renders inside it the correct syntax to import them.
In javascript we know that to import a file we need to type:
import { Spaghetti} from 'italy' // import a single entity in italy
So to go from a graph to an app we need a way to create each file, put them in the correct position based on the graph itself and to render the correct template to import the dependencies
Drawio2Vuejs
I have created a package that allows you to draw your application in draw.io and use the exported xml file to create the Vuejs app. It is called graph2app-drawio2vuejs.
You can find the package here:
https://github.com/FrancescoSaverioZuppichini/DrawIo2Vuejs
Actually, that is not a new idea, I had developed some time ago a way to do more or less the same thing using python:
FrancescoSaverioZuppichini/drawIoToVuejs
But keep in mind that this new javascript version is much better.
So first of all some link to install it using npm, remember that is made to be a global module and it must be called from the shell. Install it as usual:
npm i -g graph2app-drawio2vuejs
Then you can call it from the shell using the command:
$ drawio2vuejs
But of course you need to pass some arguments!
Usage: drawio2vuejs [options]
scaffold Vuejs app from Draw.io
Options:
-V, --version output the version number
-d, --dist <n> Output destination
-V, --version output the version number
-d, --dist <n> Output destination
-x, --xml <n> xmlPath
-h, --help output usage information
Basically we need to pass the path to the draw.io’s xml file and the destination folder.
It is time to draw! Go to https://www.draw.io/ and select the UML on the left bar and click on the Object:
Object is used to describe a node in the graph
Now you can start by creating the first node, remember that this will your root. For how I develop it the root is always the first node that you draw.
Then, based on the application you want to create, you can add another node.
Now, we want Home to be a child of App. So click on Home and use the arrow to connect it to App.
What if we also want App to import Home as a dependency? Click on use arrow in the UML section on the left and place it from App to Home
App has Home as dependency
Okay! You have created your first graph! Let’s use it to create a Vuejs app based on that.
We have said we need an xml file so export it without compression. Click on File > Export as > XML >Compressed (no).
Now make a basic Vuejs app by using the Vue command line:
vue init webpack app
After you have done, we are ready to go:
drawio2vuejs --xml=<pathToYourXml> --dist=<pathToYourVuejsApp>
in my case:
drawio2vuejs --xml=/Users/VaeVictis/Desktop/app.xml --dist=/Users/VaeVictis/Desktop/app/src
If every thing works correctly you should as output:
drawio2vuejs output
It means that updated App.vue since it was already there by adding the correct import for Home and it created Home. If we open App.vue we should see:
The right component is imported and the Home folder with Home.vue filewas correctly created!
graph2app
The package drawio2vuejs is made by using an other package that I developed: graph2app.
https://www.npmjs.com/package/graph2app-core
Very quickly, I am going to make an article about that, it is a module to scaffold application from a graph by using three parts:
- App
- GraphBuilder
- File
App is where the main logic is, it creates the directory and files from a graph. The graph il made by using a GraphBuilder instance. In our case, I have created a DrawIoGraphBuilder that extends it to parse the xml file from draw.io.
graph2app-drawio-graph-builder
People could extends the basic instance to parse a graph from other type of interfaces.
File is an abstraction of the nodes in the graph. In has a template that is what is rendered. So, when graph2app receives a graph it also needs a File instance in order to call the render method on it and save the file with the correct output.
For Vue.js I have created:
As you see it is very modular. We could use the same DrawIoGraphBuilder with other File instance to create, for example, React apps from the same draw.io’s graph.
Conclusion
I hope you like this article. I strongly believe that visualise an application and creating from that visualisation could improve productivity. The library is still a beta and it will need some improvement, I think people will like that idea and will contribute. Let me know your feedbacks guys.
Thank you for reading.
Suggest:
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ Javascript Project Tutorial: Budget App
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch