markdown之mermaid

1.状态转换图

\(转义用)```mermaid
stateDiagram-v2
s1 --> s2: trasist
\（转义用）```

#mermaid-svg-xgYBZS9DdwgTvqsY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-xgYBZS9DdwgTvqsY .error-icon{fill:#552222;}#mermaid-svg-xgYBZS9DdwgTvqsY .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xgYBZS9DdwgTvqsY .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-xgYBZS9DdwgTvqsY .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xgYBZS9DdwgTvqsY .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xgYBZS9DdwgTvqsY .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xgYBZS9DdwgTvqsY .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xgYBZS9DdwgTvqsY .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xgYBZS9DdwgTvqsY .marker.cross{stroke:#333333;}#mermaid-svg-xgYBZS9DdwgTvqsY svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xgYBZS9DdwgTvqsY defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-xgYBZS9DdwgTvqsY g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-xgYBZS9DdwgTvqsY g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-xgYBZS9DdwgTvqsY g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-xgYBZS9DdwgTvqsY g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-xgYBZS9DdwgTvqsY g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-xgYBZS9DdwgTvqsY .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-xgYBZS9DdwgTvqsY .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-xgYBZS9DdwgTvqsY .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-xgYBZS9DdwgTvqsY .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-xgYBZS9DdwgTvqsY .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-xgYBZS9DdwgTvqsY .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-xgYBZS9DdwgTvqsY .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-xgYBZS9DdwgTvqsY .edgeLabel .label text{fill:#333;}#mermaid-svg-xgYBZS9DdwgTvqsY .label div .edgeLabel{color:#333;}#mermaid-svg-xgYBZS9DdwgTvqsY .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-xgYBZS9DdwgTvqsY .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-xgYBZS9DdwgTvqsY .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-xgYBZS9DdwgTvqsY .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-xgYBZS9DdwgTvqsY .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-xgYBZS9DdwgTvqsY .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xgYBZS9DdwgTvqsY .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xgYBZS9DdwgTvqsY #statediagram-barbEnd{fill:#333333;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xgYBZS9DdwgTvqsY .cluster-label,#mermaid-svg-xgYBZS9DdwgTvqsY .nodeLabel{color:#131300;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-xgYBZS9DdwgTvqsY .note-edge{stroke-dasharray:5;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-note text{fill:black;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram-note .nodeLabel{color:black;}#mermaid-svg-xgYBZS9DdwgTvqsY .statediagram .edgeLabel{color:red;}#mermaid-svg-xgYBZS9DdwgTvqsY #dependencyStart,#mermaid-svg-xgYBZS9DdwgTvqsY #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-xgYBZS9DdwgTvqsY :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

trasist

2.时序图

\(转义用)```mermaid
sequenceDiagram
s1 -->> s2: trasist
\（转义用）```

#mermaid-svg-4X4H9HjWGFJTYa1A {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-4X4H9HjWGFJTYa1A .error-icon{fill:#552222;}#mermaid-svg-4X4H9HjWGFJTYa1A .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-4X4H9HjWGFJTYa1A .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-4X4H9HjWGFJTYa1A .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-4X4H9HjWGFJTYa1A .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-4X4H9HjWGFJTYa1A .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-4X4H9HjWGFJTYa1A .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-4X4H9HjWGFJTYa1A .marker{fill:#333333;stroke:#333333;}#mermaid-svg-4X4H9HjWGFJTYa1A .marker.cross{stroke:#333333;}#mermaid-svg-4X4H9HjWGFJTYa1A svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-4X4H9HjWGFJTYa1A .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-4X4H9HjWGFJTYa1A text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-4X4H9HjWGFJTYa1A .actor-line{stroke:grey;}#mermaid-svg-4X4H9HjWGFJTYa1A .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-4X4H9HjWGFJTYa1A .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-4X4H9HjWGFJTYa1A #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-4X4H9HjWGFJTYa1A .sequenceNumber{fill:white;}#mermaid-svg-4X4H9HjWGFJTYa1A #sequencenumber{fill:#333;}#mermaid-svg-4X4H9HjWGFJTYa1A #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-4X4H9HjWGFJTYa1A .messageText{fill:#333;stroke:#333;}#mermaid-svg-4X4H9HjWGFJTYa1A .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-4X4H9HjWGFJTYa1A .labelText,#mermaid-svg-4X4H9HjWGFJTYa1A .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-4X4H9HjWGFJTYa1A .loopText,#mermaid-svg-4X4H9HjWGFJTYa1A .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-4X4H9HjWGFJTYa1A .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-4X4H9HjWGFJTYa1A .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-4X4H9HjWGFJTYa1A .noteText,#mermaid-svg-4X4H9HjWGFJTYa1A .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-4X4H9HjWGFJTYa1A .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-4X4H9HjWGFJTYa1A .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-4X4H9HjWGFJTYa1A .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-4X4H9HjWGFJTYa1A .actorPopupMenu{position:absolute;}#mermaid-svg-4X4H9HjWGFJTYa1A .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-4X4H9HjWGFJTYa1A .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-4X4H9HjWGFJTYa1A .actor-man circle,#mermaid-svg-4X4H9HjWGFJTYa1A line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-4X4H9HjWGFJTYa1A :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} s1 s2 trasist s1 s2