做企业网站排名,个人两字印章在线制作网站,wordpress获取所有分类,市场调研公司存在的意义Markdown高级用法——mermaid
起初是写文章#xff0c;其中有时序图流程图等一般是processOn或者draw.io画截图粘过去的#xff0c;工作中又是腾讯文档#xff0c;上面也能画图#xff0c;但假如我笔记软件用语雀之类的又要把一张图反复粘贴#xff0c;浪费内存#xff…Markdown高级用法——mermaid
起初是写文章其中有时序图流程图等一般是processOn或者draw.io画截图粘过去的工作中又是腾讯文档上面也能画图但假如我笔记软件用语雀之类的又要把一张图反复粘贴浪费内存如果统一图床又会有内外网权限问题最终我找到了解决办法谁说markdown只能写文档的语法熟练以后比直接画图还快。
参考资料
https://zhuanlan.zhihu.com/p/70261692
https://mermaid.js.org/intro/
mermaid图表可视化工具
它是一个基于 JavaScript 的图表绘制工具可呈现 Markdown 启发的文本定义以动态创建和修改图表。
他功能很强大想深入了解的同学点上面两个链接进去学习这里只介绍两种最常用的图表类型几乎所有支持Markdown语法的编辑器都支持mermaid比如我最常用的Typro(自带)obsidion(需要安装第三方插件支持)notion(原生支持)。
流程图
方向
该语句声明了流程图的方向。
这声明流程图是从上到下TD或TB的。
代码
flowchart TDStart -- Stop#mermaid-svg-LwK3fw0g5xGkaTny {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-LwK3fw0g5xGkaTny .error-icon{fill:#552222;}#mermaid-svg-LwK3fw0g5xGkaTny .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-LwK3fw0g5xGkaTny .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-LwK3fw0g5xGkaTny .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-LwK3fw0g5xGkaTny .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-LwK3fw0g5xGkaTny .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-LwK3fw0g5xGkaTny .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-LwK3fw0g5xGkaTny .marker{fill:#333333;stroke:#333333;}#mermaid-svg-LwK3fw0g5xGkaTny .marker.cross{stroke:#333333;}#mermaid-svg-LwK3fw0g5xGkaTny svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-LwK3fw0g5xGkaTny .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-LwK3fw0g5xGkaTny .cluster-label text{fill:#333;}#mermaid-svg-LwK3fw0g5xGkaTny .cluster-label span{color:#333;}#mermaid-svg-LwK3fw0g5xGkaTny .label text,#mermaid-svg-LwK3fw0g5xGkaTny span{fill:#333;color:#333;}#mermaid-svg-LwK3fw0g5xGkaTny .node rect,#mermaid-svg-LwK3fw0g5xGkaTny .node circle,#mermaid-svg-LwK3fw0g5xGkaTny .node ellipse,#mermaid-svg-LwK3fw0g5xGkaTny .node polygon,#mermaid-svg-LwK3fw0g5xGkaTny .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-LwK3fw0g5xGkaTny .node .label{text-align:center;}#mermaid-svg-LwK3fw0g5xGkaTny .node.clickable{cursor:pointer;}#mermaid-svg-LwK3fw0g5xGkaTny .arrowheadPath{fill:#333333;}#mermaid-svg-LwK3fw0g5xGkaTny .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-LwK3fw0g5xGkaTny .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-LwK3fw0g5xGkaTny .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-LwK3fw0g5xGkaTny .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-LwK3fw0g5xGkaTny .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-LwK3fw0g5xGkaTny .cluster text{fill:#333;}#mermaid-svg-LwK3fw0g5xGkaTny .cluster span{color:#333;}#mermaid-svg-LwK3fw0g5xGkaTny div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-LwK3fw0g5xGkaTny :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Start Stop 这声明流程图是从左到右定向的 ( LR)。
代码
flowchart LRStart -- Stop#mermaid-svg-OmgBxsb9wmUrxVr9 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-OmgBxsb9wmUrxVr9 .error-icon{fill:#552222;}#mermaid-svg-OmgBxsb9wmUrxVr9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-OmgBxsb9wmUrxVr9 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-OmgBxsb9wmUrxVr9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-OmgBxsb9wmUrxVr9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-OmgBxsb9wmUrxVr9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-OmgBxsb9wmUrxVr9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-OmgBxsb9wmUrxVr9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-OmgBxsb9wmUrxVr9 .marker.cross{stroke:#333333;}#mermaid-svg-OmgBxsb9wmUrxVr9 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-OmgBxsb9wmUrxVr9 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-OmgBxsb9wmUrxVr9 .cluster-label text{fill:#333;}#mermaid-svg-OmgBxsb9wmUrxVr9 .cluster-label span{color:#333;}#mermaid-svg-OmgBxsb9wmUrxVr9 .label text,#mermaid-svg-OmgBxsb9wmUrxVr9 span{fill:#333;color:#333;}#mermaid-svg-OmgBxsb9wmUrxVr9 .node rect,#mermaid-svg-OmgBxsb9wmUrxVr9 .node circle,#mermaid-svg-OmgBxsb9wmUrxVr9 .node ellipse,#mermaid-svg-OmgBxsb9wmUrxVr9 .node polygon,#mermaid-svg-OmgBxsb9wmUrxVr9 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-OmgBxsb9wmUrxVr9 .node .label{text-align:center;}#mermaid-svg-OmgBxsb9wmUrxVr9 .node.clickable{cursor:pointer;}#mermaid-svg-OmgBxsb9wmUrxVr9 .arrowheadPath{fill:#333333;}#mermaid-svg-OmgBxsb9wmUrxVr9 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-OmgBxsb9wmUrxVr9 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-OmgBxsb9wmUrxVr9 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-OmgBxsb9wmUrxVr9 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-OmgBxsb9wmUrxVr9 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-OmgBxsb9wmUrxVr9 .cluster text{fill:#333;}#mermaid-svg-OmgBxsb9wmUrxVr9 .cluster span{color:#333;}#mermaid-svg-OmgBxsb9wmUrxVr9 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-OmgBxsb9wmUrxVr9 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Start Stop StartStop
可能的流程图方向是
TB——从上到下TD - 自上而下/与自上而下相同BT——从下到上RL——从右到左LR——从左到右
按钮样式
矩形
flowchart LRid1[This is the text in the box]#mermaid-svg-03Z6tVqZrtEOv8vf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-03Z6tVqZrtEOv8vf .error-icon{fill:#552222;}#mermaid-svg-03Z6tVqZrtEOv8vf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-03Z6tVqZrtEOv8vf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-03Z6tVqZrtEOv8vf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-03Z6tVqZrtEOv8vf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-03Z6tVqZrtEOv8vf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-03Z6tVqZrtEOv8vf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-03Z6tVqZrtEOv8vf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-03Z6tVqZrtEOv8vf .marker.cross{stroke:#333333;}#mermaid-svg-03Z6tVqZrtEOv8vf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-03Z6tVqZrtEOv8vf .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-03Z6tVqZrtEOv8vf .cluster-label text{fill:#333;}#mermaid-svg-03Z6tVqZrtEOv8vf .cluster-label span{color:#333;}#mermaid-svg-03Z6tVqZrtEOv8vf .label text,#mermaid-svg-03Z6tVqZrtEOv8vf span{fill:#333;color:#333;}#mermaid-svg-03Z6tVqZrtEOv8vf .node rect,#mermaid-svg-03Z6tVqZrtEOv8vf .node circle,#mermaid-svg-03Z6tVqZrtEOv8vf .node ellipse,#mermaid-svg-03Z6tVqZrtEOv8vf .node polygon,#mermaid-svg-03Z6tVqZrtEOv8vf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-03Z6tVqZrtEOv8vf .node .label{text-align:center;}#mermaid-svg-03Z6tVqZrtEOv8vf .node.clickable{cursor:pointer;}#mermaid-svg-03Z6tVqZrtEOv8vf .arrowheadPath{fill:#333333;}#mermaid-svg-03Z6tVqZrtEOv8vf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-03Z6tVqZrtEOv8vf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-03Z6tVqZrtEOv8vf .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-03Z6tVqZrtEOv8vf .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-03Z6tVqZrtEOv8vf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-03Z6tVqZrtEOv8vf .cluster text{fill:#333;}#mermaid-svg-03Z6tVqZrtEOv8vf .cluster span{color:#333;}#mermaid-svg-03Z6tVqZrtEOv8vf div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-03Z6tVqZrtEOv8vf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} This is the text in the box 圆角矩形
flowchart LRid1(This is the text in the box)#mermaid-svg-CV4jlXFmHfyxIrJn {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-CV4jlXFmHfyxIrJn .error-icon{fill:#552222;}#mermaid-svg-CV4jlXFmHfyxIrJn .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CV4jlXFmHfyxIrJn .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-CV4jlXFmHfyxIrJn .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CV4jlXFmHfyxIrJn .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CV4jlXFmHfyxIrJn .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CV4jlXFmHfyxIrJn .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CV4jlXFmHfyxIrJn .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CV4jlXFmHfyxIrJn .marker.cross{stroke:#333333;}#mermaid-svg-CV4jlXFmHfyxIrJn svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CV4jlXFmHfyxIrJn .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-CV4jlXFmHfyxIrJn .cluster-label text{fill:#333;}#mermaid-svg-CV4jlXFmHfyxIrJn .cluster-label span{color:#333;}#mermaid-svg-CV4jlXFmHfyxIrJn .label text,#mermaid-svg-CV4jlXFmHfyxIrJn span{fill:#333;color:#333;}#mermaid-svg-CV4jlXFmHfyxIrJn .node rect,#mermaid-svg-CV4jlXFmHfyxIrJn .node circle,#mermaid-svg-CV4jlXFmHfyxIrJn .node ellipse,#mermaid-svg-CV4jlXFmHfyxIrJn .node polygon,#mermaid-svg-CV4jlXFmHfyxIrJn .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-CV4jlXFmHfyxIrJn .node .label{text-align:center;}#mermaid-svg-CV4jlXFmHfyxIrJn .node.clickable{cursor:pointer;}#mermaid-svg-CV4jlXFmHfyxIrJn .arrowheadPath{fill:#333333;}#mermaid-svg-CV4jlXFmHfyxIrJn .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-CV4jlXFmHfyxIrJn .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-CV4jlXFmHfyxIrJn .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-CV4jlXFmHfyxIrJn .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-CV4jlXFmHfyxIrJn .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-CV4jlXFmHfyxIrJn .cluster text{fill:#333;}#mermaid-svg-CV4jlXFmHfyxIrJn .cluster span{color:#333;}#mermaid-svg-CV4jlXFmHfyxIrJn div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-CV4jlXFmHfyxIrJn :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} This is the text in the box 腰圆形
flowchart LRid1([This is the text in the box])#mermaid-svg-lujjETJuOT0JJMFC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-lujjETJuOT0JJMFC .error-icon{fill:#552222;}#mermaid-svg-lujjETJuOT0JJMFC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lujjETJuOT0JJMFC .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-lujjETJuOT0JJMFC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lujjETJuOT0JJMFC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lujjETJuOT0JJMFC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lujjETJuOT0JJMFC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lujjETJuOT0JJMFC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lujjETJuOT0JJMFC .marker.cross{stroke:#333333;}#mermaid-svg-lujjETJuOT0JJMFC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lujjETJuOT0JJMFC .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-lujjETJuOT0JJMFC .cluster-label text{fill:#333;}#mermaid-svg-lujjETJuOT0JJMFC .cluster-label span{color:#333;}#mermaid-svg-lujjETJuOT0JJMFC .label text,#mermaid-svg-lujjETJuOT0JJMFC span{fill:#333;color:#333;}#mermaid-svg-lujjETJuOT0JJMFC .node rect,#mermaid-svg-lujjETJuOT0JJMFC .node circle,#mermaid-svg-lujjETJuOT0JJMFC .node ellipse,#mermaid-svg-lujjETJuOT0JJMFC .node polygon,#mermaid-svg-lujjETJuOT0JJMFC .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lujjETJuOT0JJMFC .node .label{text-align:center;}#mermaid-svg-lujjETJuOT0JJMFC .node.clickable{cursor:pointer;}#mermaid-svg-lujjETJuOT0JJMFC .arrowheadPath{fill:#333333;}#mermaid-svg-lujjETJuOT0JJMFC .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-lujjETJuOT0JJMFC .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-lujjETJuOT0JJMFC .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-lujjETJuOT0JJMFC .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-lujjETJuOT0JJMFC .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-lujjETJuOT0JJMFC .cluster text{fill:#333;}#mermaid-svg-lujjETJuOT0JJMFC .cluster span{color:#333;}#mermaid-svg-lujjETJuOT0JJMFC div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-lujjETJuOT0JJMFC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} This is the text in the box 箭头样式
实线箭头
flowchart LRA--B#mermaid-svg-0Jjus2tgeXpFWopq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-0Jjus2tgeXpFWopq .error-icon{fill:#552222;}#mermaid-svg-0Jjus2tgeXpFWopq .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0Jjus2tgeXpFWopq .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-0Jjus2tgeXpFWopq .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0Jjus2tgeXpFWopq .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0Jjus2tgeXpFWopq .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0Jjus2tgeXpFWopq .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0Jjus2tgeXpFWopq .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0Jjus2tgeXpFWopq .marker.cross{stroke:#333333;}#mermaid-svg-0Jjus2tgeXpFWopq svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0Jjus2tgeXpFWopq .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-0Jjus2tgeXpFWopq .cluster-label text{fill:#333;}#mermaid-svg-0Jjus2tgeXpFWopq .cluster-label span{color:#333;}#mermaid-svg-0Jjus2tgeXpFWopq .label text,#mermaid-svg-0Jjus2tgeXpFWopq span{fill:#333;color:#333;}#mermaid-svg-0Jjus2tgeXpFWopq .node rect,#mermaid-svg-0Jjus2tgeXpFWopq .node circle,#mermaid-svg-0Jjus2tgeXpFWopq .node ellipse,#mermaid-svg-0Jjus2tgeXpFWopq .node polygon,#mermaid-svg-0Jjus2tgeXpFWopq .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0Jjus2tgeXpFWopq .node .label{text-align:center;}#mermaid-svg-0Jjus2tgeXpFWopq .node.clickable{cursor:pointer;}#mermaid-svg-0Jjus2tgeXpFWopq .arrowheadPath{fill:#333333;}#mermaid-svg-0Jjus2tgeXpFWopq .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0Jjus2tgeXpFWopq .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0Jjus2tgeXpFWopq .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-0Jjus2tgeXpFWopq .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-0Jjus2tgeXpFWopq .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0Jjus2tgeXpFWopq .cluster text{fill:#333;}#mermaid-svg-0Jjus2tgeXpFWopq .cluster span{color:#333;}#mermaid-svg-0Jjus2tgeXpFWopq div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-0Jjus2tgeXpFWopq :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} A B 直线
flowchart LRA --- B#mermaid-svg-wHYc5Ikwl4i0h9be {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-wHYc5Ikwl4i0h9be .error-icon{fill:#552222;}#mermaid-svg-wHYc5Ikwl4i0h9be .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-wHYc5Ikwl4i0h9be .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-wHYc5Ikwl4i0h9be .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-wHYc5Ikwl4i0h9be .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-wHYc5Ikwl4i0h9be .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-wHYc5Ikwl4i0h9be .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-wHYc5Ikwl4i0h9be .marker{fill:#333333;stroke:#333333;}#mermaid-svg-wHYc5Ikwl4i0h9be .marker.cross{stroke:#333333;}#mermaid-svg-wHYc5Ikwl4i0h9be svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-wHYc5Ikwl4i0h9be .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-wHYc5Ikwl4i0h9be .cluster-label text{fill:#333;}#mermaid-svg-wHYc5Ikwl4i0h9be .cluster-label span{color:#333;}#mermaid-svg-wHYc5Ikwl4i0h9be .label text,#mermaid-svg-wHYc5Ikwl4i0h9be span{fill:#333;color:#333;}#mermaid-svg-wHYc5Ikwl4i0h9be .node rect,#mermaid-svg-wHYc5Ikwl4i0h9be .node circle,#mermaid-svg-wHYc5Ikwl4i0h9be .node ellipse,#mermaid-svg-wHYc5Ikwl4i0h9be .node polygon,#mermaid-svg-wHYc5Ikwl4i0h9be .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-wHYc5Ikwl4i0h9be .node .label{text-align:center;}#mermaid-svg-wHYc5Ikwl4i0h9be .node.clickable{cursor:pointer;}#mermaid-svg-wHYc5Ikwl4i0h9be .arrowheadPath{fill:#333333;}#mermaid-svg-wHYc5Ikwl4i0h9be .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-wHYc5Ikwl4i0h9be .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-wHYc5Ikwl4i0h9be .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-wHYc5Ikwl4i0h9be .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-wHYc5Ikwl4i0h9be .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-wHYc5Ikwl4i0h9be .cluster text{fill:#333;}#mermaid-svg-wHYc5Ikwl4i0h9be .cluster span{color:#333;}#mermaid-svg-wHYc5Ikwl4i0h9be div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-wHYc5Ikwl4i0h9be :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} A B 线上的文字
flowchart LRA-- This is the text! ---B#mermaid-svg-IQcUyBmKlCp1dmgF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-IQcUyBmKlCp1dmgF .error-icon{fill:#552222;}#mermaid-svg-IQcUyBmKlCp1dmgF .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-IQcUyBmKlCp1dmgF .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-IQcUyBmKlCp1dmgF .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-IQcUyBmKlCp1dmgF .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-IQcUyBmKlCp1dmgF .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-IQcUyBmKlCp1dmgF .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-IQcUyBmKlCp1dmgF .marker{fill:#333333;stroke:#333333;}#mermaid-svg-IQcUyBmKlCp1dmgF .marker.cross{stroke:#333333;}#mermaid-svg-IQcUyBmKlCp1dmgF svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-IQcUyBmKlCp1dmgF .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-IQcUyBmKlCp1dmgF .cluster-label text{fill:#333;}#mermaid-svg-IQcUyBmKlCp1dmgF .cluster-label span{color:#333;}#mermaid-svg-IQcUyBmKlCp1dmgF .label text,#mermaid-svg-IQcUyBmKlCp1dmgF span{fill:#333;color:#333;}#mermaid-svg-IQcUyBmKlCp1dmgF .node rect,#mermaid-svg-IQcUyBmKlCp1dmgF .node circle,#mermaid-svg-IQcUyBmKlCp1dmgF .node ellipse,#mermaid-svg-IQcUyBmKlCp1dmgF .node polygon,#mermaid-svg-IQcUyBmKlCp1dmgF .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-IQcUyBmKlCp1dmgF .node .label{text-align:center;}#mermaid-svg-IQcUyBmKlCp1dmgF .node.clickable{cursor:pointer;}#mermaid-svg-IQcUyBmKlCp1dmgF .arrowheadPath{fill:#333333;}#mermaid-svg-IQcUyBmKlCp1dmgF .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-IQcUyBmKlCp1dmgF .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-IQcUyBmKlCp1dmgF .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-IQcUyBmKlCp1dmgF .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-IQcUyBmKlCp1dmgF .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-IQcUyBmKlCp1dmgF .cluster text{fill:#333;}#mermaid-svg-IQcUyBmKlCp1dmgF .cluster span{color:#333;}#mermaid-svg-IQcUyBmKlCp1dmgF div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-IQcUyBmKlCp1dmgF :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} This is the text! A B 虚线链接
flowchart LRA-.-B;#mermaid-svg-Xwr42tctc5LFbRAI {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Xwr42tctc5LFbRAI .error-icon{fill:#552222;}#mermaid-svg-Xwr42tctc5LFbRAI .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Xwr42tctc5LFbRAI .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Xwr42tctc5LFbRAI .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Xwr42tctc5LFbRAI .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Xwr42tctc5LFbRAI .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Xwr42tctc5LFbRAI .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Xwr42tctc5LFbRAI .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Xwr42tctc5LFbRAI .marker.cross{stroke:#333333;}#mermaid-svg-Xwr42tctc5LFbRAI svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Xwr42tctc5LFbRAI .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Xwr42tctc5LFbRAI .cluster-label text{fill:#333;}#mermaid-svg-Xwr42tctc5LFbRAI .cluster-label span{color:#333;}#mermaid-svg-Xwr42tctc5LFbRAI .label text,#mermaid-svg-Xwr42tctc5LFbRAI span{fill:#333;color:#333;}#mermaid-svg-Xwr42tctc5LFbRAI .node rect,#mermaid-svg-Xwr42tctc5LFbRAI .node circle,#mermaid-svg-Xwr42tctc5LFbRAI .node ellipse,#mermaid-svg-Xwr42tctc5LFbRAI .node polygon,#mermaid-svg-Xwr42tctc5LFbRAI .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Xwr42tctc5LFbRAI .node .label{text-align:center;}#mermaid-svg-Xwr42tctc5LFbRAI .node.clickable{cursor:pointer;}#mermaid-svg-Xwr42tctc5LFbRAI .arrowheadPath{fill:#333333;}#mermaid-svg-Xwr42tctc5LFbRAI .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Xwr42tctc5LFbRAI .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Xwr42tctc5LFbRAI .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Xwr42tctc5LFbRAI .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Xwr42tctc5LFbRAI .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Xwr42tctc5LFbRAI .cluster text{fill:#333;}#mermaid-svg-Xwr42tctc5LFbRAI .cluster span{color:#333;}#mermaid-svg-Xwr42tctc5LFbRAI div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Xwr42tctc5LFbRAI :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} A B 带文字的虚线链接
flowchart LRA-. text .- B#mermaid-svg-FujD3jIaw2Pn9pyF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-FujD3jIaw2Pn9pyF .error-icon{fill:#552222;}#mermaid-svg-FujD3jIaw2Pn9pyF .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-FujD3jIaw2Pn9pyF .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-FujD3jIaw2Pn9pyF .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-FujD3jIaw2Pn9pyF .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-FujD3jIaw2Pn9pyF .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-FujD3jIaw2Pn9pyF .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-FujD3jIaw2Pn9pyF .marker{fill:#333333;stroke:#333333;}#mermaid-svg-FujD3jIaw2Pn9pyF .marker.cross{stroke:#333333;}#mermaid-svg-FujD3jIaw2Pn9pyF svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-FujD3jIaw2Pn9pyF .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-FujD3jIaw2Pn9pyF .cluster-label text{fill:#333;}#mermaid-svg-FujD3jIaw2Pn9pyF .cluster-label span{color:#333;}#mermaid-svg-FujD3jIaw2Pn9pyF .label text,#mermaid-svg-FujD3jIaw2Pn9pyF span{fill:#333;color:#333;}#mermaid-svg-FujD3jIaw2Pn9pyF .node rect,#mermaid-svg-FujD3jIaw2Pn9pyF .node circle,#mermaid-svg-FujD3jIaw2Pn9pyF .node ellipse,#mermaid-svg-FujD3jIaw2Pn9pyF .node polygon,#mermaid-svg-FujD3jIaw2Pn9pyF .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-FujD3jIaw2Pn9pyF .node .label{text-align:center;}#mermaid-svg-FujD3jIaw2Pn9pyF .node.clickable{cursor:pointer;}#mermaid-svg-FujD3jIaw2Pn9pyF .arrowheadPath{fill:#333333;}#mermaid-svg-FujD3jIaw2Pn9pyF .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-FujD3jIaw2Pn9pyF .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-FujD3jIaw2Pn9pyF .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-FujD3jIaw2Pn9pyF .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-FujD3jIaw2Pn9pyF .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-FujD3jIaw2Pn9pyF .cluster text{fill:#333;}#mermaid-svg-FujD3jIaw2Pn9pyF .cluster span{color:#333;}#mermaid-svg-FujD3jIaw2Pn9pyF div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-FujD3jIaw2Pn9pyF :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} text A B 多方向箭头
flowchart LRA o--o BB -- CC x--x D#mermaid-svg-KtwtRvWfdnjLkgfj {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-KtwtRvWfdnjLkgfj .error-icon{fill:#552222;}#mermaid-svg-KtwtRvWfdnjLkgfj .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-KtwtRvWfdnjLkgfj .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-KtwtRvWfdnjLkgfj .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-KtwtRvWfdnjLkgfj .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-KtwtRvWfdnjLkgfj .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-KtwtRvWfdnjLkgfj .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-KtwtRvWfdnjLkgfj .marker{fill:#333333;stroke:#333333;}#mermaid-svg-KtwtRvWfdnjLkgfj .marker.cross{stroke:#333333;}#mermaid-svg-KtwtRvWfdnjLkgfj svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-KtwtRvWfdnjLkgfj .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-KtwtRvWfdnjLkgfj .cluster-label text{fill:#333;}#mermaid-svg-KtwtRvWfdnjLkgfj .cluster-label span{color:#333;}#mermaid-svg-KtwtRvWfdnjLkgfj .label text,#mermaid-svg-KtwtRvWfdnjLkgfj span{fill:#333;color:#333;}#mermaid-svg-KtwtRvWfdnjLkgfj .node rect,#mermaid-svg-KtwtRvWfdnjLkgfj .node circle,#mermaid-svg-KtwtRvWfdnjLkgfj .node ellipse,#mermaid-svg-KtwtRvWfdnjLkgfj .node polygon,#mermaid-svg-KtwtRvWfdnjLkgfj .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-KtwtRvWfdnjLkgfj .node .label{text-align:center;}#mermaid-svg-KtwtRvWfdnjLkgfj .node.clickable{cursor:pointer;}#mermaid-svg-KtwtRvWfdnjLkgfj .arrowheadPath{fill:#333333;}#mermaid-svg-KtwtRvWfdnjLkgfj .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-KtwtRvWfdnjLkgfj .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-KtwtRvWfdnjLkgfj .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-KtwtRvWfdnjLkgfj .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-KtwtRvWfdnjLkgfj .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-KtwtRvWfdnjLkgfj .cluster text{fill:#333;}#mermaid-svg-KtwtRvWfdnjLkgfj .cluster span{color:#333;}#mermaid-svg-KtwtRvWfdnjLkgfj div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-KtwtRvWfdnjLkgfj :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} A B C D 对于点链接或粗链接要添加的字符是等号或点如下表所示
长度123普通的------------正常带箭头---------厚的粗带箭头点状-.--..--...-带有箭头的虚线-.--..--...-
闰年例子
闰年的定义是指能够整除4的年份。然而有一个例外规则即能够整除100但不能整除400的年份不算是闰年。这是为了修正日历系统中的误差确保闰年的周期相对稳定。
因此按照常见的规则
如果年份能够整除4但不能整除100那么它是一个闰年。如果年份能够整除100但不能整除400那么它不是闰年。如果年份能够整除400那么它仍然是一个闰年。
举例来说
2000年是闰年因为它能够整除4和400。1900年不是闰年因为它能够整除4和100但不能整除400。2024年是闰年因为它能够整除4。
flowchart TDA([开始]) --|Link text| B(Round edge)B[/输入y/] -- C{4能整除y}C ----|否| D[y不是闰年]C --|是| E{100能整除y}E --|是| F{400能整除y}F --|否| DE --|否| GF --|是| G[y是闰年]#mermaid-svg-WVvzTWkYMpW94rGi {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WVvzTWkYMpW94rGi .error-icon{fill:#552222;}#mermaid-svg-WVvzTWkYMpW94rGi .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WVvzTWkYMpW94rGi .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-WVvzTWkYMpW94rGi .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WVvzTWkYMpW94rGi .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WVvzTWkYMpW94rGi .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WVvzTWkYMpW94rGi .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WVvzTWkYMpW94rGi .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WVvzTWkYMpW94rGi .marker.cross{stroke:#333333;}#mermaid-svg-WVvzTWkYMpW94rGi svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WVvzTWkYMpW94rGi .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-WVvzTWkYMpW94rGi .cluster-label text{fill:#333;}#mermaid-svg-WVvzTWkYMpW94rGi .cluster-label span{color:#333;}#mermaid-svg-WVvzTWkYMpW94rGi .label text,#mermaid-svg-WVvzTWkYMpW94rGi span{fill:#333;color:#333;}#mermaid-svg-WVvzTWkYMpW94rGi .node rect,#mermaid-svg-WVvzTWkYMpW94rGi .node circle,#mermaid-svg-WVvzTWkYMpW94rGi .node ellipse,#mermaid-svg-WVvzTWkYMpW94rGi .node polygon,#mermaid-svg-WVvzTWkYMpW94rGi .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WVvzTWkYMpW94rGi .node .label{text-align:center;}#mermaid-svg-WVvzTWkYMpW94rGi .node.clickable{cursor:pointer;}#mermaid-svg-WVvzTWkYMpW94rGi .arrowheadPath{fill:#333333;}#mermaid-svg-WVvzTWkYMpW94rGi .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WVvzTWkYMpW94rGi .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WVvzTWkYMpW94rGi .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-WVvzTWkYMpW94rGi .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-WVvzTWkYMpW94rGi .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WVvzTWkYMpW94rGi .cluster text{fill:#333;}#mermaid-svg-WVvzTWkYMpW94rGi .cluster span{color:#333;}#mermaid-svg-WVvzTWkYMpW94rGi div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-WVvzTWkYMpW94rGi :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Link text 否 是 是 否 否 是 开始 输入y 4能整除y y不是闰年 100能整除y 400能整除y y是闰年 时序图
HTTP建立连接
连接过程描述 客户端向服务器发送SYN同步请求。 服务器收到请求后回复SYN-ACK同步-确认。 客户端收到服务器的回复后发送ACK确认完成三次握手过程。
sequenceDiagramparticipant Clientparticipant ServerClient-Server: SYN客户端向服务器发送SYN同步请求。Server-Client: SYN-ACK 服务器收到请求后回复SYN-ACK同步-确认。Client-Server: ACK 客户端收到服务器的回复后发送ACK确认完成三次握手过程。 #mermaid-svg-ZOeuSUwZGYrT9maH {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZOeuSUwZGYrT9maH .error-icon{fill:#552222;}#mermaid-svg-ZOeuSUwZGYrT9maH .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ZOeuSUwZGYrT9maH .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ZOeuSUwZGYrT9maH .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ZOeuSUwZGYrT9maH .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ZOeuSUwZGYrT9maH .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ZOeuSUwZGYrT9maH .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ZOeuSUwZGYrT9maH .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ZOeuSUwZGYrT9maH .marker.cross{stroke:#333333;}#mermaid-svg-ZOeuSUwZGYrT9maH svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ZOeuSUwZGYrT9maH .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ZOeuSUwZGYrT9maH text.actortspan{fill:black;stroke:none;}#mermaid-svg-ZOeuSUwZGYrT9maH .actor-line{stroke:grey;}#mermaid-svg-ZOeuSUwZGYrT9maH .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-ZOeuSUwZGYrT9maH .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-ZOeuSUwZGYrT9maH #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-ZOeuSUwZGYrT9maH .sequenceNumber{fill:white;}#mermaid-svg-ZOeuSUwZGYrT9maH #sequencenumber{fill:#333;}#mermaid-svg-ZOeuSUwZGYrT9maH #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-ZOeuSUwZGYrT9maH .messageText{fill:#333;stroke:#333;}#mermaid-svg-ZOeuSUwZGYrT9maH .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ZOeuSUwZGYrT9maH .labelText,#mermaid-svg-ZOeuSUwZGYrT9maH .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-ZOeuSUwZGYrT9maH .loopText,#mermaid-svg-ZOeuSUwZGYrT9maH .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-ZOeuSUwZGYrT9maH .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-ZOeuSUwZGYrT9maH .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-ZOeuSUwZGYrT9maH .noteText,#mermaid-svg-ZOeuSUwZGYrT9maH .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-ZOeuSUwZGYrT9maH .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ZOeuSUwZGYrT9maH .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ZOeuSUwZGYrT9maH .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ZOeuSUwZGYrT9maH .actorPopupMenu{position:absolute;}#mermaid-svg-ZOeuSUwZGYrT9maH .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-ZOeuSUwZGYrT9maH .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ZOeuSUwZGYrT9maH .actor-man circle,#mermaid-svg-ZOeuSUwZGYrT9maH line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-ZOeuSUwZGYrT9maH :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Client Server SYN客户端向服务器发送SYN同步请求。 SYN-ACK 服务器收到请求后回复SYN-ACK同步-确认。 ACK 客户端收到服务器的回复后发送ACK确认完成三次握手过程。 Client Server HTTP断开连接
sequenceDiagramparticipant Clientparticipant ServerClient-Server: FIN (Step 1)客户端向服务器发送FIN终止请求。Note over Server: 服务器收到请求后回复ACK确认表示已接收到FIN。Server-Client: ACK (Step 2)Note over Client: 服务器向客户端发送FIN终止请求。Server-Client: FIN (Step 3)Note over Client: 客户端收到请求后回复ACK确认完成四次挥手过程。Client-Server: ACK (Step 4)Note over Client,Server: Connection Closed #mermaid-svg-lEygu5jRkP219Gmh {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-lEygu5jRkP219Gmh .error-icon{fill:#552222;}#mermaid-svg-lEygu5jRkP219Gmh .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lEygu5jRkP219Gmh .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-lEygu5jRkP219Gmh .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lEygu5jRkP219Gmh .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lEygu5jRkP219Gmh .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lEygu5jRkP219Gmh .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lEygu5jRkP219Gmh .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lEygu5jRkP219Gmh .marker.cross{stroke:#333333;}#mermaid-svg-lEygu5jRkP219Gmh svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lEygu5jRkP219Gmh .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-lEygu5jRkP219Gmh text.actortspan{fill:black;stroke:none;}#mermaid-svg-lEygu5jRkP219Gmh .actor-line{stroke:grey;}#mermaid-svg-lEygu5jRkP219Gmh .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-lEygu5jRkP219Gmh .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-lEygu5jRkP219Gmh #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-lEygu5jRkP219Gmh .sequenceNumber{fill:white;}#mermaid-svg-lEygu5jRkP219Gmh #sequencenumber{fill:#333;}#mermaid-svg-lEygu5jRkP219Gmh #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-lEygu5jRkP219Gmh .messageText{fill:#333;stroke:#333;}#mermaid-svg-lEygu5jRkP219Gmh .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-lEygu5jRkP219Gmh .labelText,#mermaid-svg-lEygu5jRkP219Gmh .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-lEygu5jRkP219Gmh .loopText,#mermaid-svg-lEygu5jRkP219Gmh .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-lEygu5jRkP219Gmh .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-lEygu5jRkP219Gmh .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-lEygu5jRkP219Gmh .noteText,#mermaid-svg-lEygu5jRkP219Gmh .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-lEygu5jRkP219Gmh .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-lEygu5jRkP219Gmh .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-lEygu5jRkP219Gmh .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-lEygu5jRkP219Gmh .actorPopupMenu{position:absolute;}#mermaid-svg-lEygu5jRkP219Gmh .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-lEygu5jRkP219Gmh .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-lEygu5jRkP219Gmh .actor-man circle,#mermaid-svg-lEygu5jRkP219Gmh line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-lEygu5jRkP219Gmh :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Client Server FIN (Step 1)客户端向服务器发送FIN终止请求。 服务器收到请求后回复ACK确认表示已接收到FIN。 ACK (Step 2) 服务器向客户端发送FIN终止请求。 FIN (Step 3) 客户端收到请求后回复ACK确认完成四次挥手过程。 ACK (Step 4) Connection Closed Client Server 微信小程序调用
sequenceDiagram小程序 - 小程序 : wx.login()获取code小程序 - 服务器 : wx.request()发送code服务器 - 微信服务器 : codeappidsecret微信服务器 -- - 服务器 : openid服务器 - 服务器 : 根据openid确定用户并生成token服务器 -- - 小程序 : token#mermaid-svg-SZQ2ulCvBpHyr53S {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SZQ2ulCvBpHyr53S .error-icon{fill:#552222;}#mermaid-svg-SZQ2ulCvBpHyr53S .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SZQ2ulCvBpHyr53S .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SZQ2ulCvBpHyr53S .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SZQ2ulCvBpHyr53S .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SZQ2ulCvBpHyr53S .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SZQ2ulCvBpHyr53S .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SZQ2ulCvBpHyr53S .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SZQ2ulCvBpHyr53S .marker.cross{stroke:#333333;}#mermaid-svg-SZQ2ulCvBpHyr53S svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SZQ2ulCvBpHyr53S .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SZQ2ulCvBpHyr53S text.actortspan{fill:black;stroke:none;}#mermaid-svg-SZQ2ulCvBpHyr53S .actor-line{stroke:grey;}#mermaid-svg-SZQ2ulCvBpHyr53S .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-SZQ2ulCvBpHyr53S .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-SZQ2ulCvBpHyr53S #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-SZQ2ulCvBpHyr53S .sequenceNumber{fill:white;}#mermaid-svg-SZQ2ulCvBpHyr53S #sequencenumber{fill:#333;}#mermaid-svg-SZQ2ulCvBpHyr53S #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-SZQ2ulCvBpHyr53S .messageText{fill:#333;stroke:#333;}#mermaid-svg-SZQ2ulCvBpHyr53S .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SZQ2ulCvBpHyr53S .labelText,#mermaid-svg-SZQ2ulCvBpHyr53S .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-SZQ2ulCvBpHyr53S .loopText,#mermaid-svg-SZQ2ulCvBpHyr53S .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-SZQ2ulCvBpHyr53S .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-SZQ2ulCvBpHyr53S .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-SZQ2ulCvBpHyr53S .noteText,#mermaid-svg-SZQ2ulCvBpHyr53S .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-SZQ2ulCvBpHyr53S .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SZQ2ulCvBpHyr53S .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SZQ2ulCvBpHyr53S .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SZQ2ulCvBpHyr53S .actorPopupMenu{position:absolute;}#mermaid-svg-SZQ2ulCvBpHyr53S .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-SZQ2ulCvBpHyr53S .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SZQ2ulCvBpHyr53S .actor-man circle,#mermaid-svg-SZQ2ulCvBpHyr53S line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-SZQ2ulCvBpHyr53S :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 小程序 服务器 微信服务器 wx.login()获取code wx.request()发送code codeappidsecret openid 根据openid确定用户并生成token token 小程序 服务器 微信服务器
