使用Code Chart绘制流程图

Code Chart介绍

Code Chart是一个基于 Javascript 的图表和图表工具，它基于 markdown 语法来简化和加速生成流程图的过程，也不止于生成流程图。

工具地址：https://www.iodraw.com/codechart

 

图形

头部用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[文字]

流程图方向

graph 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

箭头样式

a --> 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

子图

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
时，可以设置子图之间的边的连接。

%% Bata:With the graphtype flowcharts it is also 	possible to set edges to and from subgraphs as in the flowchart below.
 
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