diff --git a/README.md b/README.md index e175442..21175a3 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,7 @@ const svg = faDiagrams.compute(data); // string containing xml data Will produce the following diagram: -![sample](sample.png) +![sample](preview/sample.png) ### Html script @@ -155,20 +155,20 @@ Will produce the following diagram: ### `options` -| Key (`/subkey`) | Default value | Info | +| Key (`.subkey`) | Default value | Info | | --- | --- | --- | -| `placing/max-link-length` | 3 | maximum stretching of links between nodes | -| `placing/diagonals` | `true` | allow diagonal links to be made | -| `rendering/beautify` | `false` | output a readable SVG file | -| `rendering/scale` | 128 | (in pixels) final icons size | -| `rendering/color` | `black` | color of all elements | -| `rendering/h-spacing` | 1.3 | how width is stretched comparing to height | -| `rendering/icons/scale` | 1 | default scaling of icons (might be redefined in node definition) | -| `rendering/links/scale` | 1 | default scaling of links (might be redefined in link definition) | -| `rendering/links/size` | 0 | forced size/length of the links (0 means it will be computed from the distance between the nodes) (might be redefined in link definition) | -| `rendering/texts/font` | `'Arial'` | font family of the texts (might be redefined in sub-elements definition) | -| `rendering/texts/font-size` | 20 | font size of the texts (might be redefined in sub-elements definition) | -| `rendering/texts/font-style` | `'normal'` | font style of the texts (see [Font styles](#font-styles)) (might be redefined in sub-elements definition) | +| `placing.max-link-length` | 3 | maximum stretching of links between nodes | +| `placing.diagonals` | `true` | allow diagonal links to be made | +| `rendering.beautify` | `false` | output a readable SVG file | +| `rendering.scale` | 128 | (in pixels) final icons size | +| `rendering.color` | `black` | color of all elements | +| `rendering.h-spacing` | 1.3 | how width is stretched comparing to height | +| `rendering.icons.scale` | 1 | default scaling of icons (might be redefined in node definition) | +| `rendering.links.scale` | 1 | default scaling of links (might be redefined in link definition) | +| `rendering.links.size` | 0 | forced size/length of the links (0 means it will be computed from the distance between the nodes) (might be redefined in link definition) | +| `rendering.texts.font` | `'sans-serif'` | font family of the texts (might be redefined in sub-elements definition) | +| `rendering.texts.font-size` | 20 | font size of the texts (might be redefined in sub-elements definition) | +| `rendering.texts.font-style` | `'normal'` | font style of the texts (see [Font styles](#font-styles)) (might be redefined in sub-elements definition) | ### `nodes` @@ -218,7 +218,7 @@ You can **just enter a string** to be considered a text but you can define a tex You can define a relative icon with the following: -| Key (`/subkey`) | Type | Required | Info | +| Key | Type | Required | Info | | --- | --- | --- | --- | | **`icon`** | string | **yes** | name of the Font-Awesome icon of the sub-element (see [Icon names](#icon-names)) | | `color` | string | no | redefined the color | @@ -228,16 +228,52 @@ You can define a relative icon with the following: ### Icon names -(soon) +**Icons are fetched from [Font-Awesome free icons](https://fontawesome.com/icons?d=gallery&m=free).** +When you reference an icon, for example `circle`, it's searched in the `solid` folder then `regular` then `brands`. +If, in this case you want the hollow circle from the regular style, just enter `regular circle` or `circle regular` instead. +It's very flexible as you can copy-paste from an HTML page `far fa-circle` and it will also works. ### Link types +Here are the accepted types and their preview : + +* **default**: + +![default](preview/link-default.svg) + +* **double**: + +![default](preview/link-double.svg) + +* **line**: + +![default](preview/link-line.svg) + +* **dashed**: + +(soon) + +* **dashed-line**: + +(soon) + +* **split-double**: + (soon) ### Font styles -(soon) +First, you should use [web-safe fonts](https://websitesetup.org/web-safe-fonts-html-css/) to be sure your SVG will be rendered correctly + +Here are the available styles : + +* `normal` +* **`bold`** +* *`italic`* +* __`underlined`__ +* ~~`striked`~~ ## Examples *[back to top](#top)* + (soon) \ No newline at end of file diff --git a/build-preview.js b/build-preview.js new file mode 100644 index 0000000..c093082 --- /dev/null +++ b/build-preview.js @@ -0,0 +1,23 @@ +const fs = require('fs'); + +const rendering = require('./src/rendering')({ + 'beautify': false, + 'scale': 0.05, + 'h-spacing': 1, +}); + +['default', 'double', 'line'].forEach(type => { + fs.writeFileSync(`preview/link-${type}.svg`, rendering.toXML({ + 'g': { + '_attributes': { + 'transform': 'translate(0 -128)' + }, + 'path': { + '_attributes': { + 'd': rendering.getLinkPath(type, 2) + } + } + } + }, {w: 1024, h: 256}), {encoding: 'utf-8'}); +}); + diff --git a/preview/link-default.svg b/preview/link-default.svg new file mode 100644 index 0000000..1ab042f --- /dev/null +++ b/preview/link-default.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/preview/link-double.svg b/preview/link-double.svg new file mode 100644 index 0000000..d68426d --- /dev/null +++ b/preview/link-double.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/preview/link-line.svg b/preview/link-line.svg new file mode 100644 index 0000000..fab92c5 --- /dev/null +++ b/preview/link-line.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/sample.png b/preview/sample.png similarity index 100% rename from sample.png rename to preview/sample.png diff --git a/src/rendering.js b/src/rendering.js index c0e342e..34680fd 100644 --- a/src/rendering.js +++ b/src/rendering.js @@ -33,7 +33,7 @@ const DEFAULT_OPTIONS = { 'scale': 1, 'size': 0 }, - 'font': 'Arial' // https://websitesetup.org/web-safe-fonts-html-css/ + 'font': 'sans-serif' }; const DEFAULT_SCALE = 0.4;