From e751f224f7409e8ebf9c3ab5d824acbf938e336e Mon Sep 17 00:00:00 2001 From: Klemek Date: Thu, 18 Jul 2019 10:58:10 +0200 Subject: [PATCH] [skip CI] updated README.md --- README.md | 212 ++++++++++++++++++++++++++++++++++++------- build_preview.js | 115 +++++++++++++++++------ docs/sample.yml | 62 ++++++++++--- preview/example2.svg | 1 + 4 files changed, 315 insertions(+), 75 deletions(-) create mode 100644 preview/example2.svg diff --git a/README.md b/README.md index 2d71dc2..c4efb5a 100644 --- a/README.md +++ b/README.md @@ -5,23 +5,9 @@ # fa-diagrams **SVG diagrams built from Font-Awesome icons** -**[Demo](https://klemek.github.io/fa-diagrams)** - -## RoadMap to v1 - -* [x] Font-Awesome paths scrapping in build -* [x] Node placing with links -* [x] SVG output -* [x] Node's icon rendering -* [x] Simple links rendering -* [x] Dashed links rendering -* [x] Colors -* [x] Sub-texts -* [x] Font styles -* [x] Sub-icons -* [x] Unit testing -* [ ] Examples +![sample](preview/example1.svg) +### **[Web Editor](https://klemek.github.io/fa-diagrams)** ## Summary @@ -44,6 +30,8 @@ * [Thrown errors](#thrown-errors) * [Change icons](#change-icons) * [Examples](#examples) + * [Example 1 : Hello World](#example-1-hello-world) + * [Example 2 : Web App](#example2-web-app) ## Usage *[back to top](#top)* @@ -53,7 +41,7 @@ ```javascript const faDiagrams = require('fa-diagrams'); -// data: sample +// data: example1 const data = { "nodes": [ { @@ -95,9 +83,8 @@ svg2img(svg, function(error, buffer) { }); ``` -Will produce the following diagram: +Will produce the diagram above -![sample](preview/sample.svg) ### Html script @@ -319,23 +306,23 @@ If you want to change the icons you can edit/build your own `resources.json` as ```javascript { - "name": "squares", - "height": 60, //height of all icons - "index": [ // which categories are there and in which order it should be searched + "name";: "squares", + "height";: 60, //height of all icons + "index";: [ // which categories are there and in which order it should be searched "solid", "hollow" ], - "icons": { - "solid": { - "square":{ - "path":"M10 10v-40h40v40z", - "width":60 + "icons";: { + "solid";: { + "square";:{ + "path";:"M10 10v-40h40v40z", + "width";:60 } }, - "hollow": { - "square":{ - "path":"M10 10v-40h40v40h-40m10 10v-20h20v20h-20z", - "width":60 + "hollow";: { + "square";:{ + "path";:"M10 10v-40h40v40h-40m10 10v-20h20v20h-20z", + "width";:60 } } } @@ -345,7 +332,7 @@ If you want to change the icons you can edit/build your own `resources.json` as ## Examples *[back to top](#top)* -### Example 1 +### Example 1 : Hello World ![](preview/example1.svg) @@ -413,4 +400,163 @@ links:

-(soon) +### Example 2 : Web App + +![](preview/example2.svg) + +
+JSON data (click) +

+ + +```json +{ + "options": { + "placing": { + "diagonals": true + }, + "rendering": { + "icons": { + "color": "#00695C" + }, + "links": { + "color": "#26A69A" + }, + "texts": { + "color": "#004D40", + "font": "mono", + "font-size": 12, + "margin": 0.25 + }, + "sub-icons": { + "color": "#004D40" + } + } + }, + "nodes": [ + { + "name": "client", + "icon": "laptop", + "bottom": "user" + }, + { + "name": "page", + "icon": "file-code", + "top": "index.html" + }, + { + "name": "js", + "icon": "js-square", + "bottom": "front-end" + }, + { + "name": "server", + "icon": "node", + "bottom": "back-end" + }, + { + "name": "db", + "icon": "database" + } + ], + "links": [ + { + "from": "client", + "to": "page" + }, + { + "from": "page", + "to": "js", + "type": "double", + "top": { + "icon": "vuejs" + }, + "bottom": "VueJS", + "direction": "down" + }, + { + "from": "js", + "to": "server", + "type": "split-double", + "direction": "right", + "top": { + "text": "Ajax" + }, + "bottom": { + "text": "JSON" + } + }, + { + "from": "db", + "to": "server", + "type": "double", + "bottom": "Sequelize" + } + ] +} +``` +

+
+ +
+YAML data (click) +

+ + +```yaml +options: + placing: + diagonals: true + rendering: + icons: + color: '#00695C' + links: + color: '#26A69A' + texts: + color: '#004D40' + font: mono + font-size: 12 + margin: 0.25 + sub-icons: + color: '#004D40' +nodes: + - name: client + icon: laptop + bottom: user + - name: page + icon: file-code + top: index.html + - name: js + icon: js-square + bottom: front-end + - name: server + icon: node + bottom: back-end + - name: db + icon: database +links: + - from: client + to: page + - from: page + to: js + type: double + top: + icon: vuejs + bottom: VueJS + direction: down + - from: js + to: server + type: split-double + direction: right + top: + text: Ajax + bottom: + text: JSON + - from: db + to: server + type: double + bottom: Sequelize + +``` +

