[skip CI] updated README.md

README.md

@@ -5,23 +5,9 @@
 # fa-diagrams
 **SVG diagrams built from Font-Awesome icons**
 
-**[Demo](https://klemek.github.io/fa-diagrams)**
+![sample](preview/example1.svg)
-
-## 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
 
+### **[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",
+    "name";: "squares",
-    "height": 60, //height of all icons
+    "height";: 60, //height of all icons
-    "index": [ // which categories are there and in which order it should be searched
+    "index";: [ // which categories are there and in which order it should be searched
         "solid",
         "hollow"
     ],
-    "icons": {
+    "icons";: {
-      "solid": {
+      "solid";: {
-        "square":{
+        "square";:{
-          "path":"M10 10v-40h40v40z",
+          "path";:"M10 10v-40h40v40z",
-          "width":60
+          "width";:60
         }
       },
-      "hollow": {
+      "hollow";: {
-        "square":{
+        "square";:{
-          "path":"M10 10v-40h40v40h-40m10 10v-20h20v20h-20z",
+          "path";:"M10 10v-40h40v40h-40m10 10v-20h20v20h-20z",
-          "width":60
+          "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:
 </p>
 </details>
 
-(soon)
+### Example 2 : Web App
+
+![](preview/example2.svg)
+
+<details>
+<summary>JSON data (click)</summary>
+<p>
+
+<!-- data: example2 -->
+```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"
+    }
+  ]
+}
+```
+</p>
+</details>
+
+<details>
+<summary>YAML data (click)</summary>
+<p>
+
+<!-- data: example2 -->
+```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
+
+```
+</p>
+</details>

build_preview.js

@@ -45,12 +45,10 @@ const generatePreview = (name, exportSample, data) => {
   const jsonRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`json([\\s\\S](?!\`\`\`))*`, 'm');
   const yamlRegex = new RegExp(`<!-- data: ${name} -->\\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'});

docs/sample.yml

@@ -1,16 +1,52 @@
-nodes:
+options:
-  - name: node1
+  placing:
-    icon: laptop-code
+    diagonals: true
-    color: '#4E342E'
+  rendering:
-    bottom: my app
+    icons:
-  - name: node2
+      color: '#00695C'
-    icon: globe
-    color: '#455A64'
-    bottom: world
     links:
-  - from: node1
+      color: '#26A69A'
-    to: node2
+    texts:
-    color: '#333333'
+      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: envelope
+      icon: vuejs
-    bottom: '"hello"'
+    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