0%

markdown生成结构图之mermaid简单入门

发表于 更新于 分类于

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

mermaid

流程图

基础使用

1
2
3
4
5
6
7
graph TB
    A
    B[Bname]
    C(Canme)
    D((Dname))
    E>Ename]
    F{Fname}

流程图 进阶

连线-细线

1
2
3
4
5
6
7
8
graph TB

    A1-->B1
    A2---B2
    A3--sdfasdf---B3
    A4--asdfasdf-->B4
    A5-.-B5
    A6-.->B6
1
2
3
4
5
6
7
8
graph TB

    A1-->B1
    A2---B2
    A3--sdfasdf---B3
    A4--asdfasdf-->B4
    A5-.-B5
    A6-.->B6

连线-粗线

graph TB

A7-.sdfsd.-B7
A8-.asdfsf.->B8
A9===B9
A10==>B10
A11==sdfasdf===B11
A12==sadfsdf==>B12
1
2
3
4
5
6
7
8
graph TB

    A7-.sdfsd.-B7
    A8-.asdfsf.->B8
    A9===B9
    A10==>B10
    A11==sdfasdf===B11
    A12==sadfsdf==>B12

综合使用

graph TB
    st((开始))-->op[操作]
    op-->co{判断Yes or No}
    co --no-->sub(子进程)
    sub-->op
    co--yes-->out>输出]
    out-->en((结束))
1
2
3
4
5
6
7
graph TB
    st((开始))-->op[操作]
    op-->co{判断Yes or No}
    co --no-->sub(子进程)
    sub-->op
    co--yes-->out>输出]
    out-->en((结束))

序列图示例

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!
1
2
3
4
5
6
7
8
9
10
11
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!

甘特图示例

gantt
        dateFormat  YYYY-MM-DD
        title Adding 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
gantt
        dateFormat  YYYY-MM-DD
        title Adding 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