Mermaid support by Render Note

[snakewa]

Trilium is really awesome, endless note-taking searching, finally I think it is the end.

Especially for developers so we could easily extend by scripting.

With render note, basically, we could extend any note type by writing our renderer note to render the note in the way we want.

For example, currently, I don't see official support for a mermaid (https://mermaid-js.github.io/) but interesting I found Trilium already embed the mermaid library in the browser's context, which many people ask for it.

To 日chieve this, I start to think we could have a mermaid renderer note (HTML and js implementation) and I put the mermaid markup code to Render Note's text content. In the renderer note, we could use api.originEntity to fetch the mermaid markup and inject it into the renderer's HTML body.

And it is perfectly it works as I thought.

One thing is that I don't know how or it should be a feature request.

The problem now is if I want to update the diagram, I need to switch the note type between "Type: Plain Text" and "Type: Render Note".

I would like to have editor pane and rendered pane at the same time, (very similar to lots of markdown editor, one side is source code and another side is a preview) so It is totally useful the render note will update as I edit the content.

more detail about the template:

I create a template for Mermaid note basically it just set the default attribute " ~renderNote=mermaid renderer" for me:

In the renderer, HTML part just a #here DIV so we could inject the markup later

UPDATE: Turns out mermaid lib not included by default. Quick fix to include it by script tag here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.8.4/mermaid.min.js" integrity="sha512-as1BF4+iHZ3BVO6LLDQ7zrbvTXM+c/1iZ1qII/c3c4L8Rn5tHLpFUtpaEtBNS92f+xGsCzsD7b62XP3XYap6oA==" crossorigin="anonymous"></script>

<div id="here">--</div>

The script part, to use api.originEntity.getContent() to fetch the mermaid markup and put it into the #here DIV and run mermai API to render the DIV

[zadam]

Hi, nice work!

I would like to have editor pane and rendered pane at the same time, (very similar to lots of markdown editor, one side is source code and another side is a preview) so It is totally useful the render note will update as I edit the content.

I would recommend you to implement the rendering as a widget instead of "render note", that way you can have both editor and render part visible at the same time (at this point the pane can be only horizontally split though).

Check out "word count" widget from demo document which does most things you need:

And some docs: https://github.com/zadam/trilium/wiki/Custom-Widget

[snakewa]

Cool. I will look into it. Just need feedback as still learning the mechanism of Trilium.

[mfdez97]

I started using Trilium recently and I gotta say all the customization possibilities are great. I also wanted to use mermaid diagrams so I worked a bit on this and I think I got it working

I added this widget with mermaid.min.js as a child note, just have to use the label #mermaid on a code note to render the diagram.

mermaid.initialize({
    startOnLoad: false,
    theme: 'dark'
});

const widget = `<div style="padding: 10px; border-top: 1px solid var(--main-border-color); contain: none;">
    <div class="mermaid" />
</div`;

class MermaidWidget extends api.TabAwareWidget {
    get position() { return 100; } // higher value means position towards the bottom/right

    get parentWidget() { return 'center-pane'; }

    doRender() {
        this.$widget = $(widget);
        this.$mermaidDiv = this.$widget.find('.mermaid')[0];
        return this.$widget;
    }

    async refreshWithNote(note) {
        if (note.type !== 'code' || !note.hasLabel('mermaid')) { 
            this.toggleInt(false); // hide
            return;
        }

        this.toggleInt(true); // display

        const {content} = await note.getNoteComplement();
        const insertSvg = this.insertSvg.bind(this);
        mermaid.render("mermaid", content, insertSvg);
    }

    insertSvg(svgCode) {
        this.$mermaidDiv.innerHTML = svgCode;
    }

    async entitiesReloadedEvent({loadResults}) {
        if (loadResults.isNoteContentReloaded(this.noteId)) {
            this.refresh();
        }
    }
}

module.exports = new MermaidWidget();

EDIT: I have exported it if anyone wants to use it mermaid-widget.zip

[atoktoto]

I imported the zip, created a new note with #mermaid attribute and code:plain text type but the widget did not show up. How I can debug this?

Edit: found the issue: the mermaid-widget note has a #disabled:widget attr that needs to be changed to #widget

[zadam]

That's a security feature during import to avoid random 3rd party code getting executed after import. You can uncheck "Safe import" to disable this:

[atoktoto]

I find that having both: rendering widget and rendering note seems to be a pretty good solution here. Widget can be used for preview and rendered note makes more sense in actual usage: it can be a child note and can be included.

The only issue is that when rendered note is included it seems to be sized incorrectly:

[snakewa]

One thing I encoutered is that it turned mermaid is not included in Trilium ( I though it was). I might accednetly included it by uploading the mermaid js file before. But after a while I got the error said mermaid is undefined alert. Then I cannot get it work again as I try to upload mermaid js as the subnote of the JS note. But it seems does not work. I try to follow the weight tracker example (which includes chartjs) But the mermiad wasn't loaded anymore. So finally I have to put the <script src="../> in the renderer nodte

[snakewa]

@zadam I just want to know a little more about the Render Node's mechanism. Does it include all sub Javascript Code Nodes or File node ( file type is js)? Is it possible to refer to a file resource such as an image or CSS file in the sub notes?

[zadam]

Then I cannot get it work again as I try to upload mermaid js as the subnote of the JS note. But it seems does not work. I try to follow the weight tracker example (which includes chartjs) But the mermiad wasn't loaded anymore. So finally I have to put the <script src="../> in the renderer nodte

This depends on how the library loads itself. Often they have sort of preloader which checks in which environment they are used - e.g. they try to detect AMD loader, if not found, they will publish themselves globally through window.XXX.

Trilium JS notes implement CommonJS module standard and this might confuse some libraries. Or perhaps they support CommonJS and then they are not accessible globally and you need to load them in CommonJS way - this is not well documented but seen e.g. in "Statistics" demo content - see how renderPieChart function is published via module.exports and then used in parent note by name of the child note.

Does it include all sub Javascript Code Nodes or File node ( file type is js)?

Yes, all JS (file or code) notes will be included.

Is it possible to refer to a file resource such as an image or CSS file in the sub notes?

Yes. One way is to "publish" the file/css/image note as "custom resource". See https://github.com/zadam/trilium/wiki/Custom-request-handler and also "Stell Blue" theme from demo document which loads custom fonts like this:

@font-face { /* This will be used as main UI font (see below) */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('custom/fonts/raleway.woff2') format('woff2');
}

[kangaroolab]

One thing I encoutered is that it turned mermaid is not included in Trilium ( I though it was). I might accednetly included it by uploading the mermaid js file before. But after a while I got the error said mermaid is undefined alert. Then I cannot get it work again as I try to upload mermaid js as the subnote of the JS note. But it seems does not work. I try to follow the weight tracker example (which includes chartjs) But the mermiad wasn't loaded anymore. So finally I have to put the <script src="../> in the renderer nodte

can you share the detail how to put <script src=> in render note? it doesn't seem take any content itself. did you mean put it in html note underneath it? I tried but it didn't seem processing script tag...any hint?