├── .gitignore ├── README.md ├── doc └── images │ ├── Screen Shot 2017-08-04 at 18.09.47.png │ ├── Screen Shot 2017-08-04 at 18.10.32.png │ ├── Screen Shot 2017-08-04 at 18.10.40.png │ ├── Screen Shot 2017-08-04 at 18.11.40.png │ └── Screen Shot 2017-08-04 at 18.13.03.png ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Draw.io to Vuejs 2 | 3 | ### A faster way to build web-app by using draw.io to draw your Vuejs app 4 | 5 | ## Installation 6 | 7 | ``` 8 | $ npm i -g graph2app-drawio2vuejs 9 | ``` 10 | 11 | ## Before starting 12 | 13 | Before starting you can read the medium article for a step by step guide: 14 | 15 | https://medium.com/@FrancescoZ/from-draw-io-to-vue-js-app-c0f84ede8383 16 | 17 | Or watch this little demo: 18 | 19 | https://www.youtube.com/watch?v=ktnOmnHjDns&feature=youtu.be 20 | 21 | ## Quick start 22 | Go to [draw.io](https://www.draw.io) create a new file and use the UML objects in order to create your components tree. Be aware, use only the labelled as an **object** (the fist one). 23 | ![alt text](https://github.com/FrancescoSaverioZuppichini/drawIoToVuejs/blob/master/images/object.png?raw=true) 24 | 25 | You can use arrows to link the components, the relation parent-children is express by having an arrow from the **children** to the **parent** 26 | ![alt text](https://github.com/FrancescoSaverioZuppichini/drawIoToVuejs/blob/develop/images/app_drawio_2.png?raw=true) 27 | 28 | If you want to also inclued a file into your component you need to use the specific arrow **use** 29 | ![alt text](https://github.com/FrancescoSaverioZuppichini/drawIoToVuejs/blob/develop/images/app_drawio_2.1.png?raw=True) 30 | 31 | That means that, for example, the file *Home.vue* will import file *User.vue*. 32 | 33 | Once you have finished your application you must export it as XML **not compressed** 34 | 35 | Then, to create your components, open the terminal and type 36 | 37 | ``` 38 | drawio2vuejs --xml= --dist= 39 | ``` 40 | 41 | For help 42 | 43 | ``` 44 | drawio2vuejs --help 45 | 46 | ``` 47 | 48 | ## Pro Tip 49 | You can fast use the *vue-cli* in order to create an app and then use our program to ovveride *App.vue* and the components folder. 50 | 51 | -------------------------------------------------------------------------------- /doc/images/Screen Shot 2017-08-04 at 18.09.47.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrancescoSaverioZuppichini/DrawIo2Vuejs/a84eac1227c393c47eee156dc6f3ad1275d06f4a/doc/images/Screen Shot 2017-08-04 at 18.09.47.png -------------------------------------------------------------------------------- /doc/images/Screen Shot 2017-08-04 at 18.10.32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrancescoSaverioZuppichini/DrawIo2Vuejs/a84eac1227c393c47eee156dc6f3ad1275d06f4a/doc/images/Screen Shot 2017-08-04 at 18.10.32.png -------------------------------------------------------------------------------- /doc/images/Screen Shot 2017-08-04 at 18.10.40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrancescoSaverioZuppichini/DrawIo2Vuejs/a84eac1227c393c47eee156dc6f3ad1275d06f4a/doc/images/Screen Shot 2017-08-04 at 18.10.40.png -------------------------------------------------------------------------------- /doc/images/Screen Shot 2017-08-04 at 18.11.40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrancescoSaverioZuppichini/DrawIo2Vuejs/a84eac1227c393c47eee156dc6f3ad1275d06f4a/doc/images/Screen Shot 2017-08-04 at 18.11.40.png -------------------------------------------------------------------------------- /doc/images/Screen Shot 2017-08-04 at 18.13.03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrancescoSaverioZuppichini/DrawIo2Vuejs/a84eac1227c393c47eee156dc6f3ad1275d06f4a/doc/images/Screen Shot 2017-08-04 at 18.13.03.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const { program } = require('graph2app-core') 4 | 5 | const { VueApp, VueFile } = require('graph2app-vue-core') 6 | 7 | const { DrawIoGraphBuilder } = require('graph2app-drawio-graph-builder') 8 | 9 | const drawIoGraphBuilder = new DrawIoGraphBuilder() 10 | 11 | program 12 | .option('-x, --xml ', 'xmlPath') 13 | .description('scaffold Vuejs app from Draw.io') 14 | .parse(process.argv) 15 | 16 | try { 17 | if (program.xml == undefined || program.dist == undefined) { 18 | throw new Error("options xml and dist must be provided, use --help") 19 | } 20 | 21 | const app = new VueApp() 22 | 23 | const root = drawIoGraphBuilder.build(program.xml, VueFile, (root) => { 24 | app.create(program.dist, root) 25 | }) 26 | 27 | } catch (e) { 28 | console.log(e.message) 29 | console.log("use --help for more information"); 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "graph2app-drawio2vuejs", 3 | "version": "0.0.7", 4 | "description": "", 5 | "main": "index.js", 6 | "preferGlobal": "true", 7 | "directories": { 8 | "bin": "./bin" 9 | }, 10 | "bin": { 11 | "drawio2vuejs": "index.js" 12 | }, 13 | "scripts": { 14 | "run": "node index.js" 15 | }, 16 | "author": "", 17 | "license": "ISC", 18 | "dependencies": { 19 | "graph2app-core": "^0.0.3", 20 | "graph2app-drawio-graph-builder": "^0.0.2", 21 | "graph2app-vue-core": "^0.0.4" 22 | } 23 | } 24 | --------------------------------------------------------------------------------