Vloam Mermaid

文档

从这里开始：Mermaid 入门

弄清 Mermaid 是什么、Vloam Mermaid 编辑器怎么用，并用几分钟画出第一张小图；适合零基础读者，先掌握图类型、预览流程与下一步该读哪篇。

滚轮缩放 · 拖拽平移

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

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

这个编辑器怎么用

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

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

第一张图

把下面这段贴进编辑器：

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

从上往下读：

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

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

接下来学什么

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

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