Mermaid diagrams

msolv

Been having a little play around with Mermaid support.

If you haven't seen mermaid diagrams before, they're basically a really simple way of drawing a diagram using plain text.

They look a little bit like this:

  graph LR
  A --> B

The syntax looks a bit like this:

    ```mermaid
    graph LR
    A --> B
    ```

From there, if we want to go little further, make it flow top down, add flow descriptions, and a decision point, we can do this:

    ```mermaid
    graph TD
    A[Starting Point] -->|How we get there| B(Next Step)
    B --> C{Decision}
    C -->|Yes| D[Cool]
    C -->|No| E[OK then]
    ```

And the result:

  graph TD
  A[Starting Point] -->|How we get there| B(Next Step)
  B --> C{Decision}
  C -->|Yes| D[Cool]
  C -->|No| E[OK then]

And there we are.

There's a few places that take Mermaid syntax.

More Info

Search