text icon indicating copy to clipboard operation
text copied to clipboard
verified publisher icon nextcloud

Mermaid Block Diagram does not display

Open beccon4 opened this issue 3 months ago • 1 comments

Describe the bug Mermaid diagrams such as flowchart and graph work - but the block diagram doesn't To Reproduce

  1. Insert Mermaid diagram into text
  2. Enter a simple block diagram block columns 3 A["Hallo"] space B["Welt"] A-->B Expected behavior The diagram consisting of two blocks and an arrow in between displays

Screenshots empty gray area "Invalid mermaid source UnknownDiagramError: No diagram type detected matching given configuration for text: block"

Server details:

  • Nextcloud version: [e.g. 31.0.1]
  • The issue occurs in the Nextcloud demo server as well

Client details:

  • OS: Ubuntu 22/4
  • Browser: Firefox and Chrome browser
Logs

Browser log

Invalid mermaid source UnknownDiagramError: No diagram type detected matching given configuration for text: 
    ar chunk-YTJNT7DU.mjs:88
    as chunk-YTJNT7DU.mjs:103
    fromText mermaid.core.mjs:702
    Ig mermaid.core.mjs:1090
    Og mermaid.core.mjs:863
    n mermaid.core.mjs:1273
    n mermaid.core.mjs:1272
    Ng mermaid.core.mjs:1262
    hT mermaid.core.mjs:1287
    hT mermaid.core.mjs:1271
    renderMermaid CodeBlockView.vue:208
    g index.js:24
    c index.js:37
    setTimeout handler*R index.js:58
    handler CodeBlockView.vue:170
    VueJS 7
    oh index.js:216
    mount index.js:286
    qE index.js:5109
    CF index.js:253
    xn index.js:413
    l index.js:1350
    create index.js:1281
    addNode index.js:1930
    updateChildren index.js:1385
    gC index.js:2046
    updateChildren index.js:1364
    updateInner index.js:1460
    update index.js:1452
    updateStateInner index.js:5401
    updateState index.js:5352
    dispatchTransaction index.js:4705
    dispatch index.js:5719
    Ds index.js:702
    Ds index.js:661
    handleKeyDown index.js:788
    keydown index.js:3155
    someProp index.js:5508
    keydown index.js:3155
    n index.js:3077
EditorOutline-CKm1KV5O.chunk.mjs:128:18747
Uncaught (in promise) TypeError: this.supportPreview is not a function
    defaultMode CodeBlockView.vue:160
    VueJS 3
    renderMermaid CodeBlockView.vue:198
    g index.js:24
    c index.js:37
    setTimeout handler*R index.js:58
    handler CodeBlockView.vue:170
    VueJS 7
    oh index.js:216
    mount index.js:286
    qE index.js:5109
    CF index.js:253
    xn index.js:413
    l index.js:1350
    create index.js:1281
    addNode index.js:1930
    updateChildren index.js:1385
    gC index.js:2046
    updateChildren index.js:1364
    updateInner index.js:1460
    update index.js:1452
    updateStateInner index.js:5401
    updateState index.js:5352
    dispatchTransaction index.js:4705
    dispatch index.js:5719
    get commands/</< index.js:66
    updateContent MarkdownContentEditor.vue:158
    content MarkdownContentEditor.vue:99
    VueJS 12
    setContent editor.js:87
    updateEditorContent editorMixin.js:165
    c index.js:24
    d index.js:37
    setTimeout handler*u index.js:58
    onUpdate editorMixin.js:154
    onUpdate editor.js:55
    VueJS 2
    emit Editor.vue:790
    onUpdate Editor.vue:629
    emit index.js:159
    emit index.js:159
    dispatchTransaction index.js:4735
    dispatch index.js:5719
    Ds index.js:702
    Ds index.js:661
    handleKeyDown index.js:788
    keydown index.js:3155
    someProp index.js:5508
    keydown index.js:3155
    n index.js:3077
EditorOutline-CKm1KV5O.chunk.mjs:128:17646
Invalid mermaid source UnknownDiagramError: No diagram type detected matching given configuration for text: block
columns 3
A["Hallo"]
space
B["Welt"]
A-->B
    ar chunk-YTJNT7DU.mjs:88
    as chunk-YTJNT7DU.mjs:103
    fromText mermaid.core.mjs:702
    Ig mermaid.core.mjs:1090
    Og mermaid.core.mjs:863
    n mermaid.core.mjs:1273
    n mermaid.core.mjs:1272
    Ng mermaid.core.mjs:1262
    hT mermaid.core.mjs:1287
    hT mermaid.core.mjs:1271
    renderMermaid CodeBlockView.vue:208
    g index.js:24
    c index.js:37
    setTimeout handler*R index.js:58
    handler CodeBlockView.vue:170
    VueJS 11
    updateProps index.js:234
    updateProps index.js:233
    o index.js:342
    update index.js:370
    update index.js:1578
    updateNextNode index.js:1887
    updateChildren index.js:1382
    gC index.js:2046
    updateChildren index.js:1364
    updateInner index.js:1460
    update index.js:1452
    updateStateInner index.js:5401
    updateState index.js:5352
    dispatchTransaction index.js:4705
    dispatch index.js:5719
    Oo index.js:3646
    paste index.js:3666
    n index.js:3077
EditorOutline-CKm1KV5O.chunk.mjs:128:18747
Invalid mermaid source UnknownDiagramError: No diagram type detected matching given configuration for text: block
columns 3
A["Hallo"]
space
B["Welt"]
A-->B
    ar chunk-YTJNT7DU.mjs:88
    as chunk-YTJNT7DU.mjs:103
    fromText mermaid.core.mjs:702
    Ig mermaid.core.mjs:1090
    Og mermaid.core.mjs:863
    n mermaid.core.mjs:1273
    n mermaid.core.mjs:1272
    Ng mermaid.core.mjs:1262
    hT mermaid.core.mjs:1287
    hT mermaid.core.mjs:1271
    renderMermaid CodeBlockView.vue:208
    g index.js:24
    c index.js:37
    setTimeout handler*R index.js:58
    handler CodeBlockView.vue:170
    VueJS 12
    setContent editor.js:87
    updateEditorContent editorMixin.js:165
    c index.js:24
    d index.js:37
    setTimeout handler*u index.js:58
    onUpdate editorMixin.js:154
    onUpdate editor.js:55
    VueJS 2
    emit Editor.vue:790
    onUpdate Editor.vue:629
    emit index.js:159
    emit index.js:159
    dispatchTransaction index.js:4735
    dispatch index.js:5719
    Oo index.js:3646
    paste index.js:3666
    n index.js:3077
EditorOutline-CKm1KV5O.chunk.mjs:128:18747

beccon4 avatar Sep 16 '25 07:09 beccon4

@beccon4 thanks for your report. So far I didn't manage to reproduce this. I tested both on Nextcloud 31.0.9 and latest development branches.

Which Nextcloud version are you on when running into this bug? Best way it's already fixed in a newer release.

Also, can you describe exactly how you run into this bug? I did the following:

  1. Create new markdown text file
  2. In the editor, create a code block via toolbar
  3. In the code block three-dot menu, enter mermaid as language
  4. In the code block, paste your example block diagram code
  5. In the three-dot menu, select "both"
Image

mejo- avatar Sep 25 '25 10:09 mejo-

I'll close this issue due to lack of information. Please comment with the requested details if you still encounter the problem.

mejo- avatar Dec 16 '25 12:12 mejo-