https://github.com/backmarket-oss/github-mermaid-extension

A browser extension for Chrome, Opera & Firefox that adds Mermaid language support to Github
https://github.com/backmarket-oss/github-mermaid-extension

chrome chrome-extension extension firefox firefox-extension github mermaid webextension

Last synced: 1 day ago
JSON representation

A browser extension for Chrome, Opera & Firefox that adds Mermaid language support to Github

• Host: GitHub
• URL: https://github.com/backmarket-oss/github-mermaid-extension
• Owner: backmarket-oss
• License: mit
• Archived: true
• Created: 2019-04-24T13:00:43.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-10-18T21:20:18.000Z (about 3 years ago)
• Last Synced: 2024-08-12T21:26:16.617Z (3 months ago)
• Topics: chrome, chrome-extension, extension, firefox, firefox-extension, github, mermaid, webextension
• Language: JavaScript
• Homepage:
• Size: 8.32 MB
• Stars: 238
• Watchers: 9
• Forks: 65
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  


    Github + Mermaid  

  


  


    

      A browser extension for Chrome, Opera & Firefox that adds

      

      Mermaid

      language support to

      

      Github Markdown.

    

  





  


  


    Install •

    Features •

    How to use •

    Roadmap •

    License •

    Contributing

  


  


    

      

    

    

      

    

    

      

    

    

      

    

  






## Install

-  **Google Chrome**: [GitHub + Mermaid - Chrome Web Store](https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe)

-  **Firefox**: [GitHub + Mermaid - Firefox Add-ons](https://addons.mozilla.org/en-GB/firefox/addon/github-mermaid/)

-  **Opera**: coming later

## Features

### Supported GitHub features

- [x] Pull requests & issues description (preview + published) - [Demo](https://github.com/BackMarket/github-mermaid-extension/issues/1)

- [x] Pull requests & issues comment (preview + published)

- [x] Markdown (`.md`) files (diff + published)

- [x] Gists - [Demo](https://gist.github.com/amercier/df2e07a994315d323e398120bdda3989)

### Diagram types

#### Flowcharts

![Flowchart example](/resources/screenshots/flowchart.png)

  Show source code

  ```

  ```mermaid

  graph LR

  A(Start)

  A --> B[Look for an item]

  B --> C{Did you find it?}

  C -->|Yes| D(Stop looking)

  C -->|No| E{Do you need it?}

  E -->|Yes| B

  E -->|No| D

  ```

#### Sequence Diagrams

![Sequence Diagram example](/resources/screenshots/sequence-diagram.png)

  Show source code

  ```

  ```mermaid

  sequenceDiagram

  participant U as User

  participant C as Client

  participant S as Server

  participant DB as Database

  U ->> C: Fill username

  U ->> C: Fill password

  C ->> U: Enable "Login" button

  U ->> C: Click "Login" button

  C ->>+ S: POST /login

  S ->>+ DB: SELECT FROM users

  Note over S,DB: See login.py for impl. details

  DB -->>- S: results

  S -->>- C: { authenticated: true }

  C ->> U: redirect /home

  ```

#### Gantt Diagrams

![Gantt Diagram example](/resources/screenshots/gantt-diagram.png)

  Show source code

  ```

  ```mermaid

  gantt

      title A Gantt Diagram

      dateFormat  YYYY-MM-DD

      section Section

      A task           :a1, 2014-01-01, 30d

      Another task     :after a1  , 20d

      section Another

      Task in sec      :2014-01-12  , 12d

      another task      : 24d

  ```

## How to use

Simply put Mermaid code into ```mermaid. See

[Mermaid official website](https://mermaidjs.github.io/gantt.html) for more

information about the Mermaid syntax.

## Roadmap

- [x] Initial implementation

- [x] Publish Chrome extension

- [x] Documentation

- [x] Publish Firefox extension

- [ ] Publish Opera extension

- [x] Continuous Integration

- [x] Upgrade dependencies

- [x] Automatic dependency management

- [x] Fix #3

- [ ] Testing

- [ ] Dark theme + option page

- [ ] Cleanup

## License

[![License](https://img.shields.io/github/license/BackMarket/github-mermaid-extension.svg)](/LICENSE.md)

## Contributing

Contributions (issues ♥, pull requests ♥♥♥) are more than welcome! Feel free to clone, fork, modify, extend, etc.

See [contributing intructions](/CONTRIBUTING.md) for details.