mermaid-diagrams

A simple chrome extension to add support for mermaid syntax in github, bitbucket and Azure DevOps pages.

For example add this to any wiki page or markdown file in github

Example 1

sequenceDiagram
  A->> B: Query
  B->> C: Forward query
  Note right of C: Thinking...
  C->> B: Response
  B->> A: Forward response

Loading

Example 2

sequenceDiagram
  A->> B: Query B
  B->> C: Forward query B
  Note right of C: Thinking of B...
  C->> B: Response of B
  B->> A: Forward response of B

Loading

This will generate a nice diagram if loaded from github/Azure Devops. The extension will just replace the code block with the generated mermaid diagram.

Instructions to install it

From ChromeStore

Just click the link above and follow the instructions

From source

1. Clone the repo

   git clone https://github.com/Redisrupt/mermaid-diagrams

2. Enable developer mode in chrome://extensions
3. Click on load unpacked extension
4. Select the extensions folder inside the recently cloned repo

Done!

Navigate to any page in github or Azure DevOps with mermaid syntax blocks to see the extension in action