klemek/fa-diagrams
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[skip CI] updated README.md

Browse Source
This commit is contained in:
Klemek
2019-07-18 10:58:10 +02:00
parent 141ee04151
commit e751f224f7
4 changed files with 315 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+179 -33
View File
@@ -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:
</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
+86 -29
View File
@@ -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
+49 -13
View File
@@ -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
preview/example2.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB