Klemek
(WIP) fa-diagrams
SVG diagrams built from Font-Awesome icons
Install
Static scripts
Get the scripts from this repository dist folder
<script src="fa-diagrams-data.min.js"></script>
<script src="fa-diagrams.min.js"></script>
CDN (soon)
<script src="https://cdn.jsdelivr.net/npm/fa-diagrams@latest/dist/fa-diagrams-data.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fa-diagrams@latest/dist/fa-diagrams.min.js"></script>
or
<script src="https://unpkg.com/fa-diagrams/dist/fa-diagrams-data.min.js"></script>
<script src="https://unpkg.com/fa-diagrams/dist/fa-diagrams.min.js"></script>
NPM (soon)
npm install fa-diagrams
Build from sources
You will need subversion installed (used for precise folder fetching in GitHub)
git clone https://github.com/klemek/fa-diagrams.git
cd fa-diagrams
npm install
node build.sh
Usage
Node module
const faDiagrams = require('fa-diagrams');
const data = {
options: {
font: 'Courier New'
},
nodes: [
{
name: 'node1',
icon: 'server',
bottom: {text: 'myserver' },
top: {icon: 'node'}
},
{
name: 'node2',
icon: 'globe',
bottom: {text: 'world'}
}
],
links: [
{
type: 'arrow',
from: 'node1',
to: 'node2',
bottom: {text: 'Hello World!'}
}
]
};
const svg = faDiagrams.compute(data); // string containing xml data
Will produce the following diagram :
Html script
<head>
...
<script src="fa-diagrams-data.min.js"></script>
<script src="fa-diagrams.min.js"></script>
...
</head>
<body>
...
<script>
...
const svg = faDiagrams.compute(data); // string containing xml data
...
</script>
...
</body>
</html>