Mermaid stateDiagram compostite state appearance

Steps to reproduce

  • Use light theme
  • Create a memaid snippet:
```mermaid
stateDiagram-v2

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:

image

Actual result

That’s how I see it in Obsidian:

image

Environment

  • Operating system: Windows 10
  • Debug info:
    SYSTEM 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)
}