MD|如何在md中加个流程图

792 阅读2分钟

身为一名程序员,那么记笔记的方式也一定要很程序员

现在我的文件夹中已经基本上都是md文档了

在我看来,md文档有以下的优点:

  • 简洁:看起来清清爽爽
  • 丰富:用起来丰富多彩

那么,这就够了,当然思维导图还是用xmind之类的专门工具

但是一些基本的小布局用起来是轻轻松松:

  • 画个表格
  • 多级标题
  • 加个图片
  • 加块代码
  • 跳个链接
  • 字体样式
  • ...

此外,最近我发现了一个新的小功能---我们还可以用它画流程图

起初是我在记笔记的时候需要画个流程图,最初我是打算用processon之类画一个然后截图的,但是我那个流程图很简单,就几个框框,几条线,我还要画图,截图,上传...一大堆事情,实在是麻烦,就随手百度了md 流程图关键字,在过滤了一大堆广告之后(吐槽一下百度广告是真的多!!!),发现md也是可以画流程图的,就是用到了mdmermaid的支持

又找到了一个关键词mermaid,继续搜~官方文档

看了一下文档挺简单的,比葫芦画瓢就好了

  • flowchart(流程图)

    代码:
    graph LR
        --- 排布方向 ---
        TB:从上往下
        TD:从上往下
        BT:从下往上
        RL:从右往左
        LR:从左往右
        --- 节点样式 ---
        a[方框]
        b(圆角框)
        c((圆框))
        d{判断框}
        --- 连线样式 ---
        a --> b         :实线带箭头
        a --- b         :实线
        a -.-> b        :虚线带箭头
        a -.- b         :虚线
        a --text--- b   :带文字1
        a -->|text| b   :带文字2
    示例:

微信截图_20210726151030.png

当然,能表示的图类型还有很多,比如:

  • sequenceDiagram时序图
  • classDiagram类图
  • stateDiagram:状态图
  • erDiagram:ER图
  • gantt: 甘特图
  • pie:饼图
  • requirementDiagram: 需求图
  • ......

更多好玩的可以大家一起摸索哦~