Mermaid: Cannot render gitGraph

[kazzy]

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.

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.

[WhiteNoise]

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

[dugdun]

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.

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.

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.

[WhiteNoise]

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