Network

Minimal example:

{{#network:}}

Example with parameters:

{{#network:Page1 | Page2 | Page3
 | class = col-lg-3 mt-0
 | exclude = Main Page ; Sitemap
}}

Parameters

There is also an includable special page, Special:Network, that can be used to construct graphs interactively. The special page presents a form that can be filled in with the same parameters listed above and submitted to render a graph. The special page can also be included in other pages for the same results as the parser function with the following modifications: the pages must be provided in a single pages parameter, and all values for the pages and exclude parameters must be separated by newlines. For example:

{{Special:Network
 | pages = Page1
 Page2
 Page3
 | class = col-lg-3 mt-0
 | exclude = Main Page Sitemap
}}

Layout CSS

The network graphs are located in a div with class network-visualization. The default css for this class is:

.network-visualization {
    width: 100%;
    height: 600px;
}

You can add extra CSS in MediaWiki:Common.css. You can also add extra classes to the div via the class parameter.

Node Icons

By default, nodes are represented by OOUI icons. This is specified in the node or group options as (excerpted from the full options):

"nodes": {
    "shape": "image"
},
"groups": {
    "bluelink": {
        "image": "resources/lib/ooui/themes/wikimediaui/images/icons/article-rtl-progressive.svg"
    },
    "redlink": {
        "image": "resources/lib/ooui/themes/wikimediaui/images/icons/articleNotFound-ltr.svg"
    },
    "externallink": {
        "image": "resources/lib/ooui/themes/wikimediaui/images/icons/linkExternal-ltr-progressive.svg"
    }
}

If version 5.1 or later of the Title Icon extension is installed and a page rendered in the graph has at least one title icon defined, one of those title icons will be used for that node's icon. If there are multiple title icons defined for the page, one will be selected in the order in which they were parsed on the page.

Examples

Options parameter

Array of vis.js options

{{#network:Page1 | Page2 | Page3
 | options=
{
    "autoResize": true,
    "nodes": {
        "color": "lightblue",
        "shape": "box",
        "borderWidth": 3,
        "font": { "color": "red", "size": 17 }
    }
}
}}

Wrong: "font.color": "red"

Right: "font": { "color": "red" }

Also right: "font": "14 px arial red"

Using templates

{{#network: {{NetworkPages}}
 | class = col-lg-3 mt-0
 | options= {{NetworkOptions}}
}}

Where NetworkPages contains Page1 | Page2 | Page3 and NetworkOptions contains { "nodes": { "shape": "box" } }