Mermaid stateDiagram compostite state appearance

[AskePit]

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:

Actual result

That’s how I see it in Obsidian:

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

---

[meruko]

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)
}

[aschearer]

Works like a charm. Obsidian please integrate this into the main theme!

[WhiteNoise]

will be fixed v1.2.4