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

preview rendered

Browse Source
This commit is contained in:
Klemek
2019-07-15 15:52:36 +02:00
parent b61ddf744a
commit 07a45e9888
6 changed files with 117 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+25 -23
View File
@@ -92,29 +92,31 @@ node build.sh
const faDiagrams = require('fa-diagrams'); const faDiagrams = require('fa-diagrams');
const data = { const data = {
options: { options: {
font: 'Courier New' rendering:{
icons:{
color:'#4E342E'
}
}
},
nodes: [
{
name: 'node1',
icon: 'server',
}, },
nodes: [ {
{ name: 'node2',
name: 'node1', icon: 'globe',
icon: 'server', color:'#455A64',
bottom: {text: 'myserver' }, }
top: {icon: 'node'} ],
}, links: [
{ {
name: 'node2', from: 'node1',
icon: 'globe', to: 'node2',
bottom: {text: 'world'} color:'#333333',
} }
], ]
links: [
{
from: 'node1',
to: 'node2',
bottom: {text: 'Hello World!'}
}
]
}; };
const svg = faDiagrams.compute(data); // string containing xml data const svg = faDiagrams.compute(data); // string containing xml data
@@ -132,7 +134,7 @@ svg2img(svg, function(error, buffer) {
Will produce the following diagram: Will produce the following diagram:
![sample](preview/sample.png) ![sample](preview/sample.svg)
### Html script ### Html script
build_preview.js
+33 -1
View File
@@ -33,4 +33,36 @@ const g = [];
}); });
}); });
fs.writeFileSync(`preview/links.svg`, rendering.toXML({'g': g}, {w: 1536 * 2, h: 4 * 712 + 100}), {encoding: 'utf-8'}); fs.writeFileSync(`preview/links.svg`, rendering.toXML({'g': g}, {w: 1536 * 2, h: 4 * 712 + 100}), {encoding: 'utf-8'});
const faDiagrams = require('./src/index');
const data = {
options: {
rendering: {
icons: {
color: '#4E342E'
}
}
},
nodes: [
{
name: 'node1',
icon: 'server',
},
{
name: 'node2',
icon: 'globe',
color: '#455A64',
}
],
links: [
{
from: 'node1',
to: 'node2',
color: '#333333',
}
]
};
fs.writeFileSync('preview/sample.svg', faDiagrams.compute(data), {encoding: 'utf-8'});
preview/links.svg
+50 -49
View File
@@ -1,50 +1,51 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5" stroke="black"
<g> fill="black">
<g transform="translate(256 150)"> <g>
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h877.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/> <g transform="translate(256 150)">
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">default</text> <path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h877.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
</g> <text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">default</text>
</g> </g>
<g> </g>
<g transform="translate(1792 150)"> <g>
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h1000c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/> <g transform="translate(1792 150)">
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">line</text> <path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h1000c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
</g> <text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">line</text>
</g> </g>
<g> </g>
<g transform="translate(256 862)"> <g>
<path d="M134.059 216v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059h755.94v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/> <g transform="translate(256 862)">
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">double</text> <path d="M134.059 216v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059h755.94v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
</g> <text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">double</text>
</g> </g>
<g> </g>
<g transform="translate(1792 862)"> <g>
<path d="M12 126c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h877.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059M134.059 306v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059h877.941c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/> <g transform="translate(1792 862)">
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">split-double</text> <path d="M12 126c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h877.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059M134.059 306v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059h877.941c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
</g> <text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">split-double</text>
</g> </g>
<g> </g>
<g transform="translate(256 1574)"> <g>
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/> <g transform="translate(256 1574)">
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed</text> <path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
</g> <text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed</text>
</g> </g>
<g> </g>
<g transform="translate(1792 1574)"> <g>
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/> <g transform="translate(1792 1574)">
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-line</text> <path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
</g> <text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-line</text>
</g> </g>
<g> </g>
<g transform="translate(256 2286)"> <g>
<path d="M134.059 216v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059m101.5764-80c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/> <g transform="translate(256 2286)">
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-double</text> <path d="M134.059 216v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059m101.5764-80c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
</g> <text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-double</text>
</g> </g>
<g> </g>
<g transform="translate(1792 2286)"> <g>
<path d="M12 126c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059M134.059 306v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059m117.18820000000001 -80c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/> <g transform="translate(1792 2286)">
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-split-double</text> <path d="M12 126c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059M134.059 306v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059m117.18820000000001 -80c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
</g> <text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-split-double</text>
</g> </g>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

src/rendering.js
+1
View File
@@ -24,6 +24,7 @@ try {
*/ */
const SUB_DEF = { const SUB_DEF = {
'_': 'string',
'text': 'string', 'text': 'string',
'icon': 'string', 'icon': 'string',
'color': 'string', 'color': 'string',
src/utils.js
+2 -2
View File
@@ -28,7 +28,7 @@ const self = {
* @returns {null|string} * @returns {null|string}
*/ */
isValid: (obj, def) => { isValid: (obj, def) => {
const keys = Object.keys(def); const keys = Object.keys(def).filter(k => k !== '_');
let key; let key;
let type; let type;
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
@@ -37,7 +37,7 @@ const self = {
if (type === 'object' && obj[key].length > 0) if (type === 'object' && obj[key].length > 0)
type = 'array'; type = 'array';
if (typeof def[key] === 'object') { if (typeof def[key] === 'object') {
if (type && type !== 'object') if (type && type !== 'object' && type !== def[key]['_'])
return key; return key;
const res = self.isValid(type ? obj[key] : undefined, def[key]); const res = self.isValid(type ? obj[key] : undefined, def[key]);
if (res) if (res)
test/utils.test.js
+6
View File
@@ -71,6 +71,12 @@ describe('isValid', () => {
test('invalid sub-object', () => { test('invalid sub-object', () => {
expect(utils.isValid({a: 5}, {a: {b: 'number'}})).toBe('a'); expect(utils.isValid({a: 5}, {a: {b: 'number'}})).toBe('a');
}); });
test('valid alternative sub-object', () => {
expect(utils.isValid({a: 5}, {a: {b: 'number', '_': 'number'}})).toBe(null);
});
test('invalid alternative sub-object', () => {
expect(utils.isValid({a: 'hello'}, {a: {b: 'number', '_': 'number'}})).toBe('a');
});
test('undefined not required sub-object', () => { test('undefined not required sub-object', () => {
expect(utils.isValid({}, {a: {b: 'number'}})).toBe(null); expect(utils.isValid({}, {a: {b: 'number'}})).toBe(null);
}); });