推荐画流程图的工具

当然也是需要结合 markdown && vscode 使用

markdown 流程图，需要安装扩展

Markdown Preview Mermaid Support

支持流程图、饼状图、序列图、类图、状态图、甘特图、ER 图

https://mermaid-js.github.io/mermaid/

5 种流程图方向
TB 从上到下 = TD
BT 从下到上
RL 从右到左
LR 从左到右

5 种节点图形

节点	说明
id[txt]	矩形
id4(txt)	圆角矩形
id3>txt]	不对称的矩形
id1{txt}	菱形
id2((txt))	圆形

9 种节点连接

连线	说明
–>	实现箭头
—	实线连接
-.-	虚线连接
-.->	虚线箭头指向
==>	加粗箭头指向
– 描述 —
– 描述 –>	支持`–>
-. 描述 .->
== 描述 ==>

流程图

1
2
3

<!-- mermaid -->
graph TD
  step1[开始] --> step2{判断}

子流程图

<!-- mermaid -->
graph LR
    c1-->a2
    subgraph 子内容区域
        a1-->a2
    end

自定义样式

<!-- mermaid -->
graph LR
    s1(Start)-->s2(Stop)
    style s1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
    style s2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5

示例

<!-- mermaid -->
graph LR
    start[开始] --> input[输入A,B,C]
    input --> conditionA{A是否大于B}
    conditionA -- YES --> conditionC{A是否大于C}
    conditionA -- NO --> conditionB{B是否大于C}
        conditionC -- YES --> printA[输出A]
        conditionC -- NO --> printC[输出C]
        conditionB -- YES --> printB[输出B]
        conditionB -- NO --> printC[输出C]
    printA --> stop[结束]
    printC --> stop
    printB --> stop

更好的推荐，vscode - drawio 插件，当然drawio也有在线网页版本

js下载速度很慢啊

hexo中使用mermaid

step1

1	npm install -S hexo-filter-mermaid-diagrams

step2

# _config.yml最底部加上
# 支持流程图mermaid
mermaid: ## mermaid url https://github.com/knsv/mermaid
    enable: true # default true
    version: "8.6.0" #
    options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    # startOnload: true  // default true

step3

1 2	<!-- next主题默认已配置 --> 在_data/next.yml或者.next/_config.yml上找到Mermaid并启用

step4

1 2	没遇到写footer.swig的不需要修改刷新页面，等待加载

step5

样式问题修改

如网页渲染的classDiagram的font-size搜索Sample stylesheet

vs code自定义样式表，设置-Markdown: Styles-项目文件夹中添加css，如source\\_data\\styles_markdown.css

如graph可以用style id1 fill:#f9f

graph LR
    c1-->a2
    subgraph 子内容区域
        a1-->a2
    end

            sequenceDiagram

sequenceDiagram
  participant Alice
  participant Bob
  Alice->John: Hello John, how are you?
  loop Healthcheck
      John->John: Fight against hypochondria
  end
  Note right of John: Rational thoughts 
prevail...
  John-->Alice: Great!
  John->Bob: How about you?
  Bob-->John: Jolly good!