我要搬砖主打两两消除，推一推就对上
数独四档难度，每日一题
2048滑动合并，冲到 2048
华容道闯关十八关
扫雷新手教学＋三档难度＋30 关无猜闯关
蜘蛛纸牌有解的牌＋十二关Mermaid语法速查表：mermaid流程图的方向、节点形状、连线、子图、样式，mermaid时序图的参与者、各种箭头、alt、loop、opt、par、Note、autonumber，六十多条写法逐条配上现场画出来的图，可筛选、可搜索、一键复制，还能一键到 Mermaid 在线编辑器里打开。另有 mermaid甘特图、类图、状态图等其它图类型的最小示例，以及常见报错对照。全在本机处理，不上传。
怎么用
这一页是一份带实时效果的 Mermaid 语法速查表：左列是写法，中间是现场画出来的图，右列是要点和常见坑。不用下载、不用注册，打开就能查，全部在你的浏览器里处理，不上传。不管你是在找 mermaid语法 的写法，还是想学一遍 mermaid教程，都可以从这张表开始。本页只讲最常用的两种图：mermaid流程图和mermaid时序图，其它图类型（比如 mermaid甘特图）在页面下面有最小示例。
一、查语法
- 按类别筛：表格上方的按钮可以只看「流程图」或「时序图」，也可以细分到「流程图：节点形状」「流程图：连线」「时序图：块、注释与编号」等六类，点「全部」看全表。
- 搜关键字：在搜索框里打「菱形」「子图」「虚线」「alt」这样的词，名字、写法、说明里带这个词的行都会留下；空格隔开几个词表示要同时出现。
- 复制写法：每行右边的「复制写法」把左列原文放进剪贴板，粘到你的文档里就能用。
- 在下面试试：把这一行的写法放进页底的试写区，改几个字看图怎么变。
- 到编辑器打开：直接跳到 Mermaid 在线编辑器，那一行的代码已经填好，可以继续往下画、导出图片。
二、边写边看
页底的试写区左边写代码、右边出图。写错了，会在下面用红字告诉你出错的是第几行和大概的原因，右边的图先收起，改对了马上重画。写大一点的图，请用上面的「到完整编辑器继续写」。
三、配合 Markdown 和思维导图
Mermaid 代码平时多半写在 Markdown 文档里：写一个代码块，语言写 mermaid。Markdown 自己的写法可以查Markdown 语法速查，想边写边看整篇文档的效果，用Markdown 在线编辑器。要做的是思维导图而不是流程图，可以用思维导图在线制作。
怎么看结果
速查表怎么读
每一行都是一段完整可以出图的代码，第一行就是图的类型（flowchart 加方向，或 sequenceDiagram），不是零碎的片段，复制出去直接能用。中间的图是用本页自带的引擎画的，所以每一行的图都是真的画出来的，不是手工配的示意图。
本站画的图和官方的有区别吗
排版和配色会有细微差别，节点位置、连线走向不一定和官方渲染逐像素一样，但写法是否正确，以能不能画出图为准。有些写法官方有，本站的编辑器暂时没做，比如时序图的激活条、流程图的 linkStyle 和点击事件；它们在页面里单独列了一栏，速查表里不放它们的效果，免得你被画出来的样子误导。
报错怎么读
编辑器报错会写「第 N 行：……」。先去看第 N 行，再看它的上一行：括号没配对、引号少一半、subgraph 少了 end 这类错误，往往在上一行就已经出了问题，只是到下一行才被发现。对照页面上的「常见报错」，十有八九能找到原因。
不正常怎么办
- 图完全没出来：先看第一行有没有写图的类型，再看有没有用中文输入法打出了全角符号。
- 图出来了，但和想的不一样：检查线上的文字是不是用了对的写法，竖线夹字和夹在中间的写法效果一样，任选一种。
- 在别的平台里画不出来：多半是那个平台带的 Mermaid 版本太老，认不得新写法，换成老写法，或先用本站编辑器导出图片。
常见问题
Mermaid 流程图和 Mermaid 时序图分别适合画什么
流程图画「步骤怎么走」：审批流程、登录流程、程序里的 if／else 判断。时序图画「谁先对谁说了什么」：几个系统或几个人之间按时间先后互相发消息，比如下单、支付、登录的接口调用顺序。想让一张图里既有步骤又有多方交互，就拆成两张图。
Mermaid 教程：从哪里开始学最快
先把流程图的四个方向、几个常用形状（矩形、圆角、菱形、体育场形）、实线虚线箭头和连线上写字记住，已经能画 80% 的流程图。再看时序图的参与者、实线虚线两种箭头、alt 和 loop 两种块。用本页的速查表对着敲，每敲一行就在试写区看一遍效果，比通读文档快。画完的图想导出，去 Mermaid 在线编辑器，可以导出 PNG 和 SVG。
节点名为什么不要叫 end
在 Mermaid 流程图里，小写的 end 是子图的结束关键字，用来当节点名会让图出错。官方文档的建议是把它改成 End、END 或其中某个字母大写。本页的编辑器碰到小写 end 当节点名时不会报错，但标准 Mermaid 会，所以保险起见，一律别用。另一个类似的坑：连线后面紧跟着以小写 o 或 x 开头的节点名时，比如 A—oB，会被读成一条圆头线连到 B，而不是连到名叫 oB 的节点；要连到 oB，在 o 前面加一个空格。
缩进和空行有影响吗
没有影响。Mermaid 逐行读内容，不看缩进，也不在乎空行多少，页面「常见报错对照」最下面有一个例子，两段缩进完全不同的代码画出来一模一样。缩进只是写给人看的，嵌套的 subgraph 和块缩进着写，自己更容易检查 end 是不是配齐了。
原理与冷知识
文字是怎么变成图的
Mermaid 做了三件事：先把你写的文字拆成一条一条的语句（有哪些节点、哪些连线、谁发给谁），再算每个节点放在哪里、每条线怎么绕，最后把结果画成 SVG 矢量图。这就是为什么改一个字、整张图的排版会跟着重新算。同样的代码给不同的平台，画出的位置可能略有不同，因为排版算法不同；但图里有哪些东西、谁连谁，是一样的。
为什么要用文字画图
文字画的图可以放进版本管理，看得见哪一行改了；可以让别人复制、修改；也不需要打开专门的绘图软件。代价是不能随手拖动节点、精细调整位置。需要完全自由的版面，可以用在线画板手画。
Mermaid 有哪些图类型
除了流程图和时序图，常见的还有甘特图、类图、状态图、饼图、实体关系图（ER 图）、思维导图、Git 分支图等。它们都是同一个思路：第一行写图的类型，下面一行一条地写内容。本页的「其它图类型语法要点」给了每一种的最小示例，可以复制出去，在支持的平台里画。
版本差异
Mermaid 一直在更新，新的图类型和新的写法常常只有较新的版本才认。如果你在某个平台里写的代码画不出来，而在本页能画，多半是那个平台带的版本比较老；反过来，本页画不出的新写法，在带了新版本的平台里可能是好的。拿不准时，以那个平台的说明为准。
更多问答
Mermaid 是什么？哪些地方能直接把它画成图？
Mermaid 是一种用文字描述图表的写法：你写几行类似 A --> B 的文字，支持它的软件就把文字画成流程图、时序图、甘特图等。常见能直接渲染的地方有 GitHub、GitLab 的 Markdown，Typora、Obsidian 这类编辑器，Notion 的代码块（语言选 Mermaid）等；各平台带的 Mermaid 版本不同，新的图类型和新写法不一定都支持，具体以对应平台的说明为准。不支持的地方，可以先在本站的 Mermaid 在线编辑器里画好，导出图片再用。
Mermaid 流程图的节点文字里写了括号，为什么报错？
括号、大于号、井号这些符号在 Mermaid 里有别的用途，直接写在节点文字里容易让它分不清哪里是文字、哪里是语法。最稳的办法是把整段文字用英文双引号包住，比如 A("登录(必填)")。页面上「常见报错对照」里有这一条，错的写法由编辑器现场跑出报错，改好的写法旁边直接给出效果图。
Mermaid 时序图里的 alt、loop、opt、par 怎么写？
它们都是成对的块，以关键字开头、以 end 收尾，中间缩进着写消息。alt 表示分支，用 else 写其它分支；loop 写循环条件；opt 表示可选的一段；par 表示并行，用 and 隔开每条并行线；critical 写必须完成的步骤，用 option 写出错时的处理；break 表示中断。每个块都要有自己的 end，嵌套时数一数个数对不对。速查表的「时序图：块、注释与编号」一类每个都有可以直接复制的例子。
Mermaid 甘特图怎么写？
第一行写 gantt，接着用 title 写标题，用 dateFormat 说明日期写法（比如 YYYY-MM-DD），用 section 给任务分组，每个任务一行：任务名，冒号，然后是 id、开始、持续时间，开始可以写日期，也可以写 after 加另一个任务的 id。本站编辑器暂时只出流程图和时序图，甘特图只在页面的「其它图类型语法要点」里给最小示例，可以复制到支持它的平台里用。
在 Markdown 文档里怎么插入 Mermaid 图？
在 Markdown 里写一个代码块，开头那行写三个反引号加 mermaid，下面写 Mermaid 代码，最后再写三个反引号收尾。支持 Mermaid 的平台会把这个代码块画成图，不支持的会原样显示成代码。Markdown 本身的写法可以查本站的 Markdown 语法速查表，想边写边看效果，用 Markdown 在线编辑器。
流程图第一行该写 flowchart 还是 graph？
两个现在效果一样，graph 是老版本留下来的写法，flowchart 是新写法，后来加的功能多半只有 flowchart 才有，所以新写的图建议用 flowchart。方向用 TD 或 TB 都是从上到下，LR 从左到右，RL 从右到左，BT 从下到上，照官方文档写成大写；本站编辑器小写也认，别的地方不一定认。
本页和 Mermaid 官方文档比，有什么不同？
官方文档（包括中文翻译）按图类型一章一章写，最全，适合系统学习，也是新语法的最终出处。本页的定位是查：把流程图和时序图最常用的写法压在一张表里，每一行都带现场画出来的效果，能按类别筛、按关键字搜、一键复制、一键到编辑器里打开，还单独列了新手最容易踩的报错。图是本页自带的引擎画的，和官方排版会有细微差别，有些官方写法本站编辑器暂时画不出来，页面里单独列了出来。
