ASCII Mermaid 指南
学习创建 ASCII Mermaid 图表的基础知识。本指南涵盖最常用的图表类型和简单示例。
基础流程图
流程图是最常见的图表类型之一。它们表示流程和决策流。
代码:
```mermaid
graph TD
A[开始] --> B{决策}
B -->|是| C[操作]
B -->|否| D[结束]
C --> D
```ASCII 预览:
渲染图表失败
状态图
状态图显示系统的不同状态以及它们之间的转换。
代码:
```mermaid
stateDiagram-v2
[*] --> Idle
Idle --> Processing: 开始
Processing --> Complete: 完成
Complete --> [*]
```ASCII 预览:
渲染图表失败
序列图
序列图说明对象之间随时间的交互。
代码:
```mermaid
sequenceDiagram
张三->>李四: 你好!
李四-->>张三: 你好!
张三->>李四: 最近怎么样?
李四-->>张三: 很好,谢谢!
```ASCII 预览:
渲染图表失败
类图
类图表示面向对象的系统结构。它们显示类及其属性和方法、继承关系(使用 <|--)和关联。
代码:
```mermaid
classDiagram
动物 <|-- 鸭子
动物 <|-- 鱼
动物: +int 年龄
动物: +String 性别
动物: +是哺乳动物() bool
动物: +交配()
鸭子: +String 喙颜色
鸭子: +游泳()
鸭子: +嘎嘎叫()
鱼: -int 尺寸英尺
鱼: +可以吃()
鱼: +游泳()
```ASCII 预览:
渲染图表失败
实体关系图
ER 图建模数据库结构,显示实体(表)以及它们之间的关系。注意:受 beautiful-mermaid 渲染限制,关系标签建议使用英文以确保完整显示。
代码:
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
```ASCII 预览:
渲染图表失败
XY 柱状图
XY 图表用于显示跨类别的定量数据。柱状图非常适合比较不同类别或时间段的数值。
代码:
```mermaid
xychart-beta
title "月度销售额"
x-axis [一月, 二月, 三月, 四月, 五月, 六月]
y-axis "收入" 0 --> 10000
bar [5000, 6200, 7500, 8200, 7800, 9500]
```ASCII 预览:
渲染图表失败
XY 折线图
折线图用于可视化趋势和随时间或有序类别的变化,使模式和进展一目了然。
代码:
```mermaid
xychart-beta
title "月度增长"
x-axis [一月, 二月, 三月, 四月, 五月, 六月]
y-axis "分数" 0 --> 100
line [20, 35, 45, 60, 75, 90]
```ASCII 预览:
渲染图表失败
更多官方示例
上方示例涵盖了最常用的场景。如需查看涵盖全部图表类型的更多真实 demo,包括高级流程图、复合状态图、OAuth 流程、ER 数据库模型、XY 叠加图、冲刺燃尽图等,请访问 beautiful-mermaid 官方 demo 页面。
查看全部官方 demo →该页面由 beautiful-mermaid 库作者维护,展示了所有支持语法的完整示例。