Mark Down绘图语法

Posted 2020-08-15

以下语法在网易云笔记中测试通过。 

绘图的标志位是三个单引号```  开始  ``` 结尾 ，注意是英文半角的单引号，以下的字符也是英文半角状态下的才正确。

搜狗输入法的要特别注意，记得把shift 切换中英文的快捷键改了，否则痛苦死。

---

 

以下是MD代码

 

```

graph LR
a((A这是圆的))-.-> b
b{B这是菱形}==>|插入的文本|c
c==>F>这是旗型]
节点-- text --> 节点B
```

---

 

graph --关键字不解释
TB -- top to bottom 从上到下
BT -- bottom to top 从下到上
LR -- left to right 从左到右
RL -- right to left 从右到左

 

节点 -->|连接线上的字| 节点 

-.-> 虚线

--- 无箭头的线
== 粗体的线

>text ] 旗型
[text] 矩形
(text) 圆角矩形
((text)) 圆形
{text} 菱形

---

 

如果遇到特殊字符了就要输入引号来标记

例如

```
graph LR
A["A 领导(冒号) :#quot;"] -->B["A一颗红心:#9829;"]

```

---

 

 

接下来是子报表  就是多了关键词 subgraph 

 

```
graph TB
　　subgraph one
　　　　a1-->a2
　　end
　　subgraph two
　　　　b1-->b2
　　end
　　subgraph three
　　　　c1-->c2
　　end
　　　　c1-->a2
　　　　a1==>b2
　　　　b1-.->c2

```

点击节点后的回调事件

<script>
var callback = function(){
alert(‘回调函数被触发咯。‘);
}
<script>

```
graph LR;
A-->B;
click A callback "测试回调函数"
click B "http://www.sci99.com" "点击会跳转到网页"

```

调用CSS样式
```
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;
```

```
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]

```