Steps to reproduce
- Create a new note or use any note you have
- Add a
mermaidgraph code block with the below examplegitGraph. This comes from the example under the themes section of Mermaid’s documentation with a slight edit at the end to show the full 8 color cycle
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
branch test1
checkout test1
commit
branch test2
checkout test2
commit
branch test3
checkout test3
commit
checkout main
merge test1
merge test2
merge test3
Expected result
A well displayed graph of git commits with distinct and easy to see branches
See a proposed solution in the Additional info below
Actual result
Branch colors are very faint, blend together because they’re not distinct enough and completely disappear on some themes. Examples below:
Obsidian default
Dark:
Light:
Minimal theme - Solarized
Dark:
Light:
Environment
- Operating system: Kubuntu 22.04
- Debug info:
SYSTEM INFO:
Obsidian version: v1.1.9
Installer version: v1.0.3
Operating system: #64-Ubuntu SMP Thu Jan 5 11:43:13 UTC 2023 5.15.0-58-generic
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: Minimal v6.2.1
Snippets enabled: 5
Restricted mode: off
Plugins installed: 27
Plugins enabled: 25
1: Editor Syntax Highlight v0.1.3
2: Quick Switcher++ v2.3.7
3: Maximise Active Pane v0.0.3
4: Note Refactor v1.7.1
5: Fullscreen mode plugin v0.1.2
6: Show Whitespace v0.3.1
7: Copy button for code blocks (fixed version manifest) v0.2.1
8: Page Heading From Links v0.2.0
9: Better Word Count v0.9.4
10: Emoji Toolbar v0.3.2
11: Hotkeys++ v0.2.7
12: Paste URL into selection v1.7.0
13: Advanced Tables v0.18.1
14: Obsidian Git v2.16.0
15: Natural Language Dates v0.6.1
16: Linter v1.10.2
17: Minimal Theme Settings v6.2.0
18: Style Settings v0.4.12
19: Dataview v0.5.55
20: Tag Wrangler v0.5.6
21: Hover External Link Plugin v1.0.0
22: Simple Embeds v1.14.1
23: Calendar v1.5.10
24: Periodic Notes v0.0.17
25: Emoji Shortcodes v2.2.0
RECOMMENDATIONS:
Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.
Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.
Additional information
I tried playing around with this a little myself and found that the default Mermaid config sets static colors for the git0-git8 values. I tried altering them myself with mermaidAPI.updateSiteConfig to use theme variables and it produced rather nice results. It would be great if these mermaid charts always used theme variables so theme editors could modify them without JS.
Run this in the dev console:
mermaid.mermaidAPI.updateSiteConfig({ themeVariables: {
git0: "var(--color-red)",
git1: "var(--color-orange)",
git2: "var(--color-yellow)",
git3: "var(--color-green)",
git4: "var(--color-cyan)",
git5: "var(--color-blue)",
git6: "var(--color-purple)",
git7: "var(--color-pink)",
}})
I didn’t spend enough time to figure out a good value for the branch labels text so the examples below don’t look perfect but running with this idea it shouldn’t be too hard.
(examples in first reply, embed limit…)
