| Markdown 流程图绘制详解 | 您所在的位置：网站首页 › 上海买房流程图详解 › Markdown 流程图绘制详解 |
Markdown 流程图绘制详解
|
✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向） 🐳博客主页： 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN 🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。 🔥如需转载请参考【转载须知】 文章目录 一、前言二、基本语法2.1 流程方向2.2 定义元素 三、连接线的种类3.1 连接线的形状3.2 新箭头类型3.3 带文字连接线3.4 连接线样式3.5 交互语法3.6 串联连接3.7 视图分组3.8 使用场景及实例 四、节点的形状4.1. 节点的语法4.2. 形状图形表4.3 形状介绍 五. 其他5.1 注解5.2 转义字符 五. 总结 一、前言Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。 Mermaid 是一个方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。 本节将重点介绍如何通过 Mermaid 绘制「流程图」。 流程图（flow chart）是体现封闭系统运动状态的有效展示形式，可以让管理者、实现者清晰的认识系统运转流程，也可以直观的描述工作过程。 二、基本语法基本的流程图包含：流程图布局方向、几何图形和连接线三个部分组成。以下是一个简单的Markdown流程图示例，采用Mermaid语法： ```mermaid flowchart LR 开始 --> 结束 ```说明： graph LR;：指定这是一个有向图。节点以及节点之间的关系通过-->来表示。方框中的文字表示节点的名称，例如A[开始]表示开始节点。决策节点后接两条分支线，分别表示决策的两个选项。流程图的开始和结束通过特殊节点开始和结束表示。 2.1 流程方向 符号/术语含义TB /TD (两者相同)从上到下（Top to Bottom）的流程方向BT从下到上（Bottom to Top）的流程方向LR从左到右（Left to Right）的流程方向RL从右到左（Right to Left）的流程方向HZ水平方向（Horizontal）的流程方向VT垂直方向（Vertical）的流程方向 2.2 定义元素 元素类型代表意义形状start开始圆角矩形end结束/完成圆角矩形operation流程操作普通矩形subroutine预定子流程双边线矩形condition条件判断菱形inputoutput输入输出平行四边形 三、连接线的种类不同种类的连接线可以表示不同类型的关系，例如，无方向的连接线可用来表示相关性、有方向的连接线可以表示数据流向或者节点间的依赖关系；用实线表示强关联、用虚线表示弱关联等待。 3.1 连接线的形状线的形状 效果如下： ||加标签 指我干啥 直线 直线箭头 虚线 虚线箭头 粗直线 粗箭头 双竖线加标签对于点或粗链接，要添加的字符是等号或点，如下表所示： 长度1 个23无向------------普通箭头-->--->---->加粗============加粗箭头==>===>====>点状-.--..--...-点状箭头-.->-..->-...-> 3.2 新箭头类型以下是支持的新类型的箭头： ```mermaid flowchart LR A --o B B --x C ``` A B C多方向箭头： ```mermaid flowchart LR A o--o B B C C x--x D ``` A B C D 3.3 带文字连接线带文字连接线可以在连接线上增加连接线的注释。注释有两种写法： 写在末尾：||符号，只需要在连接线符号末尾增加—>|文字|即可展示。 写在中间：类似—文字—>、-. 文字 .->，等于是重复连接符号，前半部分是定义上一个图形到文字的连接线样式，后半部分是定义文字到图形的连接线样式。 介绍语法不带描述文字A--描述---B带描述的箭头A--描述-->B带描述的虚线连指向A-.描述.->B带描述的加粗箭头指向A==描述==>B末尾增加文字A--->|描述|B 3.4 连接线样式可以对连接线进行样式设置。例如，您可能希望对流程中倒退的连接线进行样式设置。因为连接不像节点那样可以设置 id，所以需要其他确定连接应附加到哪种样式的方法。 语法示例 **连接线样式** 在 linkStyle 语句中定义的样式 ```mermaid flowchart LR; A-->B; linkStyle 0 stroke:#ff3,stroke-width:4px,color:red; ``` **节点样式** 可以为节点定义指定的样式，例如更粗的边框或不同的背景色： ```mermaid flowchart LR A-->B; style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` **类 Class** 比每次定义样式更方便的是定义一个样式 class，并将该 class 添加到不同的节点上。 ```mermaid flowchart LR A:::someclass --> B classDef someclass fill:#f96; ```效果如下： 连接线样式 在 linkStyle 语句中定义的样式 A B节点样式 可以为节点定义指定的样式，例如更粗的边框或不同的背景色： A B类 Class 比每次定义样式更方便的是定义一个样式 class，并将该 class 添加到不同的节点上。 A B 3.5 交互语法可以在节点上定义点击时跳转到超链接。 语法示例 **跳转链接交换** 超链接在同一浏览器选项卡/窗口中打开。可以通过在 click 定义中添加链接目标来更改此设置 （支持 _self，_blank，_parent 和 _top）： ```mermaid flowchart LR; 百度-->知乎; click A "http://www.baidu.com/" _blank click B "http://www.zhihu.com/" _blank ```效果如下： 跳转链接交换 超链接在同一浏览器选项卡/窗口中打开。可以通过在 click 定义中添加链接目标来更改此设置 （支持 _self，_blank，_parent 和 _top）： 百度 知乎 3.6 串联连接在Mermaid中，可以使用一行代码声明多个连接或节点之间的关系，这使得描述依赖关系变得非常简洁。以下是一些示例： 语法示例 1. **多个连接关系：** ```mermaid flowchart LR A -- 文字 --> B -- 文字 --> C ``` 2. **多个节点连接：** ```mermaid flowchart LR a --> b & c--> d ``` 3. **简洁的依赖关系声明：** ```mermaid flowchart TB A & B--> C & D ```效果如下： 多个连接关系： 文字 文字 A B C 多个节点连接： a b c d 简洁的依赖关系声明： A B C D这种简洁的语法提供了更清晰的流程图表示方式。然而，请注意，过于紧凑的表示方式可能会降低Markdown的可读性。在选择使用这种语法时，请确保图表仍然易于理解。 基本语法等价表示 虽然一行代码可以表示多个连接关系，但是等价的基本语法会更加详细。以下是等价的基本语法表示： 语法示例 ```mermaid flowchart TB A --> C A --> D B --> C B --> D ```效果如下： A C D B这四行代码与前述一行代码具有相同的效果。在选择使用哪种语法时，请根据图表的复杂性和可读性做出明智的决策。 3.7 视图分组mermaid支持将图的一部分包裹起来，形成子图，效果如下： 语法示例 **子图** ```mermaid flowchart LR; subgraph 第一个子图 测试数据1 --> 指我干啥 end subgraph 第二个子图 测试数据2 --> 你也指我干啥 end ``` **多子图流转** 在多个子图中，可以在子图之间设置连接线，如下面的例子所示： ```mermaid flowchart TB c1-->a2 subgraph A a1-->a2 end subgraph B b1-->b2 end subgraph C c1-->c2 end A --> B C --> B B --> c2 ``` **子图的方向** 在多个流程图中，您可以使用方向语句来设置子图将呈现的方向，就像下面的例子所示： ```mermaid flowchart LR subgraph TOP direction TB subgraph B1 direction RL i1 -->f1 end subgraph B2 direction BT i2 -->f2 end end A --> TOP --> B B1 --> B2 ```效果如下 子图 第二个子图 你也指我干啥 测试数据2 第一个子图 指我干啥 测试数据1多子图流转 在多个子图中，可以在子图之间设置连接线，如下面的例子所示： C A c2 c1 B b2 b1 a2 a1子图的方向 在多个流程图中，您可以使用方向语句来设置子图将呈现的方向，就像下面的例子所示： TOP B1 f1 i1 B2 f2 i2 A B 3.8 使用场景及实例流程图常用于项目的需求分析和设计阶段，也较常出现于程序使用手册中。 多组合流程 语法示例 ```mermaid flowchat st=>start: Start :>https://amwiki.xf09.net[blank] e=>end: End :>https://amwiki.xf09.net[blank] op1=>operation: My Operation op2=>operation: Stuff sub1=>subroutine: My Subroutine cond=>condition: Yes or No? :>https://amwiki.xf09.net[blank] c2=>condition: Good idea io=>inputoutput: catch something... st->op1(right)->cond cond(yes, right)->c2 cond(no)->sub1(left)->op1 c2(yes)->io->e c2(no)->op2->e ``` Created with Raphaël 2.3.0 Start My Operation Yes or No? Good idea catch something... End Stuff My Subroutine yes no yes no闰年判断逻辑 语法示例 ```mermaid flowchat st=>start: Start i=>inputoutput: 输入年份n cond1=>condition: n能否被4整除？ cond2=>condition: n能否被100整除？ cond3=>condition: n能否被400整除？ o1=>inputoutput: 输出非闰年 o2=>inputoutput: 输出非闰年 o3=>inputoutput: 输出闰年 o4=>inputoutput: 输出闰年 e=>end st->i->cond1 cond1(no)->o1->e cond1(yes)->cond2 cond2(no)->o3->e cond2(yes)->cond3 cond3(yes)->o2->e cond3(no)->o4->e ``` Created with Raphaël 2.3.0 Start 输入年份n n能否被4整除？ n能否被100整除？ n能否被400整除？ 输出非闰年 End 输出闰年 输出闰年 输出非闰年 yes no yes no yes no冒泡排序流程图 语法示例 ```mermaid flowchart LR 执行1[i = 1] 执行2[j = 0] 执行3[i ++] 执行4["a = arr[j], b = arr[j + 1]"] 执行5[交换 a, b] 执行6[j ++] 判断1["i < n"] 判断2["j < n - i"] 判断3["a > b"] 开始 --> 执行1 执行1 --> 判断1 判断1 --Y--> 执行2 执行2 --> 判断2 判断2 --Y--> 执行4 判断2 --N--> 执行3 执行3 --> 判断1 执行4 --> 判断3 判断3 --N--> 判断2 判断3 --Y--> 执行5 执行5 --> 执行6 执行6 --> 判断2 判断1 --N--> 结束 ```效果如下 Y Y N N Y N i = 1 j = 0 i ++ a = arr[j], b = arr[j + 1] 交换 a, b j ++ i < n j < n - i a > b 开始 结束 四、节点的形状 4.1. 节点的语法在 Mermaid 中可以使用一些基本符号定义节点的形状，例如：圆角形、跑道形、气缸形、非对称形状、菱形、六角形、平行四边形、梯形。 语法示例 ```mermaid flowchart TB; A(圆角形节点) B[矩形节点] C((圆形节点)) D[(圆柱形节点)] E{菱形节点} ``` ```mermaid flowchart TB; F([跑道形节点]) G{{六角形节点}} H[[子程序形状]] I>非对称形节点] ``` ```mermaid flowchart TB; J[/梯形--正向\] K[\梯形--反向/] L[/平行四边形--右倾/] M[\平行四边形--左倾\] ```效果如下： 圆角形节点 矩形节点 圆形节点 圆柱形节点 菱形节点 跑道形节点 六角形节点 子程序形状 非对称形节点 梯形--正向 梯形--反向 平行四边形--右倾 平行四边形--左倾 4.2. 形状图形表
在Mermaid图表中，你可以使用不同的Markdown节点形状来呈现各种元素。以下是一些常见的Markdown节点形状及其用途的简单介绍： 名称代码用法圆角形节点ID(round edge)表示起点、终点或注重循环的元素。跑道形节点ID([straight path])用于表示直线路径或流程中的步骤。圆柱形节点ID[(cylinder)]通常用于表示过程或操作，也可以用于表示立体感的元素。菱形节点ID{diamond}用于表示判断或决策的节点。圆形节点ID((circle))用于表示起点、终点或注重循环的元素。六角形节点ID{{hexagon}}用于表示起点、终点或注重循环的元素。非对称形节点ID>asymmetric]用于表示不对称的元素。梯形（正向）节点ID[/trapezoid]用于表示正向梯形形状的节点。梯形（反向）节点ID[\reversed trapezoid/]用于表示反向梯形形状的节点。平行四边形（右倾）节点ID[/parallelogram/]用于表示右倾的平行四边形。平行四边形（左倾）节点ID[\parallelogram]用于表示左倾的平行四边形。子程序形状节点ID[[subroutine shape]]用于表示子程序形状的节点。这些节点形状可以根据需要组合使用，以创建具有更多细节和表达力的Mermaid图表。 五. 其他 5.1 注解可以在流程图中输入注释，解析器将忽略该注释。注释需要在独立的行内，并且必须以 %% 开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何流程图语法： 语法示例 **注释** %%号为注释符，会将符号之后到此行结束都视为注释。 ```mermaid flowchart LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C ```效果如下： text text2 A B C 5.2 转义字符可以使用下述示例的语法转义字符： 语法示例 ```mermaid flowchart LR A["一个双引号:#quot;"] -->B["一个十进制数字表示的符号:#9829;"] ```数字为十进制，因此 # 符号可以编码为 #35;。此外，也支持使用 HTML 字符名称。 效果如下： 一个双引号:" 一个十进制数字表示的符号:♥ 五. 总结 Mermaid 为 Markdown 提供了文本转换为图形的扩展功能；Mermaid 方式渲染的流程图包含布局方向、图形节点和连接线三个基本要素；Mermaid 流程图支持多种节点形状、连接线种类，可以使流程图具有丰富的表现力。
无论是哪个阶段，坚持努力都是成功的关键。不要停下脚步，继续前行，即使前路崎岖，也请保持乐观和勇气。相信自己的能力，你所追求的目标定会在不久的将来实现。加油！ |
箭头形状 
双向箭头 
语法示例
【本文地址】