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
• Firefox: GitHub + Mermaid - Firefox Add-ons
• Opera: coming later

Features

Supported GitHub features

• Pull requests & issues description (preview + published) - Demo
• Pull requests & issues comment (preview + published)
• Markdown (.md) files (diff + published)
• Gists - Demo

Diagram types

Flowcharts

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

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

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 for more information about the Mermaid syntax.

Roadmap

• Initial implementation
• Publish Chrome extension
• Documentation
• Publish Firefox extension
• Publish Opera extension
• Continuous Integration
• Upgrade dependencies
• Automatic dependency management
• Fix #3
• Testing
• Dark theme + option page
• Cleanup

License

Contributing

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

See contributing intructions for details.