Markdown + Mermaid

error404
4,669 阅读5分钟

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
avatar
文章
阅读
粉丝