阅读 103

Markdown + Mermaid

markdown 使用会碰到有需要图表表达的情况,通过 mermaid 能实现大多数情况下的支持,这里建议通过 Typoa 去上手体验。

基于Mermaid官方文档,归纳了 流程图时序图,其他的可能后续补充吧。

Markdown相关写法请参考 Markdown 最全语法, 此处不再赘述。

Mermaid相关参考 :Mermaid 实用教程 , mermaid官方文档

Mermaid在Markdown中写法如下,其他都是基于此基础

```mermaid
// markdown中使用
```
复制代码

流程图

流程图都是由节点,几何图形,箭头或者线条组成,Mermaid定义了相关语法规范。首先要声明,通过 graph 或者 flowchart
```mermaid
graph 指定方向
    图表中其他语句...
```
复制代码
  • 图表方向(箭头流转方向)

    语句说明
    TB;TD从上到下;至上而下
    BT从下往上
    RL从右到左
    LR从左到右
  • 节点定义

    流程图中的每个几何图形节点,可以直接设置 id 默认对应矩形,id说明文本,也可以自定义文本id[写容器说明文字]
    语句说明
    id[文字]矩形
    id(文字)圆角矩形
    id([文字])体育场形(圆头矩形)
    id[[文字]]矩形相叠(长矩形叠稍短矩形,类似写法)
    id[(文字)]圆柱形
    id((文字))圆形
    id>文字]右向旗帜状
    id{文字}菱形
    id{{文字}}六边形
    id[/文字/]平行四边形
    id[\文字\]平行四边形 alt
    id[/文字\]梯形
    id[\文字/]梯形 alt
  • 节点链接

    语句说明
    -->箭头
    ---实线
    -- 文本 --- 或`---文本
    -- 文本 -->或 `-->文本
    -.->虚线
    -. 文本 .->虚线带文本
    ==>粗箭头
    == 文本 ==>粗箭头带文本
    graph LR
        A[(测试)] -. 文本 .-> B --> C
    
    同一行中可以声明多个链接,也可以通过 & 来表达节点依赖关系,减少代码。说明
    ==注释== 可以通过%% 开头,书写注释,将不会解析注释中的内容。
    graph LR
       A --> B --> D
       A --> C --> D
       %% 下面写法与上面等同
       a --> b & c --> d
    复制代码
    graph LR
       A --> B --> D
       A --> C --> D
       %%下面写法与上面等同
       a --> b & c --> d
    
    • 新箭头和多向箭头(测试) 说明

      flowchart 流程表支持,graph图表不支持

  • 链路长度设置

    链接长度是默认的,但是可以通过增加链接符号,去控制链接的长度,实线:- ,虚线:. ,粗线:=
    graph TD
        A[Start] --> B{Is it?};
        B -. Yes .-> C[OK];
        C -.-> D[Rethink];
        D ==> B;
        %% 增加了B到E的长度
        B -- No ----> E[End];
    复制代码
    graph TD
        A[Start] --> B{Is it?};
        B -. Yes .-> C[OK];
        C -.-> D[Rethink];
        D ==> B;
        B -- No ----> E[End];
    
  • 特殊字符 说明

    通过 "文本" 增加对破坏语法的特殊字符和转义字符 #转义字符编码; 的支持。
  • 子图 说明

    subgraph 子图名 [容器说明文字,有替代子图名显示]
        关系描述语句,可以类似与模块容器去理解
    end
    复制代码
    graph TB
        c1-->a2
        subgraph ide1 [one]
        a1-->a2
        end
    
    • 子图与子图关联和设置子图方向,只在 flowchart 支持。说明
  • 互动 说明

    通过点击事件绑定到节点上,调起回调或者链接。

    节点id
    click 节点id 地址 说明文字,可不写
    复制代码
    graph LR;
        B;
        click B "http://www.github.com" "This is a tooltip for a link"
    
  • 样式和类 说明

    • 链接样式

      可以给链接设置样式,由于链接并不像节点一样拥有id,所以要以定义的序号,从0开始,去计算链接的序列号。linkStyle 序列号 样式 样式支持 stroke:线条颜色,stroke-width:线条宽度,color:线条文本颜色;

      graph LR
         A --> B & C --> D;
         linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
      
    • 节点样式

      可以通过id或者设置类名,对节点应用特定的样式。

      • 通过id,直接设置 style id名 样式 样式支持 fill:文本背景色,stroke:线条颜色,stroke-width:线条宽度,color:文本颜色,stroke-dasharray: 实线长度 虚线长度

      • 定义一个类样式,classDef 类名 样式,将类名附加到节点 class 节点id 类名; 也可以给多个节点定义一个类名,多个节点id用 , 隔开即可;还有一种设置方式是通过 ::: 操作符附加到节点。节点id:::类名 --> B

        graph LR
            A:::someclass --> B;
            class B someclass;
            classDef someclass fill:#f96;
        

时序图 说明

时序图是一个交互图,显示了进程如何以何种顺序相互操作,用sequenceDiagram 声明。
sequenceDiagram
    参与者1 链接语句 参与者2 :消息文本
复制代码

注意避免使用 end ,可能会破坏图表,因为在脚本编写方式中有用到。如果不可避免的使用必须用 () 或者 "" 或者 [] 或者 {} 括起来。

  • 参与者 说明

    participant 声明参与者。不声明默认隐使定义,参与者顺序按语句顺序呈现,需自定义参与者顺序时,可以选择通过声明去设置。
    写法: participant 参与者 as 显示文本 ;通过 as 设置显示文本,会在显示时用设置的文本。
    sequenceDiagram
        participant John as 约翰;
        participant Alice as 爱丽丝;
        Alice->>John: Hello John, how are you?
        John-->>Alice: Great!
    
  • 链接语句

    语句说明
    ->实线无箭头
    -->无箭头的虚线
    ->>带箭头的实线
    -->>带箭头的虚线
    - x实线,最后有一个十字
    -- x尾部带有十字的虚线
    -)实线,末尾有一个开放箭头(异步)
    --)带有开放箭头的虚线(异步)
  • 处理中

    可以通过 activate 参与者 开启,deactivate 参与者 结束;也可以通过快捷符号,在链接语句后添加 + 或者 - 。同一个患者也可以设置多次,堆叠显示。

    sequenceDiagram
        Alice->>+John: Hello John, how are you?
        John-->>-Alice: Great!
        Alice->>+John: Hello John, how are you?
        Alice->>+John: John, can you hear me?
        John-->>-Alice: Hi Alice, I can hear you!
        John-->>-Alice: I feel great!
    
  • Note 便签 说明

    在时序图上添加便签去进行说明。Note 位置 参与者: 便签描述文字
    语句说明
    right of右侧
    left of左侧
    over在当中,可以横跨多个参与者
    sequenceDiagram
        Alice->John: Hello John, how are you?
        Note over Alice,John: A typical interaction
    
  • Loop 循环
    loop 循环条件描述文字
        需要循环的语句
    end
    复制代码
    sequenceDiagram
        loop 如果没有回答
           Alice->John: Hello John, how are you?
        end
        John-->Alice: Great!
       
    
  • 判断

    可以用来表达不同场景下的不同情况。
    alt 条件描述1
        此条件下的反馈
    else 条件描述2
        ...
    else ...
        ...
    end
    opt 条件描述
        分支描述语句
    end
    复制代码
文章分类
前端
文章标签