首页mermaid demo

mermaid demo

时间: 2025-06-16 12:26:40 浏览: 11

### Mermaid Diagram 示例 Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图[^1]。以下是一些常见的 Mermaid 图表类型及其示例代码。 #### 流程图 (Flowchart) 流程图是一种可视化工具，用于表示过程或算法的步骤。 ```mermaid graph LR A[开始] --> B[步骤1] B --> C[步骤2] C --> D[步骤3] D --> E[结束] ``` #### 饼图 (Pie Chart) 饼图用于显示数据的比例分布。 ```mermaid pie title 饼图标题 "dogs": 156 "cats": 100 "birds": 60 ``` #### 时序图 (Sequence Diagram) 时序图用于描述对象之间的交互顺序。 ```mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice->>Bob: How about you? Bob-->>Alice: I am good too! ``` #### 状态图 (State Diagram) 状态图用于描述系统的状态及其转换。 ```mermaid stateDiagram-v2 [*] --> Active Active --> Inactive Inactive --> [*] ``` #### 类图 (Class Diagram) 类图用于描述系统的类及其关系。 ```mermaid classDiagram Animal <|-- Duck Animal <|-- Fish Animal : +int age Animal : +String gender Animal: +void eat() Duck: +String beakColor Fish: +int sizeInFeet ``` #### 甘特图 (Gantt Chart) 甘特图用于项目管理，展示任务的时间安排。 ```mermaid gantt title 项目计划 dateFormat YYYY-MM-DD section 第一部分 Task 1 :done, des1, 2023-01-01, 2023-01-06 Task 2 :active, des2, 2023-01-07, 2023-01-12 section 第二部分 Task 3 : des3, after des2, 5d Task 4 : des4, after des3, 5d ``` 以上示例展示了如何使用 Mermaid 创建不同类型的图表。这些图表可以直接嵌入支持 Mermaid 的编辑器（如 Typora）中，或者在网页中通过 JavaScript 渲染[^2]。

阅读全文