Add Example: GraphML Rendering Note / yED integration

[daemonnecis]

Describe feature

Since mermaid diagrams are flawed regarding flexibility, especially when designing network diagrams I'm relying on yED to document my networks. I totally understand and respect that triliums philosopy is to provide a knowledge management tool for the next decade or so, that is why an integration with a proprietary 3rd party tool like yED needs to be considered carefully.

That said I want to share a guide to setup a renderer for yEDs GraphML files using given features of trilium. I hope someone finds this usefull.

The renderer relies on an external module written by CyberPhoenix90. You work is highly appreciated!
You can find the project here: https://github.com/CyberPhoenix90/graphml-viewer

Additional Information

Implementation

To built the renderer youself, follow this guide:

Step 1: Create HTML code note

Name suggestion: HTML_GrapMLRenderer
Note type: Code - HTML
Content:

<script type="module" src="https://cyberphoenix90.github.io/graphml-viewer/prebuilt/esnext/graphml-viewer.js"></script>
<!-- credits go to CyberPhoenix90 -->
<!-- project page: https://github.com/CyberPhoenix90/graphml-viewer -->
<div id="GraphMLviewer" style='margin: auto; text-align: center;' ></div>

Step 2: Create a JS frontend code note

Name suggestion: JS_GrapMLRenderer
Note type: Code - JS frontend
Content:

// get FNote of current active note
const activeFNote = api.getActiveContextNote();
console.log('active note title: ' + activeFNote.title);
console.log('active noteId: ' + activeFNote.noteId);

// ---------------------------------------------------------

// get linked noteId (which contains grapML data)
const noteIdGraphML = activeFNote.getOwnedRelationValue("GraphML");

// generate graphML renderer html string
const graphmlviewerhtml = 
    '<graphml-viewer id="gmlviewer" src="api/notes/' + noteIdGraphML + '/download"></graphml-viewer>';
console.log('graphml-viewer html: ' + graphmlviewerhtml);

// put html string into <div>
document.getElementById("GraphMLviewer").innerHTML = graphmlviewerhtml;

// ---------------------------------------------------------

// resize renderer automatically
const gmlviewer = document.querySelector('#gmlviewer')

gmlviewer.onload = function(){
    const maxheight = document.querySelector('div.scrolling-container').clientHeight * 0.95
    console.log('max height: ' + maxheight);
    
    gmlviewer.shadowRoot.querySelector("style").innerHTML += '\n\nsvg {\n\t\theight: ' + maxheight + 'px;\n}';
};

This note needs to be nested under HTML_GrapMLRenderer

Step 3: Create a note template for convenience

Name suggestion: GraphML Renderer Template
Note type: Render Note
Owned attributes: ~renderNote=HTML_GrapMLRenderer #relation:GraphML=promoted,single #template

This is our template note. You can place it whereever you want.
Note that ~renderNote=HTML_GrapMLRenderer means you need to create a relation to the HTML note created in step 1.

Usage

To use this renderer, simply import your GrapML file into trilium. Then create a new note from the template created in step 3 (HowTo). At the top under "GraphML" select your file note which contains the imported GraphML file.

Last, but not least, refresh the note by pressing [F5] or by switching to another note and back.

I hope I don't violate any policies with this guide.
@zadam if you like this guide, feel free to use it at will, perhaps in the wiki or something.

[dosubot[bot]]

Hi @daemonnecis! I'm Dosu and I’m helping the Trilium team.

Your guide for integrating yED GraphML rendering into Trilium Notes using the CyberPhoenix90/graphml-viewer module is unique—there’s currently no official documentation, wiki entry, or prior example for this kind of integration in Trilium’s resources. Trilium does support extensibility via custom HTML and JS code notes, which your approach leverages well, but there are no explicit policies or guidelines about including third-party integrations or user-contributed guides in the official documentation. Your contribution could be valuable for others looking for more flexible network diagram options in Trilium source.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}