Mermaid: Cannot render gitGraph

Bug graveyard
1

Steps to reproduce

Create a mermaid code-fence and paste the demo gitGraph code-block:

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

Expected result

Should render something like this.

Sample Mermaid gitGraph Output
Sample Mermaid gitGraph Output1200×491 9.14 KB

Actual result

Renders a blank SVG with empty <g></g> tags.

Environment

  • Operating system: Linux Mint 20
  • Debug info:
    SYSTEM INFO:
    Obsidian version: v0.13.23
    Installer version: v0.12.19
    Operating system: #109-Ubuntu SMP Wed Jan 12 16:49:16 UTC 2022 5.4.0-96-generic
    Login status: not logged in
    Insider build toggle: off
    Live preview: on
    Legacy editor: off
    Base theme: dark
    Community theme: none
    Snippets enabled: 5
    Safe mode: off
    Plugins installed: 159
    Plugins enabled: 73
    1: Sliding Panes (Andy’s Mode)
    2: Outliner
    3: Paste URL into selection
    4: Editor Syntax Highlight
    5: Ozan’s Image in Editor Plugin
    6: Copy button for code blocks
    7: Folder Note
    8: Convert url to preview (iframe)
    9: Autocomplete
    10: Journey
    11: Pane Relief
    12: Hotkey Helper
    13: cMenu
    14: Footlinks
    15: Gallery
    16: Dangling links
    17: Automatically reveal active file
    18: Activity History
    19: Smart Typography
    20: Pluck
    21: Quick Explorer
    22: Image Toolkit
    23: Copy Block Link
    24: Toggl Track
    25: Obsidian42 - WordNet Dictionary
    26: Tag Page Preview
    27: Unique attachments
    28: Sidebar Expand on Hover
    29: AidenLx’s Folder Note
    30: Rich Links
    31: Copy Image and URL in Preview
    32: Number Headings
    33: Block Reference Counter
    34: Gist
    35: Open Link With
    36: Better File Link
    37: Folder Note Core
    38: Paste to Current Indentation
    39: Admonition
    40: Advanced new file
    41: Hider
    42: Note Folder Autorename
    43: Related Notes Finder
    44: Relative Line Numbers
    45: Theme Picker
    46: Underline
    47: Table Extended
    48: Tidy Footnotes
    49: Footnote Shortcut
    50: Better footnote
    51: Electron Window Tweaker
    52: Text Snippets
    53: Auto Link Title
    54: Excalidraw
    55: Fullscreen mode plugin
    56: MetaEdit
    57: Emoji Shortcodes
    58: Emoji Toolbar
    59: Mind Map
    60: Extract url content
    61: Dynamic Table of Contents
    62: Tag Wrangler
    63: Annotator
    64: Dataview
    65: Recent Files
    66: Link Headers Directly
    67: File Tree Alternative Plugin
    68: Templater
    69: Obsidian Git
    70: Local images
    71: Incremental Writing
    72: Natural Language Dates
    73: Reset Font Size

Additional information

No errors on console. Verified with both dark/light themes.

2

post a screen recording of this in the help vault.
I can only see some css colours to that need fixing

3

It appears that having the options block is causing the issue. If you remove that then the chart will appear. However it will be truncated on the right side if there’s not enough room to display the full chart. I’m also not seeing the labels for the chart which makes it not useful.

image
image1205×205 23.6 KB

Joplin has the same issue with displaying the chart if the options block is present. If that block is removed, you will see the chart and the labels. Again, this chart will be truncated on the right hand side.

image
image2596×672 49.1 KB

I did see that that gitGraph is marked as experimental, so that might have something to do with this.

I did notice that pasting your code in the Mermaid Live site, the options block does not seem to be respected either. As a matter of fact, the options block is removed if you share a link to the chart (as I did above). Seems that this might not be ready for prime time.

Not that this helps you out much, but I don’t think it’s necessarily and issue with Obsidian, but looks like it might be more with the Mermaid library. The developers might be able to fix the issue with the labels not showing up, but everything else would need to be fixed upstream it appears.

4

Yeah, I agree with @dugdun , this is still experimental upstream. We’ll revisit this type of diagram when it’s stable.