🧙‍♂️ Widzard

Think Madge mixed with Webpack and you've got the idea.

I got bored one day and decided I wanted to make a graph from my webpack builds output, this is that, enjoy!

$ npm i -d widzard

$ yarn add -d widzard

📈 Graphviz

Graphviz is currently required, though I'm hoping to change this via the use of Dagre.

.widzardrc

There are a number of settings that can be passed via the .rc file, here is the default object:

{
	"overwriteGraphType": true,
	"includeNpm": false,
	"noDependencyColor": "#FAD000",
	"cyclicNodeColor": "#EC3A37F5",
	"graphVizPath": false,
	"graphVisOptions": {
		"G": {
			"bgcolor": "#1E1E3F",
			"compound": true,
			"concentrate": true,
			"rankdir": "LR",
			"layout": "dot",
			"splines": "ortho",
			"outputorder": "nodefirst",
			"margin": 0.2
		},
		"E": {
			"color": "#9effff",
			"constraint": true,
			"decorate": false,
			"style": "dashed"
		},
		"N": {
			"fontname": "sans-serif",
			"fontsize": "14px",
			"color": "#9effff",
			"shape": "box",
			"style": "rounded",
			"height": 0,
			"fontcolor": "#9effff",
			"margin": 0.5
		},
		"type": "svg"
	}
}

Note all Graphvis options are subject to change if and when we move away from Graphvis, until that time any attribute can be passed to either the Graph, Edges or Nodes, a full reference of what attributes are available can be found here.

CLI

--help

• description: Show the help text.
• alias: -h
• default: false
• type: boolean

--clear

• description: Clear the console.
• alias: -c
• default: false
• type: boolean

--webpack

• description: The path to your webpack config file.
• alias: -w
• type: string

--stats

• description: For if you already have a stats.json.
• alias: -s
• type: string

--dir

• description: An output directory.
• alias: -d
• default: './'
• type: string

--name

• description: The filename for the outputted file.
• alias: -n
• default: 'widzard.svg'
• type: string

--target

• description: The target path relative to the webpack config.
• alias: -t
• default: './src/index.js'
• type: string

--cyclical

• description: Highlight cyclical dependencies.
• alias: -cyc
• default: true
• type: boolean

--defaultClustering

• description: Create clusters of modules by parent directory.
• alias: -DC
• default: false
• type: boolean

--nestedClustering

• description: Created hierarchical clusters of module directories.
• alias: -NC
• default: false
• type: boolean

🛠 Development

• npm i install all the things.
• npm i -g to install Widzard globally.
• widzard -h to make sure everything is set up correctly.