Plugin Mermaid

Cette note doit être affichée dans une nouvelle fenêtre

https://github.com/knsv/mermaid

Table des matières

Documentation

API

Note : Mermaid has an API called mermaidAPI and his render method allow to save the chart as a SVG file.

Flowchart

https://mermaidjs.github.io/flowchart.html

graph LR A---|This is the text|B
graph LR
    A---|This is the text|B

Basic

graph LR A[Square Rect]--Link text--> B((Circle)) A--> C(Round Rect) B--> D{Rhombus} C--> D
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
graph LR; A-.->B;
graph LR;
    A-.->B;

Subgraphs

graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

Graph edges

graph LR A[Hard edge]-->B(Round edge) B--> C{Decision} C-->|One| D[Result one] C-->|Two| E[Result two]
graph LR
A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Add styles

It is possible to apply specific styles such as a thicker border or a different background color to a node.

graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f, stroke:#333,stroke-width:4px style id2 fill:#ccf, stroke:#f66,stroke-width:2px, stroke-dasharray: 5, 5
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

SequenceDiagram

https://mermaidjs.github.io/sequenceDiagram.html

Simple

sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great!
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

Using aliases

sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J->>A: Great!
sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

Adding notes

sequenceDiagram participant John Note right of John: Text in note
sequenceDiagram
    participant John
    Note right of John: Text in note
sequenceDiagram Alice->John: Hello John, how are you? Note over Alice, John: A typical interaction
sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
graph TD; A-->B; A-->C; B-->D; C-->D;
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Gant chart

%% Example of sequence diagram sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end

Complex

sequenceDiagram participant DB participant Server participant Client participant GUI Server-->>DB: CONNECT DB-->>Server: CONNECTED GUI->>+Client: ONLINE Note over Client: readConfig Client-->>Server: CONNECT Server-->>Client: CONNECTED Client->>+GUI: GET CREDENTIALS Note over GUI: loginDialog GUI->>-Client: CREDENTIALS Note over Client: scrambleLogin Client->>+Server: LOGIN Server->>+DB: AUTH Note over DB: authQuery DB->>-Server: AUTH REPLY Note over Server: newSession Server->>-Client: LOGIN REPLY Client->>-GUI: STATUS
sequenceDiagram
    participant DB
    participant Server
    participant Client
    participant GUI
    Server-->>DB: CONNECT
    DB-->>Server: CONNECTED
    GUI->>+Client: ONLINE
    Note over Client: readConfig
    Client-->>Server: CONNECT
    Server-->>Client: CONNECTED
    Client->>+GUI: GET CREDENTIALS
    Note over GUI: loginDialog
    GUI->>-Client: CREDENTIALS
    Note over Client: scrambleLogin
    Client->>+Server: LOGIN
    Server->>+DB: AUTH
    Note over DB: authQuery
    DB->>-Server: AUTH REPLY
    Note over Server: newSession
    Server->>-Client: LOGIN REPLY
    Client->>-GUI: STATUS

Gant

https://mermaidjs.github.io/gantt.html

Simple

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
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

A second Gantt chart

gantt dateFormat YYYY-MM-DD title GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h
gantt
        dateFormat  YYYY-MM-DD
        title GANTT diagram functionality to mermaid
        section A section
        Completed task          :done,  des1, 2014-01-06,2014-01-08
        Active task             :active,  des2, 2014-01-09, 3d
        Future task             :        des3, after des2, 5d
        Future task2              :      des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison        :crit, done, after des1, 2d
        Create tests for parser          :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                    :1d
        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page    :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h
        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page    :20h
        Add another diagram to demo page    :48h

Atom

If you’re using Atom as editor, take a look to the [Markdown Preview Enhanced](apm install markdown-preview-enhanced) plugin which also support rendering Mermaid charts directly in the editor.