## Typora 流程图
1、横向流程图源码格式（mermaid）
```x
</div> <div class="CodeMirror-measure"> </div> <div style="position: relative; z-index: 1;"> </div> <div class="CodeMirror-code" role="presentation" style=""> <div class="CodeMirror-activeline" style="position: relative;"> <div class="CodeMirror-activeline-background CodeMirror-linebackground"> </div> <div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"> </div> ``` <span role="presentation" style="padding-right: 0.1px;">graph LR</span></div> <div class="" style="position: relative;"> ```A[方形] –>B(圆角)
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> B --> C{条件a}</span></div> <div class="" style="position: relative;"> ```C –>|a=1| D[结果1]
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> C -->|a=2| E[结果2]</span></div> <div class="" style="position: relative;"> ```A–>F[横向流程图]
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> G[横向流程图]</span></div> </div> </div> </div> </div> </div> <div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 140px;"> </div> <div class="CodeMirror-gutters" style="display: none; height: 140px;"> </div>例如
<g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;">
<g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><rect rx="0" ry="0" width="0" height="0"></rect><foreignobject width="0" height="0"></foreignobject></g></g><g class="edgeLabel" transform="translate(444.6546859741211,30.5)" style="opacity: 1;"><g transform="translate(-12.59375,-12.5)" class="label"><rect rx="0" ry="0" width="25.1875" height="25"></rect><foreignobject width="25.1875" height="25"></foreignobject></g></g>a=1<g class="edgeLabel" transform="translate(444.6546859741211,125.5)" style="opacity: 1;"><g transform="translate(-16.7890625,-12.5)" class="label"><rect rx="0" ry="0" width="33.578125" height="25"></rect><foreignobject width="33.578125" height="25"></foreignobject></g></g>a==2<g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><rect rx="0" ry="0" width="0" height="0"></rect><foreignobject width="0" height="0"></foreignobject></g></g><g class="nodes"><g class="node default" id="flowchart-A-717" transform="translate(58,125.5)" style="opacity: 1;"><rect rx="0" ry="0" x="-26" y="-22.5" width="52" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-16,-12.5)"><foreignobject width="32" height="25"></foreignobject></g></g></g></g>方形<g class="node default" id="flowchart-B-718" transform="translate(208,78)" style="opacity: 1;"><rect rx="5" ry="5" x="-26" y="-22.5" width="52" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-16,-12.5)"><foreignobject width="32" height="25"></foreignobject></g></g></g>圆角<g class="node default" id="flowchart-C-720" transform="translate(355.43281173706055,78)" style="opacity: 1;">
<g class="node default" id="flowchart-D-722" transform="translate(516.6390609741211,30.5)" style="opacity: 1;"><rect rx="0" ry="0" x="-30.1953125" y="-22.5" width="60.390625" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-20.1953125,-12.5)"><foreignobject width="40.390625" height="25"></foreignobject></g></g></g>结果1<g class="node default" id="flowchart-E-724" transform="translate(516.6390609741211,125.5)" style="opacity: 1;"><rect rx="0" ry="0" x="-30.1953125" y="-22.5" width="60.390625" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-20.1953125,-12.5)"><foreignobject width="40.390625" height="25"></foreignobject></g></g></g>结果2<g class="node default" id="flowchart-F-726" transform="translate(208,173)" style="opacity: 1;"><rect rx="0" ry="0" x="-50" y="-22.5" width="100" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-40,-12.5)"><foreignobject width="80" height="25"></foreignobject></g></g></g>横向流程图<g class="node default" id="flowchart-G-727" transform="translate(58,220.5)" style="opacity: 1;"><rect rx="0" ry="0" x="-50" y="-22.5" width="100" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-40,-12.5)"><foreignobject width="80" height="25"></foreignobject></g></g></g>横向流程图2、竖向流程图源码格式（mermaid）
```xxxxxxxxxx
</div> <div class="CodeMirror-measure"> </div> <div style="position: relative; z-index: 1;"> </div> <div class="CodeMirror-code" role="presentation" style=""> <div class="CodeMirror-activeline" style="position: relative;"> <div class="CodeMirror-activeline-background CodeMirror-linebackground"> </div> <div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"> </div> ``` <span role="presentation" style="padding-right: 0.1px;">graph TD</span></div> <div class="" style="position: relative;"> ```A[方形] –> B(圆角)
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> B --> C{条件a}</span></div> <div class="" style="position: relative;"> ```C –> |a=1| D[结果1]
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> C --> |a=2| E[结果2]</span></div> <div class="" style="position: relative;"> ```A –> F[竖向流程图]
</div> </div> </div> </div> </div> </div> <div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 120px;"> </div> <div class="CodeMirror-gutters" style="display: none; height: 120px;"> </div> </div> </div> </blockquote> <span>例如：</span> <div class="md-diagram-panel"> <svg id="mermaidChart163" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="420.8656311035156" style="max-width: 277.391px; height: 460.866px;" viewBox="0 0 277.390625 420.8656311035156" class="md-require-zoom-fix"></svg> <g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;"> </path><defs><marker id="arrowhead894" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> </path></marker></defs></g><g class="edgePath LS-B LE-C" id="L-B-C" style="opacity: 1;"> </path><defs><marker id="arrowhead895" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> </path></marker></defs></g><g class="edgePath LS-C LE-D" id="L-C-D" style="opacity: 1;"> </path><defs><marker id="arrowhead896" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> </path></marker></defs></g><g class="edgePath LS-C LE-E" id="L-C-E" style="opacity: 1;"> </path><defs><marker id="arrowhead897" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> </path></marker></defs></g><g class="edgePath LS-A LE-F" id="L-A-F" style="opacity: 1;"> </path><defs><marker id="arrowhead898" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> </path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><rect rx="0" ry="0" width="0" height="0"></rect><foreignobject width="0" height="0"></foreignobject></g></g></g></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> <span></span> </div> <g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><rect rx="0" ry="0" width="0" height="0"></rect><foreignobject width="0" height="0"></foreignobject></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> <span></span> </div> <g class="edgeLabel" transform="translate(38.1953125,330.3656234741211)" style="opacity: 1;"><g transform="translate(-12.59375,-12.5)" class="label"><rect rx="0" ry="0" width="25.1875" height="25"></rect><foreignobject width="25.1875" height="25"></foreignobject></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> <span>a=1</span> </div> <g class="edgeLabel" transform="translate(148.5859375,330.3656234741211)" style="opacity: 1;"><g transform="translate(-12.59375,-12.5)" class="label"><rect rx="0" ry="0" width="25.1875" height="25"></rect><foreignobject width="25.1875" height="25"></foreignobject></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> <span>a=2</span> </div> <g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><rect rx="0" ry="0" width="0" height="0"></rect><foreignobject width="0" height="0"></foreignobject></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> <span></span> </div> <g class="nodes"><g class="node default" id="flowchart-A-1548" transform="translate(156.390625,30.5)" style="opacity: 1;"><rect rx="0" ry="0" x="-26" y="-22.5" width="52" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-16,-12.5)"><foreignobject width="32" height="25"></foreignobject></g></g></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> 方形 </div> <g class="node default" id="flowchart-B-1549" transform="translate(93.390625,125.5)" style="opacity: 1;"><rect rx="5" ry="5" x="-26" y="-22.5" width="52" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-16,-12.5)"><foreignobject width="32" height="25"></foreignobject></g></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> 圆角 </div> <g class="node default" id="flowchart-C-1551" transform="translate(93.390625,245.43281173706055)" style="opacity: 1;"> </polygon><g class="label" transform="translate(0,0)"><g transform="translate(-20.203125,-12.5)"><foreignobject width="40.40625" height="25"></foreignobject></g></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> 条件a </div> <g class="node default" id="flowchart-D-1553" transform="translate(38.1953125,390.3656234741211)" style="opacity: 1;"><rect rx="0" ry="0" x="-30.1953125" y="-22.5" width="60.390625" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-20.1953125,-12.5)"><foreignobject width="40.390625" height="25"></foreignobject></g></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> 结果1 </div> <g class="node default" id="flowchart-E-1555" transform="translate(148.5859375,390.3656234741211)" style="opacity: 1;"><rect rx="0" ry="0" x="-30.1953125" y="-22.5" width="60.390625" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-20.1953125,-12.5)"><foreignobject width="40.390625" height="25"></foreignobject></g></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> 结果2 </div> <g class="node default" id="flowchart-F-1557" transform="translate(219.390625,125.5)" style="opacity: 1;"><rect rx="0" ry="0" x="-50" y="-22.5" width="100" height="45" class="label-container"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-40,-12.5)"><foreignobject width="80" height="25"></foreignobject></g></g></g> <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"> 竖向流程图 </div> </div> ### <a name="3标准流程图源码格式flow" class="md-header-anchor"></a><span>3、标准流程图源码格式（flow)</span> <blockquote>x
</div> <div class="CodeMirror-measure"> </div> <div style="position: relative; z-index: 1;"> </div> <div class="CodeMirror-code" role="presentation" style=""> <div class="CodeMirror-activeline" style="position: relative;"> <div class="CodeMirror-activeline-background CodeMirror-linebackground"> </div> <div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"> </div> ``` <span role="presentation" style="padding-right: 0.1px;">st=>start: 开始框:>https://www.baidu.com</span></div> <div class="" style="position: relative;"> ```op=>operation: 处理框
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">cond=>condition: 判断框（是或否？）</span></div> <div class="" style="position: relative;"> ```sub1=subroutine: 子流程
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">io=>inputoutput: 输入输出框</span></div> <div class="" style="position: relative;"> ```e=>end: 结束框
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">st->op->cond</span></div> <div class="" style="position: relative;"> ```cond(yes)->io->e
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">cond(no)->sub1(right)->op</span></div> </div> </div> </div> </div> </div> <div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 180px;"> </div> <div class="CodeMirror-gutters" style="display: none; height: 180px;"> </div>例如：
4、标准流程图源码格式（横向）(flow)
```xxxxxxxxxx
</div> <div class="CodeMirror-measure"> </div> <div style="position: relative; z-index: 1;"> </div> <div class="CodeMirror-code" role="presentation"> <div class="CodeMirror-activeline" style="position: relative;"> <div class="CodeMirror-activeline-background CodeMirror-linebackground"> </div> <div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"> </div> ``` <span role="presentation" style="padding-right: 0.1px;">st=>start: 开始框</span></div> <div class="" style="position: relative;"> ```op=>operation: 处理框
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">cond=>condition: 判断框（是或否？）</span></div> <div class="" style="position: relative;"> ```sub1=>subroutine: 子流程
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">io=>inputoutput: 输入输出框</span></div> <div class="" style="position: relative;"> ```e=>end: 结束
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">st(right)->op(right)->cond</span></div> <div class="" style="position: relative;"> ```cond(yes)->io(bottom)->e
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">cond(no)->sub1(right)->op</span></div> </div> </div> </div> </div> </div> <div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 180px;"> </div> <div class="CodeMirror-gutters" style="display: none; height: 180px;"> </div>例如：
5、UML时序图源码格式（sequence)
```xxxxxxxxxx
</div> <div class="CodeMirror-measure"> </div> <div style="position: relative; z-index: 1;"> </div> <div class="CodeMirror-code" role="presentation"> <div class="CodeMirror-activeline" style="position: relative;"> <div class="CodeMirror-activeline-background CodeMirror-linebackground"> </div> <div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"> </div> ``` <span role="presentation" style="padding-right: 0.1px;">对象A->对象B: 对象B你好吗？（请求）</span></div> <div class="" style="position: relative;"> ```Note right of 对象B: 对象B的描述
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">Note left of 对象A: 对象A的描述（提示）</span></div> <div class="" style="position: relative;"> ```对象B–>对象A: 我很好（响应）
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">对象A->对象B: 你真的好吗？</span></div> <div class="" style="position: relative;"> ```对象B->对象A: 真的好
</div> </div> </div> </div> </div> </div> <div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 120px;"> </div> <div class="CodeMirror-gutters" style="display: none; height: 120px;"> </div> </div> </div> </blockquote> <span>例如：</span> <div class="md-diagram-panel"> <svg height="368" version="1.1" width="572" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; top: -0.140625px; max-width: 100%; height: auto;" viewBox="0 0 572 368"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.2.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><marker id="raphael-marker-endblock55-obj6ewle" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><use xlink:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="currentColor" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use></marker><marker id="raphael-marker-endblock55-objjvcfn" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><use xlink:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="currentColor" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use></marker><marker id="raphael-marker-endblock55-objogyu3" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><use xlink:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="currentColor" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use></marker><marker id="raphael-marker-endblock55-obj8l66w" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><use xlink:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="currentColor" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use></marker></defs><rect x="172" y="20" width="60" height="36" rx="0" ry="0" fill="var(--bg-color)" stroke="currentColor" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="182" y="30" width="40" height="16" rx="0" ry="0" fill="none" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="202" y="38" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="currentColor" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: "Andale Mono", monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">对象A</tspan></text><rect x="172" y="312" width="60" height="36" rx="0" ry="0" fill="var(--bg-color)" stroke="currentColor" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="182" y="322" width="40" height="16" rx="0" ry="0" fill="none" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="202" y="330" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="currentColor" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: "Andale Mono", monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">对象A</tspan></text> </path><rect x="344" y="20" width="60" height="36" rx="0" ry="0" fill="var(--bg-color)" stroke="currentColor" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="354" y="30" width="40" height="16" rx="0" ry="0" fill="none" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="374" y="38" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="currentColor" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: "Andale Mono", monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">对象B</tspan></text><rect x="344" y="312" width="60" height="36" rx="0" ry="0" fill="var(--bg-color)" stroke="currentColor" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="354" y="322" width="40" height="16" rx="0" ry="0" fill="none" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="374" y="330" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="currentColor" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: "Andale Mono", monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">对象B</tspan></text> </path><rect x="212" y="73" width="152" height="16" rx="0" ry="0" fill="none" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="288" y="81" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="currentColor" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: "Andale Mono", monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">对象B你好吗？(请求)</tspan></text> </path><rect x="394" y="112" width="98" height="26" rx="0" ry="0" fill="var(--bg-color)" stroke="currentColor" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="399" y="117" width="88" height="16" rx="0" ry="0" fill="none" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="443" y="125" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="currentColor" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: "Andale Mono", monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">对象B的描述</tspan></text><rect x="20" y="158" width="162" height="26" rx="0" ry="0" fill="var(--bg-color)" stroke="currentColor" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><rect x="25" y="163" width="152" height="16" rx="0" ry="0" fill="none" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="101" y="171" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="currentColor" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: "Andale Mono", monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">对象A的描述（提示）</tspan></text><rect x="232" y="201" width="112" height="16" rx="0" ry="0" fill="none" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="288" y="209" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="currentColor" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: "Andale Mono", monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">我很好（响应）</tspan></text> </path><rect x="240" y="237" width="96" height="16" rx="0" ry="0" fill="none" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="288" y="245" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="currentColor" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: "Andale Mono", monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">你真的好吗？</tspan></text> </path><rect x="264" y="273" width="48" height="16" rx="0" ry="0" fill="none" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><text x="288" y="281" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="currentColor" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: "Andale Mono", monospace; font-size: 16px;"><tspan dy="6" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">真的好</tspan></text> </path></svg> </div> ### <a name="6uml时序图源码复杂样例sequence）" class="md-header-anchor"></a><span>6、UML时序图源码复杂样例（sequence）</span> <blockquote>xxxxxxxxxx
</div> <div class="CodeMirror-measure"> </div> <div style="position: relative; z-index: 1;"> </div> <div class="CodeMirror-code" role="presentation"> <div class="CodeMirror-activeline" style="position: relative;"> <div class="CodeMirror-activeline-background CodeMirror-linebackground"> </div> <div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"> </div> ``` <span role="presentation" style="padding-right: 0.1px;">Title: 标题： 复杂使用</span></div> <div class="" style="position: relative;"> ```对象A->对象B: 对象B你好吗？（请求）
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">Note right of 对象B: 对象B的描述</span></div> <div class="" style="position: relative;"> ```Note left of 对象A: 对象A的描述（提示）
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">对象B-->对象A: 我很好（响应）</span></div> <div class="" style="position: relative;"> ```对象B->小三： 你好吗？
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">小三-->>对象A: 对象B找我了</span></div> <div class="" style="position: relative;"> ```对象A->对象B: 你真的好吗？
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">Note over 小三，对象B: 我们是朋友</span></div> <div class="" style="position: relative;"> ```participant C
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">Note right of C: 没人陪我玩</span></div> </div> </div> </div> </div> </div> <div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 220px;"> </div> <div class="CodeMirror-gutters" style="display: none; height: 220px;"> </div>例如：
7、UML标准时序图源码格式（mermaid）
```x
</div> <div class="CodeMirror-measure"> </div> <div style="position: relative; z-index: 1;"> </div> <div class="CodeMirror-code" role="presentation" style=""> <div class="CodeMirror-activeline" style="position: relative;"> <div class="CodeMirror-activeline-background CodeMirror-linebackground"> </div> <div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"> </div> ``` <span role="presentation" style="padding-right: 0.1px;">%% 时序图例子，->直线，-->虚线,->>实线箭头</span></div> <div class="" style="position: relative;"> ```sequenceDiagram
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>participant 张三</span></div> <div class="" style="position: relative;"> ```participant 李四
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>张三->王五: 王五你好吗？</span></div> <div class="" style="position: relative;"> ```loop 健康检查
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>王五->王五: 与疾病战斗</span></div> <div class="" style="position: relative;"> ```end
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>Note right of 王五: 合理 食物 <br/> 看医生...</span></div> <div class="" style="position: relative;"> ```李四–>>张三: 很好！
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>王五->李四: 你怎么样?</span></div> <div class="" style="position: relative;"> ```李四–>王五: 很好！
</div> </div> </div> </div> </div> </div> <div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 250px;"> </div> <div class="CodeMirror-gutters" style="display: none; height: 250px;"> </div> </div> </div> </blockquote> <span>例如：</span> <div class="md-diagram-panel"> <svg id="mermaidChart188" width="666" xmlns="http://www.w3.org/2000/svg" height="558" viewBox="-8 -8 666 558" class="md-require-zoom-fix" style="height: 598px;"></svg> <g></g><g> - </line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="75" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"><tspan x="75" dy="0">张三</tspan></text></g><g> - </line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="275" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"><tspan x="275" dy="0">李四</tspan></text></g><g> - </line><rect x="400" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="475" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"><tspan x="475" dy="0">王五</tspan></text></g><defs><marker id="arrowhead" refx="5" refy="2" markerwidth="6" markerheight="4" orient="auto"> </path></marker></defs><defs><marker id="crosshead" markerwidth="15" markerheight="8" orient="auto" refx="16" refy="4"> </path> </path></marker></defs><defs><marker id="sequencenumber" refx="15" refy="15" markerwidth="60" markerheight="40" orient="auto"><circle cx="15" cy="15" r="6"></circle></marker></defs><text x="275" y="80" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial; font-size: 16px; font-weight: 400;">王五你好吗？</text> - </line><text x="475" y="167" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial; font-size: 16px; font-weight: 400;">与疾病战斗</text> </path><g> - </line> - </line> - </line> - </line> </polygon><text x="417" y="132" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="labelText" style="font-family: "trebuchet ms", verdana, arial; font-size: 16px; font-weight: 400;">loop</text><text x="500" y="135" text-anchor="middle" class="loopText" style="font-family: "trebuchet ms", verdana, arial; font-size: 16px; font-weight: 400;"><tspan x="500">[健康检查]</tspan></text></g><g><rect x="500" y="274" fill="#EDF2AE" stroke="#666" width="150" height="52" rx="0" ry="0" class="note"></rect><text x="575" y="279" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="noteText" dy="1em" style="font-family: "trebuchet ms", verdana, arial; font-size: 14px; font-weight: 400;"><tspan x="575">合理 食物 </tspan></text><text x="575" y="295" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="noteText" dy="1em" style="font-family: "trebuchet ms", verdana, arial; font-size: 14px; font-weight: 400;"><tspan x="575"> 看医生…</tspan></text></g><text x="175" y="341" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial; font-size: 16px; font-weight: 400;">很好！</text> - </line><text x="375" y="387" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial; font-size: 16px; font-weight: 400;">你怎么样?</text> - </line><text x="375" y="437" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial; font-size: 16px; font-weight: 400;">很好！</text> - </line><g><rect x="0" y="484" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="75" y="516.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"><tspan x="75" dy="0">张三</tspan></text></g><g><rect x="200" y="484" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="275" y="516.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"><tspan x="275" dy="0">李四</tspan></text></g><g><rect x="400" y="484" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="475" y="516.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"><tspan x="475" dy="0">王五</tspan></text></g> </div> ### <a name="8甘特图源码样例mermaid）" class="md-header-anchor"></a><span>8、甘特图源码样例（mermaid）</span> <blockquote>x
</div> <div class="CodeMirror-measure"> </div> <div style="position: relative; z-index: 1;"> </div> <div class="CodeMirror-code" role="presentation" style=""> <div class="CodeMirror-activeline" style="position: relative;"> <div class="CodeMirror-activeline-background CodeMirror-linebackground"> </div> <div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"> </div> ``` <span role="presentation" style="padding-right: 0.1px;">```mermaid</span></div> <div class="" style="position: relative;"> ```%% 语法示例
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> gantt</span></div> <div class="" style="position: relative;"> ```dateFormat YYYY-MM-DD
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> title 软件开发甘特图</span></div> <div class="" style="position: relative;"> ```section 设计
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> 需求 :done, des1, 2014-01-06,2014-01-08</span></div> <div class="" style="position: relative;"> ```原型 :active, des2, 2014-01-09, 3d
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> UI设计 : des3, after des2, 5d</span></div> <div class="" style="position: relative;"> ```未来任务 : des4, after des3, 5d
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> section 开发</span></div> <div class="" style="position: relative;"> ```学习准备理解需求 :crit, done, 2014-01-06,24h
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> 设计框架 :crit, done, after des2, 2d</span></div> <div class="" style="position: relative;"> ```开发 :crit, active, 3d
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> 未来任务 :crit, 5d</span></div> <div class="" style="position: relative;"> ```耍 :2d
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> section 测试</span></div> <div class="" style="position: relative;"> ```功能测试 :active, a1, after des3, 3d
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;"> 压力测试 :after a1 , 20h</span></div> <div class="" style="position: relative;"> ```测试报告 : 48h
</div> <div class="" style="position: relative;"> ``` <span role="presentation" style="padding-right: 0.1px;">```</span></div> </div> </div> </div> </div> </div> <div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 421px;"> </div> <div class="CodeMirror-gutters" style="display: none; height: 421px;"> </div>例如：
<g></g><g class="grid" transform="translate(75, 338)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
- 2014-01-07 - 2014-01-09 - 2014-01-11 - 2014-01-13 - 2014-01-15 - 2014-01-17 - 2014-01-19 - 2014-01-21 - 2014-01-23 需求 学习准备理解需求 原型 UI设计 设计框架 开发 未来任务 未来任务 功能测试 压力测试 测试报告 耍 设计 开发 测试 - 软件开发甘特图 其它说明
1、graph 说明
#### 方向：<span>TB -top bottom</span> <span>BT -bottom top</span> <span>RL-right left</span> <span>TD -top bottom</span>节点形状
<span>矩形: [内容]</span> <span>圆角矩形：(内容)</span> <span>圆形：((内容))</span> <span>菱形：{内容}</span> <span>旗帜: >内容]</span>连接线
<span>实线直线： —</span> <span>虚线箭头: -.-></span> <span>虚线实线: -.-</span> <span>粗实线箭头: ==></span> <span>粗实线直线：===</span>标签
<span>箭头或直线后跟|标签|：</span>`A-->|标签|B` <span>在箭头或直线中打标签：</span>`A--标签-->B`
资料
https://github.com/adrai/flowchart.js
http://cncounter.github.io/flowchart/
💬 评论