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

本文主要介绍了如何快速上手 Mermaid 流程图,不用贴图上传也不用拖拉点拽绘制,基于源码实时渲染流程图,操作简单易上手,广泛被集成于主流编辑器,包括 markdown 写作环境.

通过本节内容你将学习到以下主要内容:

• 了解什么是流程图以及Mermaid流程图;
• 掌握并能记住如何绘制Mermaid流程图;
• 了解 Gitbook 写作环境的相关集成插件.

mermaid-flow-chart-simplemindmap-preview.png

什么是Mermaid流程图

关键词

- 项目地址- 在线编辑- 官方文档

千言万语不如一张图,使用图形展示事物处理流程的图形称之为流程图.

Mermaid是一个基于 Javascript 的图解和制图工具.它基于 markdown 语法来简化和加速生成流程图的过程,也不止于生成流程图.

源码

graph TD  A[Christmas] -->|Get money| B(Go shopping)  B --> C{Let me think}  C -->|One| D[Laptop]  C -->|Two| E[iPhone]  C -->|Three| F[fa:fa-car Car]

效果

mermaid-flow-chart-letmethink-mermaid.png

• 项目地址: https://github.com/mermaid-js/mermaid
• 在线编辑: https://mermaidjs.github.io/mermaid-live-editor/
• 官方文档: https://mermaid-js.github.io/mermaid/#/flowchart

Mermaid流程图快速入门

布局方向

关键词

+ TB+ BT+ LR+ RL

mermaid-flow-chart-layout-simplemindmap.png

流程图布局方向,由四种基本方向组成,分别是英文单词: top(上), bottom(下),left(左)和 right(右).其中可选值: TB (从上到下),BT (从下到上),LR (从左往右)和 RL (从右往左)四种.

核心: 仅支持上下左右四个垂直方向,是英文单词首字母大写缩写.

• TB

从上到下: from Top to Bottom

源码

graph TB    Start --> Stop

效果

mermaid-flow-chart-layout-simplemindmap.png

• BT

从下到上: from Bottom to Top

源码

graph BT    Start --> Stop

效果

mermaid-flow-chart-layout-simplemindmap.png

• LR

从左往右: from Left to Right

源码

graph LR    Start --> Stop

效果

mermaid-flow-chart-LR-mermaid.png

• RL

从右往左: from Right to Left

源码

graph RL    Start --> Stop

效果

mermaid-flow-chart-RL-mermaid.png

形状

关键词

- 节点形状    + [矩形]        - [[暂不支持]]        - [(圆柱)]        - [{暂不支持}]        - [/平行四边形/]        - [平行四边形]        - [/梯形]        - [梯形/]    + (圆角矩形)        - ((圆形))        - ([体育场])        - ({暂不支持})    + {菱形}        - {
   {六边形}}        - {[暂不支持]}        - {(暂不支持)}    + >不对称矩形]

mermaid-flow-chart-shape-simplemindmap.png

流程图节点形状,默认支持矩形和圆两种基本形状,包括基本形状的简单变体,支持嵌套组合形式,其中 [] 表示矩形,() 表示圆弧,{} 表示尖角(窃以为 <> 更适合)等等.

核心: 最外层代表主形状,内层辅助修饰.

<