[skip CI] using TOML instead of YAML

README.md

@@ -392,6 +392,37 @@ links:
 </p>
 </details>
 
+<details>
+<summary>TOML data (click)</summary>
+<p>
+
+<!-- data: example1 -->
+```toml
+[[nodes]]
+name = "node1"
+icon = "laptop-code"
+color = "#4E342E"
+bottom = "my app"
+
+[[nodes]]
+name = "node2"
+icon = "globe"
+color = "#455A64"
+bottom = "world"
+
+[[links]]
+from = "node1"
+to = "node2"
+color = "#333333"
+bottom = '"hello"'
+
+  [links.top]
+  icon = "envelope"
+
+```
+</p>
+</details>
+
 ### Example 2 : Web App
 
 ![](preview/example2.png)
@@ -552,3 +583,87 @@ links:
 ```
 </p>
 </details>
+
+<details>
+<summary>TOML data (click)</summary>
+<p>
+
+<!-- data: example2 -->
+```toml
+[options.placing]
+diagonals = false
+
+[options.rendering.icons]
+color = "#00695C"
+
+[options.rendering.links]
+color = "#26A69A"
+
+[options.rendering.texts]
+color = "#004D40"
+font = "mono"
+font-size = 12
+margin = 0.25
+
+[options.rendering.sub-icons]
+color = "#004D40"
+
+[[nodes]]
+name = "client"
+icon = "laptop"
+bottom = "user"
+
+[[nodes]]
+name = "page"
+icon = "file-code"
+top = "index.html"
+
+[[nodes]]
+name = "js"
+icon = "js-square"
+bottom = "front-end"
+
+[[nodes]]
+name = "server"
+icon = "node"
+bottom = "back-end"
+
+[[nodes]]
+name = "db"
+icon = "database"
+
+[[links]]
+from = "client"
+to = "page"
+
+[[links]]
+from = "page"
+to = "js"
+type = "double"
+bottom = "VueJS"
+direction = "down"
+
+  [links.top]
+  icon = "vuejs"
+
+[[links]]
+from = "js"
+to = "server"
+type = "split-double"
+direction = "right"
+
+  [links.top]
+  text = "Ajax"
+
+  [links.bottom]
+  text = "JSON"
+
+[[links]]
+from = "db"
+to = "server"
+type = "double"
+bottom = "Sequelize"
+
+```
+</p>
+</details>

build_preview.js

@@ -1,6 +1,7 @@
 const fs = require('fs');
 const yaml = require('js-yaml');
 const svg2img = require('svg2img');
+const toml = require('@iarna/toml');
 
 const rendering = require('./src/rendering')({
   'scale': 0.05,
@@ -52,6 +53,7 @@ const generatePreview = (name, exportSample, data) => {
   const jsRegex = new RegExp(`\\/\\/ data: ${name}([\\s\\S](?!};))*\n};`, 'm');
   const jsonRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`json([\\s\\S](?!\`\`\`))*`, 'm');
   const yamlRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`yaml([\\s\\S](?!\`\`\`))*`, 'm');
+  const tomlRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`toml([\\s\\S](?!\`\`\`))*`, 'm');
 
   // JS object
   if (jsRegex.test(readme)) {
@@ -73,9 +75,16 @@ ${JSON.stringify(data, null, 2)}`);
 \`\`\`yaml
 ${yaml.safeDump(data)}`);
   }
+  // TOML
+  if (tomlRegex.test(readme)) {
+    console.log(`preview ${name}: found TOML definition`);
+    readme = readme.replace(tomlRegex, `<!-- data: ${name} -->
+\`\`\`toml
+${toml.stringify(data)}`);
+  }
 
   if (exportSample)
-    fs.writeFileSync('docs/sample.yml', yaml.safeDump(data), {encoding: 'utf-8'});
+    fs.writeFileSync('docs/sample.toml', toml.stringify(data), {encoding: 'utf-8'});
   const svg = faDiagrams.compute(data);
   fs.writeFileSync(`preview/${name}.svg`, svg, {encoding: 'utf-8'});
   svg2img(svg, function(error, buffer) {

docs/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <title>fa-diagrams example</title>
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/js-yaml@3.13.1/dist/js-yaml.min.js"></script>
     <script src="github-cdn.js"></script>
+    <script src="toml-parser.js"></script>
     <style>
         * {
             padding: 0;
@@ -49,8 +49,10 @@
 <div id="right"></div>
 <script>
   $(document).ready(() => {
-    github('klemek/fa-diagrams').loadScripts('dist/fa-diagrams-data.min.js', 'dist/fa-diagrams.min.js').then(function () {
-      $.get('sample.yml', (data) => {
+
+    github('klemek/fa-diagrams').loadScripts('dist/fa-diagrams-data.min.js', 'dist/fa-diagrams.min.js').then(() => {
+
+      $.get('sample.toml', (data) => {
         $('#input').val(data).trigger('paste');
       });
 
@@ -67,13 +69,16 @@
                   data[key] = data[key].replace(/\\n/gm, '\n');
               });
             };
-            let data = jsyaml.load($('#input').val());
+            const parser = new TOMLParser();
+            parser.parse($('#input').val());
+            let data = parser.finish();
+            console.log(data);
             findLineBreaks(data);
             $('#right').html(faDiagrams.compute(data));
           } catch (err) {
             $('#right').html(`<h2>${err.toString().replace(/\n/gm, '<br>')}</h2>`);
+            console.error(err);
           }
-
         }, 500);
       });
     });

docs/sample.toml

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

docs/sample.yml

@@ -1,52 +0,0 @@
-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

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fa-diagrams",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -217,6 +217,12 @@
         "minimist": "^1.2.0"
       }
     },
+    "@iarna/toml": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.3.tgz",
+      "integrity": "sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==",
+      "dev": true
+    },
     "@jest/console": {
       "version": "24.7.1",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",

package.json

@@ -38,6 +38,7 @@
     ]
   },
   "devDependencies": {
+    "@iarna/toml": "^2.2.3",
     "browserify": "^16.3.0",
     "coveralls": "^3.0.4",
     "jest": "^24.8.0",