Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 1 month ago
JSON representation

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

Awesome Lists containing this project

README

        



Github + Mermaid



A browser extension for Chrome, Opera & Firefox that adds

Mermaid
language support to

Github Markdown.



Extension Boilerplate


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.