https://github.com/sun0day/svg-sketchy
A Node.js CLI to sketch svg.
https://github.com/sun0day/svg-sketchy
mermaidjs nodejs-cli roughjs svg vizjs
Last synced: 3 months ago
JSON representation
A Node.js CLI to sketch svg.
- Host: GitHub
- URL: https://github.com/sun0day/svg-sketchy
- Owner: sun0day
- License: mit
- Created: 2024-03-13T09:24:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-02-25T16:49:40.000Z (4 months ago)
- Last Synced: 2026-02-25T20:06:52.131Z (4 months ago)
- Topics: mermaidjs, nodejs-cli, roughjs, svg, vizjs
- Language: TypeScript
- Homepage: https://sun0day.github.io/svg-sketchy/
- Size: 2.74 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A Node.js CLI to sketch svg.
## Features
- :pencil2: Converting svgs to [hand-drawn](https://roughjs.com/) style.
- :four_leaf_clover: Compatible with [.dot](https://graphviz.org/doc/info/lang.html) and [.mmd](https://mermaid.js.org/ecosystem/integrations-create.html#file-extension) formats.
:point_right: Try it [online](https://sun0day.github.io/svg-sketchy)
## Install
```shell
$ npm i -g svg-sketchy
```
## Usage
### Used as CLI
#### sketch `.svg`
```shell
$ sket hello_world.svg # sketch single svg and override it
$ sket hello_world.svg -r /home # sketch svg in another directory
$ sket hello_*.svg # sketch multiple svgs which paths start with "hello_" and override them
$ sket world.svg -o /home/hello_[name].svg # sketch svg and output it to a new directory with a new name "hello_world.svg"
```
#### sketch `.dot` & `.mmd`
Sketching `.dot` & `.mmd` files is not much different than sketching `.svg`. Suppose we have two files named `hello_world.dot` and `hello_world.mmd`, after sketching, the outputs would look like:
||`hello_world.dot`|`hello_world.mmd`|
|----|:-----:|:-----:|
|dsl|`digraph G {Hello->World}`| `graph TB\nhello-->world`
|cmd|`sket hello_world.dot` | `sket hello_world.mmd`
|outputs without sketching||
| | |
|outputs after sketching||
#### customize sketch style
Try it [online](https://sun0day.github.io/svg-sketchy) to see how different sketch configs affect the final svg output.
#### CLI options
|option|default|description|
|----|----|----|
-r, --root | cwd |Svg files root directory, ignored when [svg_files] is absolute.
-o, --output |"{cwd}/[name].svg"| Svg files output directory and filename, use **"[name]"** to keep the original svg filename.
-f, --font |"Comic Sans MS, cursive"| Font with which text elements should be drawn, setting to **"null"** will use the text element's original font family.
--rough |-| Rough.js config, see [roughjs options](https://github.com/rough-stuff/rough/wiki#options). e.g: "roughness=0.5,bowing=5".
--no-rand |false| Whether to disable randomize Rough.js' **fillWeight**, **hachureAngle** and **hachureGap**.
--no-fill |false|Whether to disable sketch pattern **fills/strokes** or just copy them to the output.
--pencil |false|Whether to apply a **pencil effect** on the SVG rendering.
### Used as API
You can also use `svg-sketchy` in Node.js env.
```js
import { SVGSketcher } from 'svg-sketchy'
// create a SVGSketcher instance
const sketcher = new SVGSketcher({
target: 'world.svg',
root: './', // <--> -r, --root
output: '/home/hello_[name].svg', // <--> -o, --output
fontFamily: 'arial', // <--> -f, --font
roughConfig: { // <--> --rough
roughness: 0.5,
bowing: 5
},
randomize: false, // <--> --no-rand
sketchPatterns: false, // <--> --no-fill
pencilFilter: true, // <--> --pencil
})
// transforming
await sketcher.run()
```