mermaid · 我的网页程序

# mermaid Markdown Preview Enhanced 使用 mermaid 来渲染流程图和时序图。 mermaid 代码块中的内容将会渲染 mermaid 图像。查看 mermaid 文档了解更多如果创建图形。 ``` TB - top bottom BT - bottom top RL - right left LR - left right TD - same as TB ``` ```mermaid graph LR a --> b; b --> c; c --> a; ``` ```mermaid graph LR A --> B; ``` # 节点与形状文本节点 ```mermaid graph TB id1; id[This is the text in the box]; ``` 圆角节点 ```mermaid graph LR id(This is the text in the box); ``` 圆节点(The form of a circle) ```mermaid graph LR id((This is the text in the circle)); ``` 非对称节点(asymetric shape) ```mermaid graph LR id>This is the text in the box] ``` 菱形节点(rhombus) ```mermaid graph LR id{This is the text in the box} ``` # 连接线节点间的连接线有多种形状，而且可以在连接线中加入标签：箭头形连接 ```mermaid graph LR; A-->B; ``` 开放行连接 ```mermaid graph LR A --- B ``` 标签连接 ```mermaid graph LR A -- This is the label text --- B; ``` 箭头标签连接虚线(dotted link，点连线) 粗实线==> ```mermaid graph LR A-.text.->B e==text==>f ``` # html 字符的转义字符转义字符的使用语法流程图定义如下： ```mermaid graph LR A["A double quote:#quot;"]-->B["A dec char:#9829;"] ``` 子图(Subgraphs) ```mermaid graph TB subgraph one a1 --> a2 end subgraph two b2 --> b2 end subgraph three c1 --> c2 end c1 --> a2 ``` # 基础 fontawesome 支持想加入来自frontawesome的图表字体，详情请点击：fontawdsome 引用的语法为：++fa:#icon class name#++ ```mermaid graph TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); B-->E(A fa:fa-camerra-retro perhaps?); ``` # 图表(graph) 定义连接线的样式 ```mermaid graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px; style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5; ``` ```mermaid graph LR classDef default fill:#f90,stroke:#555,stroke-width:4px; id3(Start)-->id4(Stop) ``` # 序列图(sequence diagram) ```mermaid sequenceDiagram Alice->John: Hello John, how are you ? John-->Alice:Great! Alice->>John: dont borther me ! John-->>Alice:Great! Alice-xJohn: wait! John--xAlice: Ok! ``` ```mermaid sequenceDiagram 　　participant John 　　participant Alice 　　Alice-xJohn:Hello John,how are you? 　　John-->>Alice:Great! ``` ``` 箭头的六种样式 -> –> ->> –>> -x –x ``` # 便签给序列图增加便签：具体规则： ```mermaid sequenceDiagram 　　participant John 　　Note left of John: Text in note ``` 跨越两个 Actor 的便签： ```mermaid sequenceDiagram 　　Alice->John:Hello John, how are you? 　　Note over Alice,John:A typical interaction ``` # 循环 Loops ```mermaid sequenceDiagram 　　Alice->>John: Hello! 　　loop Reply every minute 　　　　John->>Alice:Great! 　　end ``` # 选择 ALT 在序列图中选择的表达。规则如下： ```mermaid sequenceDiagram 　　Alice->>Bob: Hello Bob, how are you? 　　alt is sick 　　　　Bob->>Alice:not so good :( 　　else is well 　　　　Bob->>Alice:Feeling fresh like a daisy:) 　　end 　　opt Extra response 　　　　Bob->>Alice:Thanks for asking 　　end ``` # 甘特图(gantt) ```mermaid gantt dateFormat YYYY-MM-DD section S1 T1: 2014-01-01, 9d section S2 T2: 2014-01-11, 9d section S3 T3: 2014-01-02, 9d ``` ```mermaid gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h ``` ```mermaid graph LR sq[Square shape] --> ci((Circle shape)) subgraph A subgraph di{Diamond with line break} -.-> ro(Rounded) di==>ro2(Rounded square shape) end e --> od3>Really long text with linebreak<br>in an Odd shape] cyr[Cyrillic]-->cyr2((Circle shape Начало)); classDef green fill:#9f6,stroke:#333,stroke-width:2px; classDef orange fill:#f96,stroke:#333,stroke-width:4px; class sq,e green class di orange ``` 一个小 Bug 在 Markdown 模式下 ```mermaid graph TB id[a] ``` 与 LaTex 公式不能实现混编, 否则, 公式将不能正确显示. 若要与 LaTex 实现混编, 只需要将其改为下面的形式即可 <div class="mermaid">graph LR; id[a] </div>