yliu-d / github-mermaid-extension Goto Github PK

View Code? Open in Web Editor NEW

This project forked from n8v-guy/github-mermaid-extension

0.0 0.0 0.0 8.2 MB

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

License: MIT License

JavaScript 52.21% HTML 8.58% CSS 39.22%

github-mermaid-extension's Introduction

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