This is a plugin for JSDoc, that by using the inheritance-diagram library, will include the inheritance diagram of classes into the documentation.
Thanks to SVG this diagram is interactive. It is visually easier to understand the hierarchy of a class and by one click jump to other class documentation from this diagram.
npm install jsdoc-inheritance-diagram --save-dev- Add
"node_modules/jsdoc-inheritance-diagram"to thepluginsin JSDoc config file - (opt.) Add customization configuration
- Run
jsdoc -c your-jsdoc-config.json
Please be aware about the limitations of inheritance-diagram. Because of them some configuration are needed to make the output nice (see below).
css - (optional) string of the styles for the diagram. Initial styles can be found in the API doc to inheritance-diagram. Alternatively, you can create your own CSS-file and include it into the configuration of static resources. For more details visit JSDoc documentation
node and line - (optional) object of configurations that can be tuned to change some physic properties of a diagram, like the width or height of a node. The full list of available properties, which can be tuned can be found in the API doc to inheritance-diagram
externalLinks - (optional) defines the links to the external documentation of the classes. For that classes new documentations will be automatically generated inside the project to show the inheritance diagram for them.
Because this plugin is just a wrapper over inheritance-diagram module, this means that the configuration for this plugin is the same. So you can visit that module to find more details.
Example of enabling and configuration:
{
"plugins":["node_modules/jsdoc-inheritance-diagram"],
"opts": {
"inheritance-diagram": {
"externalLinks": {
"SuperRoot": "https://super/root/url",
"ExtClass": "http://link.to/external/class/documentation.html"
},
"css": ".parent rect {fill: lightgray;}",
"node": {
"dimensions": {
"width": 80
}
}
}
}
}