+
\ No newline at end of file diff --git a/build_preview.js b/build_preview.js index 4a08287..454777c 100644 --- a/build_preview.js +++ b/build_preview.js @@ -45,12 +45,10 @@ const generatePreview = (name, exportSample, data) => { const jsonRegex = new RegExp(`\\n\`\`\`json([\\s\\S](?!\`\`\`))*`, 'm'); const yamlRegex = new RegExp(`\\n\`\`\`yaml([\\s\\S](?!\`\`\`))*`, 'm'); - console.log('readme : ', readme.length); - // JS object if (jsRegex.test(readme)) { console.log(`preview ${name}: found JS object`); - console.log(jsRegex.exec(readme)) + console.log(jsRegex.exec(readme)); readme = readme.replace(jsRegex, `// data: ${name}\nconst data = ${JSON.stringify(data, null, 2)}`); } // JSON @@ -73,32 +71,6 @@ ${yaml.safeDump(data)}`); fs.writeFileSync(`preview/${name}.svg`, faDiagrams.compute(data), {encoding: 'utf-8'}); }; -generatePreview('sample', false, { - nodes: [ - { - name: 'node1', - icon: 'laptop-code', - color: '#4E342E', - bottom: 'my app' - }, - { - name: 'node2', - icon: 'globe', - color: '#455A64', - bottom: 'world' - } - ], - links: [ - { - from: 'node1', - to: 'node2', - color: '#333333', - top: {icon: 'envelope'}, - bottom: '"hello"' - } - ] -}); - generatePreview('example1', false, { nodes: [ { @@ -125,4 +97,89 @@ generatePreview('example1', false, { ] }); +generatePreview('example2', true, { + 'options': { + 'placing': { + 'diagonals': false + }, + 'rendering': { + 'icons': { + 'color': '#00695C' + }, + 'links': { + 'color': '#26A69A' + }, + 'texts': { + 'color':'#004D40', + 'font': 'mono', + 'font-size': 12, + 'margin': 0.25 + }, + 'sub-icons': { + 'color':'#004D40', + }, + } + }, + 'nodes': [ + { + 'name': 'client', + 'icon': 'laptop', + 'bottom': 'user' + }, + { + 'name': 'page', + 'icon': 'file-code', + 'top': 'index.html' + }, + { + 'name': 'js', + 'icon': 'js-square', + 'bottom': 'front-end' + }, + { + 'name': 'server', + 'icon': 'node', + 'bottom': 'back-end' + }, + { + 'name': 'db', + 'icon': 'database' + } + ], + 'links': [ + { + 'from': 'client', + 'to': 'page' + }, + { + 'from': 'page', + 'to': 'js', + 'type': 'double', + 'top': { + 'icon': 'vuejs' + }, + 'bottom': 'VueJS', + 'direction': 'down' + }, + { + 'from': 'js', + 'to': 'server', + 'type': 'split-double', + 'direction': 'right', + 'top': { + 'text': 'Ajax' + }, + 'bottom': { + 'text': 'JSON' + } + }, + { + 'from': 'db', + 'to': 'server', + 'type': 'double', + 'bottom': 'Sequelize' + } + ] +}); + fs.writeFileSync('README.md', readme, {encoding: 'utf-8'}); \ No newline at end of file diff --git a/docs/sample.yml b/docs/sample.yml index 820f717..7a90016 100644 --- a/docs/sample.yml +++ b/docs/sample.yml @@ -1,16 +1,52 @@ +options: + placing: + diagonals: true + rendering: + icons: + color: '#00695C' + links: + color: '#26A69A' + texts: + color: '#004D40' + font: mono + font-size: 12 + margin: 0.25 + sub-icons: + color: '#004D40' nodes: - - name: node1 - icon: laptop-code - color: '#4E342E' - bottom: my app - - name: node2 - icon: globe - color: '#455A64' - bottom: world + - name: client + icon: laptop + bottom: user + - name: page + icon: file-code + top: index.html + - name: js + icon: js-square + bottom: front-end + - name: server + icon: node + bottom: back-end + - name: db + icon: database links: - - from: node1 - to: node2 - color: '#333333' + - from: client + to: page + - from: page + to: js + type: double top: - icon: envelope - bottom: '"hello"' + icon: vuejs + bottom: VueJS + direction: down + - from: js + to: server + type: split-double + direction: right + top: + text: Ajax + bottom: + text: JSON + - from: db + to: server + type: double + bottom: Sequelize diff --git a/preview/example2.svg b/preview/example2.svg new file mode 100644 index 0000000..c133a4f --- /dev/null +++ b/preview/example2.svg @@ -0,0 +1 @@ +VueJSJSONAjaxSequelizeuserindex.htmlfront-endback-end \ No newline at end of file