This extension provides the #knowledgegraph parser function to visualize the knowledge graph in Semantic MediaWiki with vis-network.js

Includes a KnowledgeGraph Designer through which interactively create/export graphs.

• PHP 8.1 or later
• MediaWiki 1.39 or later
• SemanticMediaWiki 5.1.0 or later

Insert a parser function like

{{#knowledgegraph:
nodes=Page A, Page B
|properties=HasProperty1,HasProperty2
|depth=3
|graph-options=Mediawiki:KnowledgegraphGraphOptions
|property-options?HasProperty1=Mediawiki:KnowledgegraphNodeOptionsHasProperty1
|show-toolbar=false
|show-property-type=false
|width=100%
|height=400px
}}

nodes= and properties= are split on , by default. If your page titles or property names contain commas (e.g. legal citations, bibliographic entries), configure a different separator in LocalSettings.php:

$wgKnowledgeGraphListSeparator = ';';

Without properties=, only direct properties are loaded. To include inverse properties, list them with a - prefix, e.g. |properties=HasProperty1,-HasProperty1.

After a graph is built (and again after the Designer's "Reset graph"), the knowledgegraph.instance hook fires with the instance's vis-network handles. Handlers registered later still receive the last fire:

mw.hook( 'knowledgegraph.instance' ).add( ( instance ) => {
	// instance: { id, container, network, nodes, edges }
	console.log( instance.nodes.get(), instance.edges.get() );
} );

This extension uses the vis-network JavaScript library for rendering network diagrams. The version is managed via npm and bundled into the extension using a post-install script.

After running npm install, the following happens automatically:

1. Copying Files
   The copy-files-from-to tool copies the minified vis-network files from node_modules to the resources/visNetwork/ directory:

   • vis-network.min.js
   • vis-network.min.js.map

2. Injecting Comment
   A custom script (inject-nomin.js) prepends the line /*@nomin*/ to vis-network.min.js.
   This comment prevents MediaWiki's ResourceLoader from re-minifying the file.

1. Open package.json and change the version under "vis-network"
   (e.g., "vis-network": "latest" or a specific version like "9.1.9").

2. Run:

   npm install

tests/e2e contains Playwright tests that check the bundled vis-network library in a real browser: rendering, hover, the context menu, double-click, collapsing neighbors on click and the Designer (Add node dialog, wikitext export, Reset graph). They run in CI on the coverage leg, after the PHP and JavaScript tests, and are what makes a vis-network upgrade safe to merge. Run them locally against a test wiki on http://localhost:8080 (the port has to be published, e.g. with a build/docker-compose.override.yml, see build/docker-compose.override.yml.SAMPLE):

tests/e2e/seed-wiki.sh knowledgegraph-mysql-wiki-1   # creates the pages the tests use
cd tests/e2e
npm ci
npx playwright install chromium
npx playwright test

The checks of the committed vis-network bundle (npm run libs:check) and of the library API used by the extension (tests/node-qunit/ext.knowledgegraph.vis-contract.test.js) need no wiki.

https://github.com/OpenSemanticLab/mediawiki-extensions-InteractiveSemanticGraph