Search code examples
githubformattingmermaid

Consistent Mermaid styling between Mermaid Live and GitHub

I'm creating diagrams in Mermaid and I'm new to the framework. I'd like to have consistent formatting between how the diagram is rendered in the Mermaid Live Editor and how the diagram is rendered in Github.

I also render diagrams in Pycharm using the Mermaid plugin, and its styling is currently the same as the live editor.

Here's an example diagram in Mermaid Live/Pycharm:

example diagram in Mermaid Live

And here's the same diagram as rendered in Github:

example diagram in Github

The reason I want to do this is because color choices make the diagram look very different in the two editors. When the text color changes from black to white, this can make some text unreadable in one of the two formats (look at the blue box for an example of this).

Solution

  • tl;dr

    Add %%{init: {"theme": "dark"}}%% to your GitHub code block.

    My answer

    I assume that your computer is configured to use dark theme and not light, and that's why you see inconsistency between the two.

    For me this is how your mermaid link looks like:

    mermaid

    And on GitHub, the markdown:

    flowchart LR

    subgraph Legend
        direction LR
        a1[This milestone is finished]:::finished -->         a2[This milestone is being executed]:::executing
        a3[This milestone is being planned]:::planning -->         a4[This milestone is not yet planned]
        a5[This milestone is a 'north star' milestone]:::northStar
    end

    %% Define some styles
    classDef planning fill:#9999FF
    classDef executing fill:#FF6633
    classDef finished fill:#99FF33
    classDef northStar fill:#cc99ff

    Looks like that:

    GitHub

    You can explicit specify the theme with %%{init: {"theme": "<mermaid_theme>"}}%% like this:

    ```mermaid
%%{init: {"theme": "dark"}}%%
flowchart LR

    subgraph Legend
        direction LR
        a1[This milestone is finished]:::finished -->         a2[This milestone is being executed]:::executing
        a3[This milestone is being planned]:::planning -->         a4[This milestone is not yet planned]
        a5[This milestone is a 'north star' milestone]:::northStar
    end

    %% Define some styles
    classDef planning fill:#9999FF
    classDef executing fill:#FF6633
    classDef finished fill:#99FF33
    classDef northStar fill:#cc99ff
```

    And this will result in the following markdown:

    GitHub-dark