Laggy "Mermaid Diagram" note type refresh during editing #171

New Issue

giteasync · 2025-10-01T15:48:23-05:00

giteasync commented

2025-10-01 15:48:23 -05:00

Originally created by @questamor on GitHub.

Description

Hi, thank you for maintaining this great app!

I often use "Mermaid Diagram" note type to sketch out software designs. However, even with moderately sized diagrams (e.g., a 59-line Mermaid ERD), the preview starts to lag significantly on each update as the code changes.

Would it be possible to either increase the debounce time or provide an option to manually trigger rendering (e.g., via a "Render" button)? This would greatly enhance the editing experience for larger diagrams.

Thanks again!

TriliumNext Version

0.97.0

What operating system are you using?

Windows

What is your setup?

Local + server sync

Operating System Version

Windows 11 24H2 26100.4652

Error logs

No response

Originally created by @questamor on GitHub. ### Description Hi, thank you for maintaining this great app! I often use "Mermaid Diagram" note type to sketch out software designs. However, even with moderately sized diagrams (e.g., a 59-line Mermaid ERD), the preview starts to lag significantly on each update as the code changes. Would it be possible to either increase the debounce time or provide an option to manually trigger rendering (e.g., via a "Render" button)? This would greatly enhance the editing experience for larger diagrams. Thanks again! ### TriliumNext Version 0.97.0 ### What operating system are you using? Windows ### What is your setup? Local + server sync ### Operating System Version Windows 11 24H2 26100.4652 ### Error logs _No response_

giteasync added the

mermaid diagrams

label 2025-10-01 15:48:23 -05:00

giteasync closed this issue

2025-10-01 15:48:24 -05:00

giteasync commented

2025-10-01 15:48:24 -05:00

@questamor commented on GitHub:

@eliandoran

As an example, I can provide a publicly available snippet of similar size and complexity that I found. When editing the code, noticeable freezes occur due to frequent re-rendering.

erDiagram
    PRODUCT ||--o{ SUPPLY : includes
    PRODUCT {
        int productID PK
        string productName
        string category
        float price
        int quantityInStock
    }

    SUPPLIER ||--o{ SUPPLY : supplies
    SUPPLIER ||--o{ CONTACT : includes
    SUPPLIER {
        int supplierID PK
        string name
        string contactName
        string phone
        string email
        string address
    }

    SUPPLY ||--o{ SHIPMENT : "delivered in"
    SUPPLY ||--o{ STOCK : "fulfills"
    SUPPLY {
        int supplyID PK
        int supplierID FK
        int productID FK
        date supplyDate
        int quantity
    }

    SHIPMENT ||--o{ ORDER : fulfills
    SHIPMENT {
        int shipmentID PK
        int supplyID FK
        date shipmentDate
        string status "e.g., in transit, delivered"
    }

    ORDER ||--o{ ORDER-LINE : "consists of"
    ORDER {
        int orderID PK
        date orderDate
        string status "e.g., pending, shipped, delivered"
        int customerID FK
    }

    ORDER-LINE {
        int orderLineID PK
        int orderID FK
        int productID FK
        int quantity
        float price
    }

    CUSTOMER {
        int customerID PK
        string firstName
        string lastName
        string phone
        string email
        string address
    }

    CONTACT {
        int contactID PK
        int supplierID FK
        string contactName
        string phone
        string email
    }

    WAREHOUSE ||--o{ STOCK : stores
    WAREHOUSE {
        int warehouseID PK
        string warehouseName
        string location
    }

    STOCK {
        int stockID PK
        int warehouseID FK
        int productID FK
        int quantity
    }

@questamor commented on GitHub: @eliandoran As an example, I can provide a publicly available snippet of similar size and complexity that I found. When editing the code, noticeable freezes occur due to frequent re-rendering. ```mermaid erDiagram PRODUCT ||--o{ SUPPLY : includes PRODUCT { int productID PK string productName string category float price int quantityInStock } SUPPLIER ||--o{ SUPPLY : supplies SUPPLIER ||--o{ CONTACT : includes SUPPLIER { int supplierID PK string name string contactName string phone string email string address } SUPPLY ||--o{ SHIPMENT : "delivered in" SUPPLY ||--o{ STOCK : "fulfills" SUPPLY { int supplyID PK int supplierID FK int productID FK date supplyDate int quantity } SHIPMENT ||--o{ ORDER : fulfills SHIPMENT { int shipmentID PK int supplyID FK date shipmentDate string status "e.g., in transit, delivered" } ORDER ||--o{ ORDER-LINE : "consists of" ORDER { int orderID PK date orderDate string status "e.g., pending, shipped, delivered" int customerID FK } ORDER-LINE { int orderLineID PK int orderID FK int productID FK int quantity float price } CUSTOMER { int customerID PK string firstName string lastName string phone string email string address } CONTACT { int contactID PK int supplierID FK string contactName string phone string email } WAREHOUSE ||--o{ STOCK : stores WAREHOUSE { int warehouseID PK string warehouseName string location } STOCK { int stockID PK int warehouseID FK int productID FK int quantity } ```

giteasync commented

2025-10-01 15:48:24 -05:00

@eliandoran commented on GitHub:

@questamor , can you provide a sample big diagram that causes lag for you?

@eliandoran commented on GitHub: @questamor , can you provide a sample big diagram that causes lag for you?

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: TriliumNext/Trilium#171