- Contents in this wiki are for entertainment purposes only
MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
XenoEngineer (talk | contribs) (Created page with "→Any JavaScript here will be loaded for all users on every page load.: // Load Mermaid.js from CDN mw.loader.load('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js', null, true); // Initialize Mermaid after the page content is loaded mw.hook('wikipage.content').add(function() { // Check if mermaid is defined before attempting to initialize if (typeof mermaid !== 'undefined') { mermaid.initialize({ startOnLoad: true }); } else { /...") |
XenoEngineer (talk | contribs) mNo edit summary |
||
| Line 19: | Line 19: | ||
} | } | ||
}); | }); | ||
// Usage on Wiki Pages: On any wiki page, simply add your Mermaid definition | |||
// inside a standard HTML <div> tag with the class mermaid: | |||
// == My Custom Flowchart == | |||
// <div class="mermaid"> | |||
// graph TD; | |||
// SubGraphA[Subgraph A] | |||
// A --> B; | |||
// end | |||
// SubGraphB[Subgraph B] | |||
// C --> D; | |||
// end | |||
// B --> C; | |||
// </div> | |||
Latest revision as of 15:01, 14 October 2025
/* Any JavaScript here will be loaded for all users on every page load. */
// Load Mermaid.js from CDN
mw.loader.load('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js', null, true);
// Initialize Mermaid after the page content is loaded
mw.hook('wikipage.content').add(function() {
// Check if mermaid is defined before attempting to initialize
if (typeof mermaid !== 'undefined') {
mermaid.initialize({ startOnLoad: true });
} else {
// Fallback for slower loads or specific scenarios
// (Optional: You might remove this if the above is reliable)
setTimeout(function() {
if (typeof mermaid !== 'undefined') {
mermaid.initialize({ startOnLoad: true });
}
}, 500); // Wait 0.5 seconds and try again
}
});
// Usage on Wiki Pages: On any wiki page, simply add your Mermaid definition
// inside a standard HTML <div> tag with the class mermaid:
// == My Custom Flowchart ==
// <div class="mermaid">
// graph TD;
// SubGraphA[Subgraph A]
// A --> B;
// end
// SubGraphB[Subgraph B]
// C --> D;
// end
// B --> C;
// </div>