> For the complete documentation index, see [llms.txt](https://viva.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://viva.gitbook.io/project/sui-bi/markdown/mermaid.md).

# mermaid

## 项目地址

{% embed url="<https://github.com/knsv/mermaid>" %}

## 官方文档

{% embed url="<https://mermaidjs.github.io/>" %}

## 在线编辑器

{% embed url="<https://mermaidjs.github.io/mermaid-live-editor>" %}

## 示例

### 流程图

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

显示效果：

![流程图](https://mermaidjs.github.io/img/flow.png)

### 序列图

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

显示效果：

![序列图](https://mermaidjs.github.io/img/sequence.png)

### 甘特图

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

显示效果：

![甘特图](https://mermaidjs.github.io/img/gantt.png)

### 类图（实验性）

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

显示效果：

![类图](/files/-Lm4AHvZN8vtPLyb4rRv)

### Git分支图（实验性）

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

显示效果：

![GIt分支图](https://mermaidjs.github.io/img/git.png)

## VSCode插件

{% embed url="<https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://viva.gitbook.io/project/sui-bi/markdown/mermaid.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.