Typora——如何画流程图 | mermaid-js

前言

画图之前一直使用的是processon,奈何文件数不够使用,所以来学习一波mermaid-js

github: https://github.com/mermaid-js/mermaid
docs: https://mermaid-js.github.io/mermaid/#/

内容

流程图

方向

  • TB 从上到下
    Typora——如何画流程图 | mermaid-js

  • TD 从上到下
    Typora——如何画流程图 | mermaid-js

  • BT 从下到上
    Typora——如何画流程图 | mermaid-js

  • RL 从右到左
    Typora——如何画流程图 | mermaid-js

  • LR 从左到右
    Typora——如何画流程图 | mermaid-js

节点形状

  • 圆角节点
    Typora——如何画流程图 | mermaid-js

  • 椭圆节点
    Typora——如何画流程图 | mermaid-js

  • 子程序节点
    Typora——如何画流程图 | mermaid-js

  • 圆柱体节点
    Typora——如何画流程图 | mermaid-js

  • 圆形节点
    Typora——如何画流程图 | mermaid-js

  • 燕尾式节点
    Typora——如何画流程图 | mermaid-js

  • 棱形节点
    Typora——如何画流程图 | mermaid-js

  • 六边形节点
    Typora——如何画流程图 | mermaid-js

  • 平行四边形节点
    Typora——如何画流程图 | mermaid-js

  • 反平行四边形节点
    Typora——如何画流程图 | mermaid-js

  • 梯形节点
    Typora——如何画流程图 | mermaid-js

  • 倒梯形节点
    Typora——如何画流程图 | mermaid-js

线条形状

  • 直线
    Typora——如何画流程图 | mermaid-js

  • 文本线
    Typora——如何画流程图 | mermaid-js
    Typora——如何画流程图 | mermaid-js

  • 箭头线
    Typora——如何画流程图 | mermaid-js

  • 加箭头的文本线
    Typora——如何画流程图 | mermaid-js
    Typora——如何画流程图 | mermaid-js

  • 虚线
    Typora——如何画流程图 | mermaid-js

  • 加文本的虚线
    Typora——如何画流程图 | mermaid-js

  • 粗线
    Typora——如何画流程图 | mermaid-js

  • 加文本的粗线
    Typora——如何画流程图 | mermaid-js

  • 综合案例
    Typora——如何画流程图 | mermaid-js

文本中添加特殊字符

针对要在文本上添加特殊字符,只需要将文本内容放在双引号中即可

Typora——如何画流程图 | mermaid-js

自定义区域

Typora——如何画流程图 | mermaid-js
Typora——如何画流程图 | mermaid-js

自定义节点样式

Typora——如何画流程图 | mermaid-js

上一篇:用Typora写Mrakdown笔记


下一篇:Typora的Markdown语法学习