logseq-fenced-code-plus icon indicating copy to clipboard operation
logseq-fenced-code-plus copied to clipboard

Mermaid / Rendering issue on pages with multiple consecutive diagrams

Open arigit opened this issue 1 year ago • 0 comments

When using more than 1 diagram within a parent block, rendering issues happen when loading the page, where some of the diagrams are not loaded at all, and some of the diagrams are rendered in the same position in the page, one on top of another, it's weird.

For example, see the resulting screenshot when first loading a page with seven diagrams (seven copies of the same diagram):

image

This can be manually fixed (every time the page is loaded) by clicking on the first diagram 'bullet' to enter code editing mode, and existing, and repeating the same in all the mermaid bullets, which produces:

image

This happens with any mix of diagrams, flowcharts, sequence diagrams, generic graphs. It happens with all-trivial diagrams as well as mixes of complex and trivial ones.

graph TD
    subgraph titledBlock[Subscription Concealed Identified - SUCI]
        A(SUCI Type<br><br>Value 0-7)
        B(Home Network Identifier<br><br>Value depends on SUPI type)
        C(Routing Indicator<br><br>1-4 Digits)
        D(Protection Scheme<br><br>Value 0-15)
        E(Home Network Identity<br>Purblic Key ID<br>Value 0-255)
        F(Protection Scheme Output<br><br>Output depends on scheme used)
    end
    style titledBlock color:red
    style E fill:sienna
    style F fill:sienna

I notice it happens not only with consecutive 'mermaid' blocks but also in long form pages which have multiple diagrams sprinkled all over. Some diagrams load when the page displays, some remain hidden, some are rendered overlapping others, it's weird.

Using the latest logseq and plugin version as of 2023/08/07

arigit avatar Aug 07 '23 19:08 arigit