`jsdoc-inheritance-diagram`

This is a plugin for JSDoc, that is 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.

Install

npm install jsdoc-inheritance-diagram --save-dev
Add "node_modules/jsdoc-inheritance-diagram" to the plugins in JSDoc config file
(opt.) Add customization configuration
Run jsdoc -c your-jsdoc-config.json

Please be aware about limitations of inheritance-diagram.

Configuration

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.

node - allows to set own paddings and margins for a node.

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.

It is recommended to explicitly specify the text font in css in order to match the rectangle dimentions, when a diagram is displayed on the page.

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

Example of a configuration:

{
    "plugins":["node_modules/jsdoc-inheritance-diagram"],
    "inheritance-diagram": {
        "externalLinks": {
            "SuperRoot": "https://super/root/url",
            "ExtClass": "http://link.to/external/class/documentation.html"
        },
        "node": {
            "margin": [30, 10],
            "padding": [10, 5]
        },
        "css": "text {font-family: 'Open Sans', sans-serif;} .noi rect {stroke-width: 4;} .noi text {font-weight: bold;}"
    }
}

Live example of the generated documentation