oleeskild / obsidian-digital-garden

MIT License
1.32k stars 121 forks source link

[BUG] Mermaid not rendering if using theme #620

Open Zombiefleischer opened 1 month ago

Zombiefleischer commented 1 month ago

Digital Garden is not rendering the mermaid diagram, if the theme is set

Example: %%{init:{'theme':'dark'}}%%

This is my mermaid code and it gets rendered as a white frame with all the code in it

---
title: Client is cluster-aware
---
%%{init:{'theme':'dark'}}%%

flowchart TD
    subgraph Shard3 [Shard 3]
        Master3[Master] --> Replica3[Replica]
    end
    subgraph Shard1 [Shard 1]
        Master1[Master] --> Replica1[Replica]
    end
    subgraph Shard2 [Shard 2]
        Master2[Master] --> Replica2[Replica]
    end

    Client -- Read and Write --> Master1 & Master2 & Master3
---
title: Client is cluster-aware
---
%%{init:{'theme':'dark'}}%%

flowchart TD
    subgraph Shard3 [Shard 3]
        Master3[Master] --> Replica3[Replica]
    end
    subgraph Shard1 [Shard 1]
        Master1[Master] --> Replica1[Replica]
    end
    subgraph Shard2 [Shard 2]
        Master2[Master] --> Replica2[Replica]
    end

    Client -- Read and Write --> Master1 & Master2 & Master3
cathelijne commented 1 month ago

There is an option to do the graph config in yaml, and that works for me. This is an actual gitGraph I'm using that renders fine on my website:

```mermaid
---
config:
  theme: base
  themeVariables:
    git0: "#ff0000"
    git1: "#0000ff"
    commitLabelColor: "#000000"
    commitLabelFontSize: "12px"
    commitLabelBackground: "#ffffff"
  gitGraph:
    showBranches: false
---
gitGraph
  commit id: "Amsterdam " type: HIGHLIGHT
  commit id: "Hiroshima"
  commit id: "Miyajima"
  commit id: "Himeji Castle"
  commit id: "Osaka"
  commit id: "Kyoto"
  commit id: "Nagoya"
  commit id: "Kanazawa"
  commit id: "Takayama"
  commit id: "Matsumoto"
  commit id: "Yokohama"
  commit id: "Tokyo"
  commit id: "Amsterdam"


(it's in a double set of triple backticks to display here, but the preview messes those up a bit, if you already write mermaid diagrams, I'm sure you know how to handle the backticks :))