DEV Community

Waylon Walker
Waylon Walker

Posted on • Originally published at waylonwalker.com

Mermaid Highlight

Mermaid gives us a way to style nodes through the use of css, but rather than using normal css selectors we need to use style <nodeid>. This also applies to subgraphs, and we can use the name of the subgraph in place of the nodeid.

graph TD;
    a --> A
    A --> B
    B --> C

    style A fill:#f9f,stroke:#333,stroke-width:4px
    style B fill:#f9f,stroke:#333,stroke-width:4px

    subgraph one
        a
    end

    style one fill:#BADA55
Enter fullscreen mode Exit fullscreen mode

produces the following graph

a short mermaid diagram with some highlighted nodes

Top comments (0)