不用点点点,编写一些代码，生成想要的流程图，可以提高工作效率。应该修改代码的效率，远远要高于鼠标点点点。
流程图 flowcharts
-
graph方向类型
- TB - top bottom 从上到下 TD和TB一样
- BT - bottom top 从下到上
- RL - right left 从右到左
- LR - left right 从左到右
-
node 节点类型
graph LR
node
id[text in the box]
id1(text in the round edges box)
id2((text in the circle))
id3>text in the label]
id4{text in the rhombus box}
node --> id1
id1 --> id2
id2 --> id3
id3 --> id4
node --> id
-
link 线条类型
<>左右箭头，|text|在link上加文字， --- 实线，=== 粗线， -.-点线
- A --> B 带箭头的线条
- A --- B 不带箭头，实线
- C --text in the link --- B 线条上的文字
- D ---|text on the link| B 带文字的线条，同上
- E -- text onlink arrow --> B 带箭头的线条，同时线条上有文字
- E --->|text on linkarrwo|B 同上
- F -.-> B 点线带箭头
- F -.- B 点线,不带箭头
- F -.-|text|Note
- F -.text.-Note
- N1 ==> N2 粗线
-
N3 ==>|text|N4
- 特殊字符
- 如果想输出特殊字符，比如( [ 等, 要用双引号
- Node[“this is (txxt)”] 用双引号把内容包起来，这样就能输出括号等特殊字符了。
- 同时双引号内的html实体会被转义输出,如#quot;会转义为” #9829;会转义为一个心形
-
subgraphs 子图
subgraph title
graph definition
end
子图demo
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
- node和link的样式
- link没有id，所以按照我们定义的顺序来标识link,第一个为0
- node节点的大小，可以通过width和height来设置
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px,width:100px,height:50px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
linkStyle 1 stroke:#ff3,stroke-width:4px;
如何把mermaid集成到jekyll中。
-
下面的方法在本地可以，但是github不可以
-
插件的文档(https://github.com/jasonbellamy/jekyll-mermaid)有些问题，没有更上jekyll的更新,也是在这里踩坑了。
- download mermaid.min.js and mermaid.min.js.map to /assets/js/vendor/
- https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js
- https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js.map
- then edit the _config.yml
- bundle install
- jekyll build
_config.yml 修改内容 plugins: ... \- jekyll-mermaid mermaid: src: /assets/js/vendor/mermaid.min.js
-
-
把mermaid集成到jekyll之中，不使用插件(github可用)
- download mermaid.min.js and mermaid.min.js.map to /assets/js/vendor/
- https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js
- https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js.map
- 在文档中引入mermaid.min.js (或者全局引入用)
- <script src=”https://helloworldcoding.github.io/assets/js/vendor/mermaid.min.js”></script>
-
在md文档中，编写如下代码就可以实现mermaid流程图,previm也能正常显示
<div class="mermid" > graph TB A[text] .... </div> 或者用一个mermaid的liquid包裹mermaid的代码
