Code Chart介绍
Code Chart是一个基于 Javascript 的图表和图表工具，它基于 markdown 语法来简化和加速生成流程图的过程，也不止于生成流程图。
图形
头部用graph
或flowchart
关键字来声明流程图。两者用法基本一致，使用graph
声明时，链接线上的文字会附带白底；使用flowchart
声明时，连接线更平滑，并且似乎可以支持更新的语法。更多区别详见源码，以下内容不加区分地使用两种声明方式。
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]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]
一个节点（默认）
graph LR
id
带有文字的节点
graph LR
id[文字]
流程图方向
方向代码从上到下TB/TD从下到上BT从左到右LR从右到左RLgraph TB
start --> stop
graph LR
start --> stop
节点样式
矩形
id[text]
圆角矩形
id(text)
体育场形
id([text])
子程序形
id[[text]]
圆柱形
id[(text)]
圆形
id((text))
不对称矩形
id>text]
菱形
id{text}
六边形
id{{text}}
平行四边形
id1[/text/]
id2[\text\]
梯形
id[/text\]
含特殊字符
含有()[]{}
等特殊字符时，可用双引号""
包裹处理。
id["[特殊字符]"]
小结
节点之间的连接
连接线样式
连接线样式命令实线—虚线-.-加粗实线===a---b
a-.-b
a===b
箭头样式
箭头样式命令右键头–>圆形箭头–o叉形箭头–x双向箭头<–>
o–o
x–xa --> b
a --ob
a --x b
a <--> b
a o--o b
连接上的文本
a-->|text|b
连接长度
a1---a2
b1----b2
a---->b
链式连接
a --- b1 & b2--- c
a1 & a2 --- b1 & b2 & b3
示例
graph TD
A[Start] --> B{Is it?} -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
节点上的超链接
可以将单击事件绑定到节点，单击可以使 javascript 回调或将在新浏览器选项卡中打开链接。
graph LR;
A-->B;
B-->C;
click A "http://www.github.com" _blank
click B "http://www.github.com" "Open this in a new tab" _blank
typora对Interaction
支持有限，更多内容可以查看mermaid官方文档。
子图
graph TB
subgraph one
a1-->a2
subgraph subone
a11-->a21
end
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2
one-->two
测试功能：子图连接
当图像类型选择flowchart
时，可以设置子图之间的边的连接。
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
子图的方向
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
注释
注释以%%
开头并且独占一行
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
节点样式
可以对节点应用特定样式，例如较粗的边框或不同的背景颜色。
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
更多样式参考可以Code Chart官方文档。
附录：相关链接
-
工具地址: https://www.iodraw.com/codechart
-
官方文档: https://www.iodraw.com/codechart/tutorial/zh/flowchart.html