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 预览:

渲染图表失败

想要试试看?

使用我们的交互式工具创建您自己的 ASCII Mermaid 图表。

前往 ASCII Mermaid 工具

更多官方示例

上方示例涵盖了最常用的场景。如需查看涵盖全部图表类型的更多真实 demo,包括高级流程图、复合状态图、OAuth 流程、ER 数据库模型、XY 叠加图、冲刺燃尽图等,请访问 beautiful-mermaid 官方 demo 页面。

查看全部官方 demo →

该页面由 beautiful-mermaid 库作者维护,展示了所有支持语法的完整示例。