• 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-4px;
    style id2 fill:#ccf,stroke:#f66,stroke-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]

    ```

     

  • 相关阅读:
    导航属性
    提笔忘字
    JavaScript学习总结(一)——闭包、对象、函数
    CSS3新特性(阴影、动画、渐变)
    图片轮播(也可以通过点击下标播放对应的图片)
    CSS3与页面布局学习总结——多种页面布局
    多种居中方法
    二级菜单
    无间隙轮播图片
    模块和程序处理
  • 原文地址:https://www.cnblogs.com/sycdirdir/p/5987975.html
Copyright © 2020-2023  润新知