Mermaid学习教程,Mermaid画流程图,Mermaid语法讲解,Mermaid使用方法介绍,Mermaid中文参考文档,Mermaid绘图步骤

例子

此页面包含一系列图表示例,可通过 Code Chart 及其无数应用程序创建。

基本饼图

pie title NETFLIX
         "Time spent looking for movie" : 90
         "Time spent watching it" : 10
NETFLIX90%10%NETFLIXTime spent looking for movieTime spent watching it
pie title What Voldemort doesn't have?
         "FRIENDS" : 2
         "FAMILY" : 3
         "NOSE" : 45
What Voldemort doesn't have?4%6%90%What Voldemort doesn't have?FRIENDSFAMILYNOSE

基本时序图

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
AliceBobJohnBob thinks a longlong time, so longthat the text doesnot fit on a row.Hello Bob, how are you?How about you John?I am good thanks!I am good thanks!Checking with John...Yes... John, how are you?AliceBobJohn

基本流程图

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

带有一些样式的更大流程图

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange
A
Two line
edge comment
Rounded
square
shape
Odd shape
Diamond with
line break
Rounded square shape
Square shape
Circle shape
Inner / circle
and some odd
special characters
Really long text with linebreak
in an Odd shape
,.?!+-*ز
Cyrillic
Circle shape Начало

SequenceDiagram:循环、alt 和 opt

sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>AliceNot so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end

        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end
AliceBobalt[is sick][is well]opt[Extra response]loop[Daily query]Hello Bob, how are you?Not so good :(Feeling fresh like a daisyThanks for askingAliceBob

SequenceDiagram:循环中给自己的消息

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!
AliceBobJohnloop[Healthcheck]Rational thoughtsprevail...Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!AliceBobJohn

序列图:博客应用服务通信

sequenceDiagram
    participant web as Web Browser
    participant blog as Blog Service
    participant account as Account Service
    participant mail as Mail Service
    participant db as Storage

    Note over web,db: The user must be logged in to submit blog posts
    web->>+account: Logs in using credentials
    account->>db: Query stored accounts
    db->>account: Respond with query result

    alt Credentials not found
        account->>web: Invalid credentials
    else Credentials found
        account->>-web: Successfully logged in

        Note over web,db: When the user is authenticated, they can now submit new posts
        web->>+blog: Submit new post
        blog->>db: Store post data

        par Notifications
            blog--)mail: Send mail to blog subscribers
            blog--)db: Store in-site notifications
        and Response
            blog-->>-web: Successfully posted
        end
    end

Web BrowserBlog ServiceAccount ServiceMail ServiceStorageThe user must be logged in to submit blog postsWhen the user is authenticated, they can now submit new postspar[Notifications][Response]alt[Credentials not found][Credentials found]Logs in using credentialsQuery stored accountsRespond with query resultInvalid credentialsSuccessfully logged inSubmit new postStore post dataSend mail to blog subscribersStore in-site notificationsSuccessfully postedWeb BrowserBlog ServiceAccount ServiceMail ServiceStorage

提交流程图。

mainnewbranchb20-2ec7c3a11112-5102cbdtest3-fee61314-d3a35696-3f371977-507c0c3