---
title: 从这里开始：Mermaid 入门
canonical: "https://mermaid.vloam.com/zh/docs/getting-started/"
pubDate: 2026-09-13
author: Vloam
description: 弄清 Mermaid 是什么、Vloam Mermaid 编辑器怎么用，并用几分钟画出第一张小图；适合零基础读者，先掌握图类型、预览流程与下一步该读哪篇。
---

Mermaid 用纯文本画图。你写几行字，编辑器就会画出方框、箭头和标签。

你不需要设计软件。你只需要把故事讲清楚：谁在做事、下一步是什么、路径在哪里结束。

## 这个编辑器怎么用

- 左边写语法，右边看预览。
- 草稿只留在当前浏览器。除非你自己分享链接，否则不会上传。
- 需要起点时用「模板」。忘记关键字时看速查。

每张图的第一行要写出图类型。这个词告诉 Mermaid 该按哪套规则解析。

## 第一张图

把下面这段贴进编辑器：

```mermaid
flowchart TD
  Start([开始]) --> Decide{准备好了吗?}
  Decide -->|否| Prep[先补材料]
  Prep --> Decide
  Decide -->|是| Draw[渲染]
  Draw --> Done([完成])
```

从上往下读：

1. `flowchart TD` 表示「流程图，从上到下」。
2. 每一行是一个步骤，或步骤之间的连线。
3. `{准备好了吗?}` 是判断。`|是|` 和 `|否|` 给分支加说明。

先改方框里的字，箭头可以先不动。结构还在，故事就变成你的。

## 接下来学什么

要画流程，先看 **流程图**。要画「谁跟谁说话」，看 **时序图**。要画软件结构或生命周期，再看 **类图** 和 **状态图**。

预览失败时，打开 **常见错误排查**。多数问题只是少了一个关键字，或少了一个引号。