mermaid + gist = success

Graham Hay

GitHub recently added mermaid rendering to their markdown dialect, making it simple to render your diagrams, whether in a readme or just thrown together in a gist.

As soon as you create a new gist (remembering to use the .md extension, to enable preview), you can easily draw a sequence diagram:

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

or finite automata:

```mermaid
stateDiagram-v2
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]
```

Leave a comment