Mermaid - v-no

The documentation is a work in progress, and English edition is just an empty shell for now. I will translate it when Chinese edition has done.

Markdown

[$](https://cdn.jsdelivr.net/npm/mermaid@8.9.1/dist/mermaid.min.js)[$](/uploads/init-mermaid.js "mermaid")

init-mermaid.js 会在 mermaid.min.js 加载完成后引入。

init-mermaid.js

(() => {
  vno.callAndListen(() => {
    mermaid.init();
  }, vno.EEvent.htmlChanged);
  // // 驻留
  // }, vno.EEvent.htmlChanged, document, true);})();

示例

流程图

graph TD
    A-->B
    A-->C
    B-->D
    C-->D

graph TD A-->B A-->C B-->D C-->D

时序图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

甘特图

gantt
    dateFormat YYYY-MM-DD
    title Adding GANTT diagram to mermaid
    excludes weekdays 2014-01-10
    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

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 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

类图

classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

Git 图

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

gitGraph: options { "nodeSpacing": 150, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch

实体关系图

erDiagram
    CUSTOMER ||--o{ ORDER            : places
    ORDER    ||--|{ LINE-ITEM        : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

日程图

journey
    title My working day
    section Go to work
        Make tea:      5: Me
        Go upstairs:   3: Me
        Do work:       1: Me, Cat
    section Go home
        Go downstairs: 5: Me
        Sit down:      5: Me

journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me

: This page is open source, improve it

Graph