Mermaid Gantt doesn't render

[selfire1]

What happened?

Hi! I want to render mermaid charts through dataviewjs.

Rendering a flowchart like so works as expected:

var chart = `
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
`

dv.paragraph(
`\`\`\`mermaid${chart}\`\`\``
)

However, when I apply the same logic to a gantt chart, an empy div is displayed. This error is returned:

TypeError: Cannot read property 'firstChild' of null
    at Object.render (mermaid.min.js:27)
    at a (app.js:1)
    at app.js:1
    at Object.then (app.js:1)
    at app.js:1
    at Function.<anonymous> (app.js:1)
    at app.js:1
    at Object.next (app.js:1)
    at app.js:1
    at new Promise (<anonymous>)

Are you able to help me out here? The same happens with pie charts as well, by the way.

DQL

No response

JS

var chart = `
gantt
dateFormat  YYYY-MM-DD
title Testing GANT

section A section
Completed task: done, des1, 2014-01-06, 2014-01-08
Active task: active, des2, 2014-01-09, 3d
Future task: des3, after des2, 5d
Future task2: des4, after des3, 5d
`

dv.paragraph(
`\`\`\`mermaid${chart}\`\`\``
)

Dataview Version

0.4.20

Obsidian Version

0.12.19

OS

MacOS

[blacksmithgu]

That's interesting. Out of curiosity, if you have the Admonitions plugin, do the graphs work inside of an Admonition?

[selfire1]

I installed the Admonitions plugin. In Admonitions, every mermaid chart returns the exact same error as gantt and pie do in dataviewjs:

[blacksmithgu]

Thanks for testing this for me - I think this may be an issue in the Mermaid chart implementation. Specifically, it is probably assuming that it is always being rendered in the top-level document and not inside of a sub-document like Dataview or an Admonition.

You may want to file a bug with the relevant plugin (or on Obsidian if this is a native feature).

[scottTomaszewski]

Hi, just wanted to follow up on this in case anything has changed and also give more information in case its helpful.

For me, a note with the following input:

```dataviewjs
let content="```mermaid\ngantt\n\ttitle im a title\n```"
dv.span(content)
```

```dataviewjs
let content="```mermaid\ngraph\n\tA-->B\n```"
dv.span(content)
```

```mermaid
gantt
    title asdf
``` 

will produce a blank gantt div (expected a title), a properly rendered graph, and then a gantt chart containing only a title (as expected).

Console logs have Error: <line> attribute x1: Expected length, "NaN". several times.

Im not sure this really changes anything - this might be on mermaid's side, but wanted to bump since I ran into this

[BluBloos]

@selfire1 I too cannot get a Gantt chart to render. Has an issue been created with the relevant plugin?

[selfire1]

@BluBloos Mermaid is part of the core functionality, so I guess it would be about raising a Feature Request in the forum!

[chelming]

fyi, this appears to be working now, at least as of 1.1.9.