markdown 手绘流程图（mermaid使用教程）

markdown 手绘流程图（mermaid使用教程）

一、前言

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码，因此安全许多。

官方文档

二、使用说明

graph LR;
	L11(Mermaid)-->FX(方向)
        FX-->TB("TB 从上到下")
        FX-->BT("BT 从下到上")
        FX-->RL("RL 从下到上")
        FX-->LR("LR 从下到上")
	L11(Mermaid)--> JD(节点)
		JD-->JD01["id[矩形节点]"]
		JD-->JD02("id(圆角矩形节点)")
		JD-->JD03(("id((圆形节点))"))
        JD-->JD04>"id>右向旗帜状节点]"]
        JD-->JD05{"id{菱形节点}"}
        JD-->JD06{{"id{{六角形}}"}}
        JD-->JD07[/"id[/平行四边形/]"/]
        JD-->JD08[\"id[\右斜平行四边形\]"\]
        JD-->JD09[/"id[/梯形\]"\]
        JD-->JD10[\"id[\倒梯形/]"/]
        JD-->JD10[\"id[\倒梯形/]"/]
        JD-->JD11[["id[[text box]]"]]
        JD-->JD12[("id[(database)]")]
	L11(Mermaid)--> LX(连线) 
		LX-->LX01("--> 添加尾部箭头")
		LX---LX02("--- 不添加尾部箭头")
		LX-->LX03("--> 单线")
		LX--文字-->LX04("--text-- 单线上加文字")
		LX==>LX05("== 粗线")
		LX==文字==>LX06("==text== 粗线加文字")
		LX-.->LX07("-.- 虚线")
		LX-.文字.->LX08("-.text.- 虚线加文字")
	L11(Mermaid)--> ZY(转义及特殊字符)
        ZY-->ZY01("实体使用双引号包裹，双引号使用#35; #quot;")
        ZY-->ZY02("特殊字符#9829;")

注意：下面不是图片，可以通过markdown编辑器随时修改！

参考：

Mermaid 实用教程

word2016流程图箭头不垂直_快速上手mermaid流程图，附思维导图和示例讲解