markdown 里使用流程图

最新推荐文章于 2024-10-11 14:34:39 发布

renz2048

最新推荐文章于 2024-10-11 14:34:39 发布

阅读量256

点赞数

文章标签： markdown

本文链接：https://blog.youkuaiyun.com/rz191162792/article/details/104726393

版权

本文详细介绍了在 Markdown 中如何使用流程图和序列图。流程图部分讲解了定义元素，包括标签、类型和内容，以及如何定义执行走向。序列图部分则涉及定义元素如路径和note，并给出了实例。此外，还提到了mathjax的使用情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. flowchart

流程图语法分为两部分：

定义流程图元素
定义流程图的执行走向（用来连接流程图元素）

1.1 定义元素

tag=>type: content

说明

tag 流程图的标签，用来在定义执行走向的时候指定下一步到达何处，可理解为名字
type 确定标签类型，表示这个标签的种类是开始结束，输入输出还是判断等
content 流程图文本框内的描述内容

标签类型

start ：开始 st=>start: 开始
end ：结束 e=>end: 结束
operation ：操作、步骤、执行说明 op1=>operation: come to eat
subroutine ：子步骤 sb1=>subroutine: go back
condition ：条件选择 cond=>condition: is it rain?
inputoutput ：输入输出

1.2 定义执行走向

使用 -> 连接两个元素(标签)
对于 condition 类型，有 cond(yes) 和 cond(no) 两种控制走向的语法
其他元素也可以控制分支方向，默认 向下 ，使用 right 向右，例 sb1(right)

1.3 实例

源代码：标签 mermaid

flowchat
st=>start: Home
e=>end: Restaurant
op1=>operation: get out to eat
cond=>condition: is it rain?
sb1=>subroutine: go back and try again
op2=>operation: arrive
st->op1->cond
cond(yes)->op2->e
cond(no)->sb1(right)->op1

2. sequence

sequence语法仅一种格式，即A到B的路径，外加可控制的note

2.1 定义元素

在这里插入图片描述

路径：包含两种线型和两种箭头，共四种组合方式
note：旁注

2.2 实例

源代码：标签 mermaid

sequenceDiagram
Title: Here is a title
A->>B: Normal line
B-->>C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
Note left of A: Note to the\n left of A
Note right of A: Note to the\n right of A
Note over A: Note over A
Note over A,B: Note over both A and B