酷站网素材,百度提交链接,上海本地app推荐,php网站开发项目经验如何写有时候会使用typora来绘制一些流程图#xff0c;进行编码之类的工作#xff0c;在网络搜集了一些笔记#xff0c;做个记录#xff0c;方便日后进行复习#xff0c;相关的记录如下#xff1a;
每次作图时#xff0c;代码以「graph 布局方向」开头#xff0c;如…有时候会使用typora来绘制一些流程图进行编码之类的工作在网络搜集了一些笔记做个记录方便日后进行复习相关的记录如下
每次作图时代码以「graph 布局方向」开头如
graph TBA(开始)B[打开冰箱门]C{冰箱小不小}D((连接))TBTop Bottom表示从上向下布局另外三种是 BT LRLeft Right RL #mermaid-svg-bOiEgumgu3rndYdi {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-bOiEgumgu3rndYdi .error-icon{fill:#552222;}#mermaid-svg-bOiEgumgu3rndYdi .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-bOiEgumgu3rndYdi .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-bOiEgumgu3rndYdi .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-bOiEgumgu3rndYdi .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-bOiEgumgu3rndYdi .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-bOiEgumgu3rndYdi .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-bOiEgumgu3rndYdi .marker{fill:#333333;stroke:#333333;}#mermaid-svg-bOiEgumgu3rndYdi .marker.cross{stroke:#333333;}#mermaid-svg-bOiEgumgu3rndYdi svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-bOiEgumgu3rndYdi .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-bOiEgumgu3rndYdi .cluster-label text{fill:#333;}#mermaid-svg-bOiEgumgu3rndYdi .cluster-label span{color:#333;}#mermaid-svg-bOiEgumgu3rndYdi .label text,#mermaid-svg-bOiEgumgu3rndYdi span{fill:#333;color:#333;}#mermaid-svg-bOiEgumgu3rndYdi .node rect,#mermaid-svg-bOiEgumgu3rndYdi .node circle,#mermaid-svg-bOiEgumgu3rndYdi .node ellipse,#mermaid-svg-bOiEgumgu3rndYdi .node polygon,#mermaid-svg-bOiEgumgu3rndYdi .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-bOiEgumgu3rndYdi .node .label{text-align:center;}#mermaid-svg-bOiEgumgu3rndYdi .node.clickable{cursor:pointer;}#mermaid-svg-bOiEgumgu3rndYdi .arrowheadPath{fill:#333333;}#mermaid-svg-bOiEgumgu3rndYdi .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-bOiEgumgu3rndYdi .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-bOiEgumgu3rndYdi .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-bOiEgumgu3rndYdi .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-bOiEgumgu3rndYdi .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-bOiEgumgu3rndYdi .cluster text{fill:#333;}#mermaid-svg-bOiEgumgu3rndYdi .cluster span{color:#333;}#mermaid-svg-bOiEgumgu3rndYdi 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-bOiEgumgu3rndYdi :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 开始 打开冰箱门 冰箱小不小 连接 不同种类的括号对应不同的节点图形 括号中的文字就是显示在节点中的描述 A B C D 这些字符是为节点取的名字这个名字可以在之后反复利用在编程里这相当于定义变量
线段用于连接节点一同来看一下
graph TBA[把大象放进去] -- B{冰箱小不小}B --|不小| C[把冰箱门关上]B --|小| D[换个大冰箱]上述 --是带箭头线段–|不小| 是加了描述文字的带箭头线段。它们都位于两个节点之间。
上一个代码示例中B{“冰箱小不小”} 这里的描述文字加了引号是因为其中包含特殊字符问号用引号包裹防止出错为节点取名为 A B C 不太合适如果节点很多时往往容易混淆不方便后续使用和阅读编程时命名的重要性。建议起有意义的名字除上述带箭头线段 -- 外还有带箭头虚线线段 -.-、 带箭头加粗线段 、不带箭头线段 — #mermaid-svg-hkWOo80M5cUIKnNl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hkWOo80M5cUIKnNl .error-icon{fill:#552222;}#mermaid-svg-hkWOo80M5cUIKnNl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-hkWOo80M5cUIKnNl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-hkWOo80M5cUIKnNl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-hkWOo80M5cUIKnNl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-hkWOo80M5cUIKnNl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-hkWOo80M5cUIKnNl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-hkWOo80M5cUIKnNl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-hkWOo80M5cUIKnNl .marker.cross{stroke:#333333;}#mermaid-svg-hkWOo80M5cUIKnNl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-hkWOo80M5cUIKnNl .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-hkWOo80M5cUIKnNl .cluster-label text{fill:#333;}#mermaid-svg-hkWOo80M5cUIKnNl .cluster-label span{color:#333;}#mermaid-svg-hkWOo80M5cUIKnNl .label text,#mermaid-svg-hkWOo80M5cUIKnNl span{fill:#333;color:#333;}#mermaid-svg-hkWOo80M5cUIKnNl .node rect,#mermaid-svg-hkWOo80M5cUIKnNl .node circle,#mermaid-svg-hkWOo80M5cUIKnNl .node ellipse,#mermaid-svg-hkWOo80M5cUIKnNl .node polygon,#mermaid-svg-hkWOo80M5cUIKnNl .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-hkWOo80M5cUIKnNl .node .label{text-align:center;}#mermaid-svg-hkWOo80M5cUIKnNl .node.clickable{cursor:pointer;}#mermaid-svg-hkWOo80M5cUIKnNl .arrowheadPath{fill:#333333;}#mermaid-svg-hkWOo80M5cUIKnNl .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-hkWOo80M5cUIKnNl .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-hkWOo80M5cUIKnNl .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-hkWOo80M5cUIKnNl .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-hkWOo80M5cUIKnNl .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-hkWOo80M5cUIKnNl .cluster text{fill:#333;}#mermaid-svg-hkWOo80M5cUIKnNl .cluster span{color:#333;}#mermaid-svg-hkWOo80M5cUIKnNl 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-hkWOo80M5cUIKnNl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 不小 小 把大象放进去 冰箱小不小 把冰箱门关上 换个大冰箱 graph TBStart(开始) -- Open[打开冰箱门]Open -- Put[把大象放进去]Put[把大象放进去] -- IsFit{冰箱小不小}IsFit --|不小| Close[把冰箱门关上]Close -- End(结束)IsFit --|小| Change[换个大冰箱]Change -- Open#mermaid-svg-gfNYhuikuDYeBqcB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-gfNYhuikuDYeBqcB .error-icon{fill:#552222;}#mermaid-svg-gfNYhuikuDYeBqcB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-gfNYhuikuDYeBqcB .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-gfNYhuikuDYeBqcB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-gfNYhuikuDYeBqcB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-gfNYhuikuDYeBqcB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-gfNYhuikuDYeBqcB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-gfNYhuikuDYeBqcB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-gfNYhuikuDYeBqcB .marker.cross{stroke:#333333;}#mermaid-svg-gfNYhuikuDYeBqcB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-gfNYhuikuDYeBqcB .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-gfNYhuikuDYeBqcB .cluster-label text{fill:#333;}#mermaid-svg-gfNYhuikuDYeBqcB .cluster-label span{color:#333;}#mermaid-svg-gfNYhuikuDYeBqcB .label text,#mermaid-svg-gfNYhuikuDYeBqcB span{fill:#333;color:#333;}#mermaid-svg-gfNYhuikuDYeBqcB .node rect,#mermaid-svg-gfNYhuikuDYeBqcB .node circle,#mermaid-svg-gfNYhuikuDYeBqcB .node ellipse,#mermaid-svg-gfNYhuikuDYeBqcB .node polygon,#mermaid-svg-gfNYhuikuDYeBqcB .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-gfNYhuikuDYeBqcB .node .label{text-align:center;}#mermaid-svg-gfNYhuikuDYeBqcB .node.clickable{cursor:pointer;}#mermaid-svg-gfNYhuikuDYeBqcB .arrowheadPath{fill:#333333;}#mermaid-svg-gfNYhuikuDYeBqcB .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-gfNYhuikuDYeBqcB .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-gfNYhuikuDYeBqcB .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-gfNYhuikuDYeBqcB .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-gfNYhuikuDYeBqcB .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-gfNYhuikuDYeBqcB .cluster text{fill:#333;}#mermaid-svg-gfNYhuikuDYeBqcB .cluster span{color:#333;}#mermaid-svg-gfNYhuikuDYeBqcB 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-gfNYhuikuDYeBqcB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 不小 小 开始 打开冰箱门 把大象放进去 冰箱小不小 把冰箱门关上 结束 换个大冰箱 #mermaid-svg-SQSPu3BeTBthf0Er {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SQSPu3BeTBthf0Er .error-icon{fill:#552222;}#mermaid-svg-SQSPu3BeTBthf0Er .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SQSPu3BeTBthf0Er .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SQSPu3BeTBthf0Er .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SQSPu3BeTBthf0Er .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SQSPu3BeTBthf0Er .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SQSPu3BeTBthf0Er .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SQSPu3BeTBthf0Er .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SQSPu3BeTBthf0Er .marker.cross{stroke:#333333;}#mermaid-svg-SQSPu3BeTBthf0Er svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SQSPu3BeTBthf0Er .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-SQSPu3BeTBthf0Er .cluster-label text{fill:#333;}#mermaid-svg-SQSPu3BeTBthf0Er .cluster-label span{color:#333;}#mermaid-svg-SQSPu3BeTBthf0Er .label text,#mermaid-svg-SQSPu3BeTBthf0Er span{fill:#333;color:#333;}#mermaid-svg-SQSPu3BeTBthf0Er .node rect,#mermaid-svg-SQSPu3BeTBthf0Er .node circle,#mermaid-svg-SQSPu3BeTBthf0Er .node ellipse,#mermaid-svg-SQSPu3BeTBthf0Er .node polygon,#mermaid-svg-SQSPu3BeTBthf0Er .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-SQSPu3BeTBthf0Er .node .label{text-align:center;}#mermaid-svg-SQSPu3BeTBthf0Er .node.clickable{cursor:pointer;}#mermaid-svg-SQSPu3BeTBthf0Er .arrowheadPath{fill:#333333;}#mermaid-svg-SQSPu3BeTBthf0Er .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-SQSPu3BeTBthf0Er .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-SQSPu3BeTBthf0Er .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-SQSPu3BeTBthf0Er .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-SQSPu3BeTBthf0Er .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-SQSPu3BeTBthf0Er .cluster text{fill:#333;}#mermaid-svg-SQSPu3BeTBthf0Er .cluster span{color:#333;}#mermaid-svg-SQSPu3BeTBthf0Er 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-SQSPu3BeTBthf0Er :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} graph TBA(MOVE MOTOR) -- B[RAMPMODESET velocity_positive]B -- C[SET AMAX 1000, SET VMAX 100000 OR DIFFERENT VALUE]C -- D(MOTOR MOVES, CHANGE VMAX AS NEEDED)#mermaid-svg-Jk9hzcZZaREu8h78 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Jk9hzcZZaREu8h78 .error-icon{fill:#552222;}#mermaid-svg-Jk9hzcZZaREu8h78 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Jk9hzcZZaREu8h78 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Jk9hzcZZaREu8h78 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Jk9hzcZZaREu8h78 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Jk9hzcZZaREu8h78 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Jk9hzcZZaREu8h78 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Jk9hzcZZaREu8h78 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Jk9hzcZZaREu8h78 .marker.cross{stroke:#333333;}#mermaid-svg-Jk9hzcZZaREu8h78 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Jk9hzcZZaREu8h78 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Jk9hzcZZaREu8h78 .cluster-label text{fill:#333;}#mermaid-svg-Jk9hzcZZaREu8h78 .cluster-label span{color:#333;}#mermaid-svg-Jk9hzcZZaREu8h78 .label text,#mermaid-svg-Jk9hzcZZaREu8h78 span{fill:#333;color:#333;}#mermaid-svg-Jk9hzcZZaREu8h78 .node rect,#mermaid-svg-Jk9hzcZZaREu8h78 .node circle,#mermaid-svg-Jk9hzcZZaREu8h78 .node ellipse,#mermaid-svg-Jk9hzcZZaREu8h78 .node polygon,#mermaid-svg-Jk9hzcZZaREu8h78 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Jk9hzcZZaREu8h78 .node .label{text-align:center;}#mermaid-svg-Jk9hzcZZaREu8h78 .node.clickable{cursor:pointer;}#mermaid-svg-Jk9hzcZZaREu8h78 .arrowheadPath{fill:#333333;}#mermaid-svg-Jk9hzcZZaREu8h78 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Jk9hzcZZaREu8h78 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Jk9hzcZZaREu8h78 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Jk9hzcZZaREu8h78 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Jk9hzcZZaREu8h78 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Jk9hzcZZaREu8h78 .cluster text{fill:#333;}#mermaid-svg-Jk9hzcZZaREu8h78 .cluster span{color:#333;}#mermaid-svg-Jk9hzcZZaREu8h78 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-Jk9hzcZZaREu8h78 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} MOVE MOTOR RAMPMODESET velocity_positive SET AMAX 1000, SET VMAX 100000 OR DIFFERENT VALUE MOTOR MOVES, CHANGE VMAX AS NEEDED graph LR
A[方形] --B(圆角)B -- C{条件a}C --|a1| D[结果1]C --|a2| E[结果2]F[横向流程图]#mermaid-svg-6IKkc2SdLXoSOVES {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-6IKkc2SdLXoSOVES .error-icon{fill:#552222;}#mermaid-svg-6IKkc2SdLXoSOVES .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-6IKkc2SdLXoSOVES .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-6IKkc2SdLXoSOVES .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-6IKkc2SdLXoSOVES .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-6IKkc2SdLXoSOVES .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-6IKkc2SdLXoSOVES .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-6IKkc2SdLXoSOVES .marker{fill:#333333;stroke:#333333;}#mermaid-svg-6IKkc2SdLXoSOVES .marker.cross{stroke:#333333;}#mermaid-svg-6IKkc2SdLXoSOVES svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-6IKkc2SdLXoSOVES .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-6IKkc2SdLXoSOVES .cluster-label text{fill:#333;}#mermaid-svg-6IKkc2SdLXoSOVES .cluster-label span{color:#333;}#mermaid-svg-6IKkc2SdLXoSOVES .label text,#mermaid-svg-6IKkc2SdLXoSOVES span{fill:#333;color:#333;}#mermaid-svg-6IKkc2SdLXoSOVES .node rect,#mermaid-svg-6IKkc2SdLXoSOVES .node circle,#mermaid-svg-6IKkc2SdLXoSOVES .node ellipse,#mermaid-svg-6IKkc2SdLXoSOVES .node polygon,#mermaid-svg-6IKkc2SdLXoSOVES .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-6IKkc2SdLXoSOVES .node .label{text-align:center;}#mermaid-svg-6IKkc2SdLXoSOVES .node.clickable{cursor:pointer;}#mermaid-svg-6IKkc2SdLXoSOVES .arrowheadPath{fill:#333333;}#mermaid-svg-6IKkc2SdLXoSOVES .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-6IKkc2SdLXoSOVES .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-6IKkc2SdLXoSOVES .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-6IKkc2SdLXoSOVES .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-6IKkc2SdLXoSOVES .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-6IKkc2SdLXoSOVES .cluster text{fill:#333;}#mermaid-svg-6IKkc2SdLXoSOVES .cluster span{color:#333;}#mermaid-svg-6IKkc2SdLXoSOVES 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-6IKkc2SdLXoSOVES :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} a1 a2 方形 圆角 条件a 结果1 结果2 横向流程图 graph TD
A[方形] -- B(圆角)B -- C{条件a}C -- |a1| D[结果1]C -- |a2| E[结果2]F[竖向流程图]#mermaid-svg-anVPHoAEcB3vZDLf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-anVPHoAEcB3vZDLf .error-icon{fill:#552222;}#mermaid-svg-anVPHoAEcB3vZDLf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-anVPHoAEcB3vZDLf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-anVPHoAEcB3vZDLf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-anVPHoAEcB3vZDLf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-anVPHoAEcB3vZDLf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-anVPHoAEcB3vZDLf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-anVPHoAEcB3vZDLf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-anVPHoAEcB3vZDLf .marker.cross{stroke:#333333;}#mermaid-svg-anVPHoAEcB3vZDLf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-anVPHoAEcB3vZDLf .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-anVPHoAEcB3vZDLf .cluster-label text{fill:#333;}#mermaid-svg-anVPHoAEcB3vZDLf .cluster-label span{color:#333;}#mermaid-svg-anVPHoAEcB3vZDLf .label text,#mermaid-svg-anVPHoAEcB3vZDLf span{fill:#333;color:#333;}#mermaid-svg-anVPHoAEcB3vZDLf .node rect,#mermaid-svg-anVPHoAEcB3vZDLf .node circle,#mermaid-svg-anVPHoAEcB3vZDLf .node ellipse,#mermaid-svg-anVPHoAEcB3vZDLf .node polygon,#mermaid-svg-anVPHoAEcB3vZDLf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-anVPHoAEcB3vZDLf .node .label{text-align:center;}#mermaid-svg-anVPHoAEcB3vZDLf .node.clickable{cursor:pointer;}#mermaid-svg-anVPHoAEcB3vZDLf .arrowheadPath{fill:#333333;}#mermaid-svg-anVPHoAEcB3vZDLf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-anVPHoAEcB3vZDLf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-anVPHoAEcB3vZDLf .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-anVPHoAEcB3vZDLf .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-anVPHoAEcB3vZDLf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-anVPHoAEcB3vZDLf .cluster text{fill:#333;}#mermaid-svg-anVPHoAEcB3vZDLf .cluster span{color:#333;}#mermaid-svg-anVPHoAEcB3vZDLf 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-anVPHoAEcB3vZDLf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} a1 a2 方形 圆角 条件a 结果1 结果2 竖向流程图 flowchat
ststart: 开始框
opoperation: 处理框
condcondition: 判断框(是或否?)
sub1subroutine: 子流程
ioinputoutput: 输入输出框
eend: 结束框
st(right)-op(right)-cond
cond(yes)-io(bottom)-e
cond(no)-sub1(right)-opCreated with Raphaël 2.3.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no sequenceDiagram
对象A-对象B: 对象B你好吗?请求
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B--对象A: 我很好(响应)
对象A-对象B: 你真的好吗#mermaid-svg-vhmgP4YoI362BnpZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-vhmgP4YoI362BnpZ .error-icon{fill:#552222;}#mermaid-svg-vhmgP4YoI362BnpZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vhmgP4YoI362BnpZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-vhmgP4YoI362BnpZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vhmgP4YoI362BnpZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vhmgP4YoI362BnpZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vhmgP4YoI362BnpZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vhmgP4YoI362BnpZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vhmgP4YoI362BnpZ .marker.cross{stroke:#333333;}#mermaid-svg-vhmgP4YoI362BnpZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vhmgP4YoI362BnpZ .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-vhmgP4YoI362BnpZ text.actortspan{fill:black;stroke:none;}#mermaid-svg-vhmgP4YoI362BnpZ .actor-line{stroke:grey;}#mermaid-svg-vhmgP4YoI362BnpZ .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-vhmgP4YoI362BnpZ .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-vhmgP4YoI362BnpZ #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-vhmgP4YoI362BnpZ .sequenceNumber{fill:white;}#mermaid-svg-vhmgP4YoI362BnpZ #sequencenumber{fill:#333;}#mermaid-svg-vhmgP4YoI362BnpZ #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-vhmgP4YoI362BnpZ .messageText{fill:#333;stroke:#333;}#mermaid-svg-vhmgP4YoI362BnpZ .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-vhmgP4YoI362BnpZ .labelText,#mermaid-svg-vhmgP4YoI362BnpZ .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-vhmgP4YoI362BnpZ .loopText,#mermaid-svg-vhmgP4YoI362BnpZ .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-vhmgP4YoI362BnpZ .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-vhmgP4YoI362BnpZ .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-vhmgP4YoI362BnpZ .noteText,#mermaid-svg-vhmgP4YoI362BnpZ .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-vhmgP4YoI362BnpZ .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-vhmgP4YoI362BnpZ .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-vhmgP4YoI362BnpZ .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-vhmgP4YoI362BnpZ .actorPopupMenu{position:absolute;}#mermaid-svg-vhmgP4YoI362BnpZ .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-vhmgP4YoI362BnpZ .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-vhmgP4YoI362BnpZ .actor-man circle,#mermaid-svg-vhmgP4YoI362BnpZ line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-vhmgP4YoI362BnpZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 对象A 对象B 对象B你好吗?请求 对象B的描述 对象A的描述(提示) 我很好(响应) 你真的好吗 对象A 对象B 标题复杂使用 sequenceDiagram
Title: 标题复杂使用
对象A-对象B: 对象B你好吗?请求
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B--对象A: 我很好(响应)
对象B-小三: 你好吗
小三--对象A: 对象B找我了
对象A-对象B: 你真的好吗
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩#mermaid-svg-KFS62LhZc8lBrVVz {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-KFS62LhZc8lBrVVz .error-icon{fill:#552222;}#mermaid-svg-KFS62LhZc8lBrVVz .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-KFS62LhZc8lBrVVz .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-KFS62LhZc8lBrVVz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-KFS62LhZc8lBrVVz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-KFS62LhZc8lBrVVz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-KFS62LhZc8lBrVVz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-KFS62LhZc8lBrVVz .marker{fill:#333333;stroke:#333333;}#mermaid-svg-KFS62LhZc8lBrVVz .marker.cross{stroke:#333333;}#mermaid-svg-KFS62LhZc8lBrVVz svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-KFS62LhZc8lBrVVz .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-KFS62LhZc8lBrVVz text.actortspan{fill:black;stroke:none;}#mermaid-svg-KFS62LhZc8lBrVVz .actor-line{stroke:grey;}#mermaid-svg-KFS62LhZc8lBrVVz .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-KFS62LhZc8lBrVVz .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-KFS62LhZc8lBrVVz #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-KFS62LhZc8lBrVVz .sequenceNumber{fill:white;}#mermaid-svg-KFS62LhZc8lBrVVz #sequencenumber{fill:#333;}#mermaid-svg-KFS62LhZc8lBrVVz #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-KFS62LhZc8lBrVVz .messageText{fill:#333;stroke:#333;}#mermaid-svg-KFS62LhZc8lBrVVz .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-KFS62LhZc8lBrVVz .labelText,#mermaid-svg-KFS62LhZc8lBrVVz .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-KFS62LhZc8lBrVVz .loopText,#mermaid-svg-KFS62LhZc8lBrVVz .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-KFS62LhZc8lBrVVz .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-KFS62LhZc8lBrVVz .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-KFS62LhZc8lBrVVz .noteText,#mermaid-svg-KFS62LhZc8lBrVVz .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-KFS62LhZc8lBrVVz .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-KFS62LhZc8lBrVVz .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-KFS62LhZc8lBrVVz .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-KFS62LhZc8lBrVVz .actorPopupMenu{position:absolute;}#mermaid-svg-KFS62LhZc8lBrVVz .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-KFS62LhZc8lBrVVz .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-KFS62LhZc8lBrVVz .actor-man circle,#mermaid-svg-KFS62LhZc8lBrVVz line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-KFS62LhZc8lBrVVz :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 对象A 对象B 小三 C 对象B你好吗?请求 对象B的描述 对象A的描述(提示) 我很好(响应) 你好吗 对象B找我了 你真的好吗 我们是朋友 没人陪我玩 对象A 对象B 小三 C 标题复杂使用 %% 时序图例子,- 直线--虚线-实线箭头sequenceDiagramparticipant 张三participant 李四张三-王五: 王五你好吗loop 健康检查王五-王五: 与疾病战斗endNote right of 王五: 合理 食物 br/看医生...李四--张三: 很好!王五-李四: 你怎么样?李四--王五: 很好!#mermaid-svg-CsAgKzq2cUVwFnvL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-CsAgKzq2cUVwFnvL .error-icon{fill:#552222;}#mermaid-svg-CsAgKzq2cUVwFnvL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CsAgKzq2cUVwFnvL .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-CsAgKzq2cUVwFnvL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CsAgKzq2cUVwFnvL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CsAgKzq2cUVwFnvL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CsAgKzq2cUVwFnvL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CsAgKzq2cUVwFnvL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CsAgKzq2cUVwFnvL .marker.cross{stroke:#333333;}#mermaid-svg-CsAgKzq2cUVwFnvL svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CsAgKzq2cUVwFnvL .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-CsAgKzq2cUVwFnvL text.actortspan{fill:black;stroke:none;}#mermaid-svg-CsAgKzq2cUVwFnvL .actor-line{stroke:grey;}#mermaid-svg-CsAgKzq2cUVwFnvL .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-CsAgKzq2cUVwFnvL .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-CsAgKzq2cUVwFnvL #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-CsAgKzq2cUVwFnvL .sequenceNumber{fill:white;}#mermaid-svg-CsAgKzq2cUVwFnvL #sequencenumber{fill:#333;}#mermaid-svg-CsAgKzq2cUVwFnvL #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-CsAgKzq2cUVwFnvL .messageText{fill:#333;stroke:#333;}#mermaid-svg-CsAgKzq2cUVwFnvL .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-CsAgKzq2cUVwFnvL .labelText,#mermaid-svg-CsAgKzq2cUVwFnvL .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-CsAgKzq2cUVwFnvL .loopText,#mermaid-svg-CsAgKzq2cUVwFnvL .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-CsAgKzq2cUVwFnvL .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-CsAgKzq2cUVwFnvL .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-CsAgKzq2cUVwFnvL .noteText,#mermaid-svg-CsAgKzq2cUVwFnvL .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-CsAgKzq2cUVwFnvL .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-CsAgKzq2cUVwFnvL .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-CsAgKzq2cUVwFnvL .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-CsAgKzq2cUVwFnvL .actorPopupMenu{position:absolute;}#mermaid-svg-CsAgKzq2cUVwFnvL .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-CsAgKzq2cUVwFnvL .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-CsAgKzq2cUVwFnvL .actor-man circle,#mermaid-svg-CsAgKzq2cUVwFnvL line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-CsAgKzq2cUVwFnvL :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 王五 王五你好吗 与疾病战斗 loop [健康检查] 合理 食物 看医生... 很好! 你怎么样? 很好! 张三 李四 王五 标题复杂使用 flowchat
ststart: 开始框
opoperation: 处理框
condcondition: 判断框(是或否?)
sub1subroutine: 子流程
ioinputoutput: 输入输出框
eend: 结束框
st-op-cond
cond(yes)-io-e
cond(no)-sub1(right)-opCreated with Raphaël 2.3.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no flowchat
ststart: MOVE TO A TARGET POSITION
opoperation: RAMPMODE SET position
sub1subroutine: CONFIGURE RAMP PARAMETERS
op1operation: SET XTARGET
condcondition: NEW ON-THE-FLY TARGET?
cond1condition: CHANGE OF ANY PARAMETERS REQUIRED?
op2operation: SET MOTION PARAMETERS AS DESIRED
cond2condition: FLAG Event_POS_reached ACTIVE?
eend: TARGET POSITION HAS BEEN REACHED
st-op-sub1-op1
op1-cond
cond(yes)-op1
cond(no)-cond1
cond1(yes)-op2(right)-op1
cond1(no)-cond2
cond2(yes)-e
cond2(no)-condCreated with Raphaël 2.3.0 MOVE TO A TARGET POSITION RAMPMODE SET position CONFIGURE RAMP PARAMETERS SET XTARGET NEW ON-THE-FLY TARGET? CHANGE OF ANY PARAMETERS REQUIRED? SET MOTION PARAMETERS AS DESIRED FLAG Event_POS_reached ACTIVE? TARGET POSITION HAS BEEN REACHED yes no yes no yes no 附录一个源码链接 https://download.csdn.net/download/weixin_44317448/88841198
