Mermaid stateDiagram compostite state appearance

Steps to reproduce

  • Use light theme
  • Create a memaid snippet:

state Alive {
	[*] --> Idle
	Idle --> Move: WASD
	Move --> Idle: no input

[*] --> Alive
Alive --> [*]

Expected result

I expect an enough contrasted rendered picture of composite state, possibly with white/transparent state background and clearly visible arrows and sub-states. For instance, GitLab renders it like this:


Actual result

That’s how I see it in Obsidian:



  • Operating system: Windows 10
  • Debug info:
    Obsidian version: v0.15.9
    Installer version: v0.15.9
    Operating system: Windows 10 Pro 10.0.19044
    Login status: not logged in
    Insider build toggle: off
    Live preview: on
    Legacy editor: off
    Base theme: light
    Community theme: none
    Snippets enabled: 0
    Restricted mode: off
    Plugins installed: 1
    Plugins enabled: 1
    1: Kanban v1.3.15

1 Like

You can change the color by setting css:

.mermaid .edgePaths {
    --background-modifier-border: var(--text-normal); /* Change Edge Color */
rect.inner { /* Change the Background for inner Rectangle */
    --background-secondary-alt: var(--background-primary)