首页 > 代码库 > Mark Down绘图语法

Mark Down绘图语法

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

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

搜狗输入法的要特别注意,记得把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]

```

 

 

 

Mark Down绘图语法