{"id":447,"date":"2023-04-23T08:07:53","date_gmt":"2023-04-23T00:07:53","guid":{"rendered":"https:\/\/vm1.go2see.me\/?p=447"},"modified":"2023-04-23T17:21:54","modified_gmt":"2023-04-23T09:21:54","slug":"mermaid-%e5%ae%9e%e7%94%a8%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/vm1.go2see.me\/?p=447","title":{"rendered":"Mermaid \u5b9e\u7528\u6559\u7a0b"},"content":{"rendered":"<h1><a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/README\">Mermaid<\/a> \u5b9e\u7528\u6559\u7a0b<\/h1>\n<blockquote>\n<p>ref: <a href=\"https:\/\/mermaid.js.org\/config\/Tutorials.html\">https:\/\/mermaid.js.org\/config\/Tutorials.html<\/a> \u3001 www.edrawsoft.com <\/p>\n<p>\u6587\u4e2d Typora \u6e32\u67d3\u5931\u6557\u7684\u4f8b\u5b50\uff0c\u5728\u5176\u4ed6Render\u4e0d\u4e00\u5b9a\u5931\u6557\u3002<\/p>\n<\/blockquote>\n<h2>0. \u7b80\u4ecb<\/h2>\n<h3>0.1 \u4ec0\u4e48\u662fMermaid\uff1f<\/h3>\n<ul>\n<li>Mermaid\u662f\u4e00\u79cd\u4f7f\u7528 JS \u8fdb\u884c\u672c\u5730\u6e32\u67d3\u7684\u7ed8\u56fe\u5de5\u5177\uff0c\u7528\u6237\u53ef\u4ee5\u7528\u4ee3\u7801\u65b9\u5f0f\u5feb\u6377\u5730\u521b\u5efa\u56fe\u8868\uff0c\u5e7f\u6cdb\u96c6\u6210\u4e8e\u8bb8\u591a Markdown \u7f16\u8f91\u5668\u4e2d\u3002<\/li>\n<li>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/mermaid-js\/mermaid\uff08\u9700\u8981\u5c06\u68af\u5b50\u8bbe\u7f6e\u6210\u5168\u5c40\u6a21\u5f0f\u624d\u80fd\u8bbf\u95ee\">https:\/\/github.com\/mermaid-js\/mermaid\uff08\u9700\u8981\u5c06\u68af\u5b50\u8bbe\u7f6e\u6210\u5168\u5c40\u6a21\u5f0f\u624d\u80fd\u8bbf\u95ee<\/a>\uff09<\/li>\n<\/ul>\n<h3>0.2 \u600e\u4e48\u4f7f\u7528Mermaid\uff1f<\/h3>\n<ul>\n<li>\n<p>\u5728markdown\u4e2d\uff0c\u4f7f\u7528 <code> mermaid <\/code> \u6807\u6ce8\u7a0b\u5f0f\u8bed\u8a00\u7684\u4ee3\u7801\u6846\uff0c\u5373\u53ef\u88ab\u6e32\u67d3\u6210 mermaid\u56fe\u5f62\u3002\u4e00\u4e9b\u96c6\u6210\u4e86markdown\u7684\u7f16\u8f91\u5668\uff0c\u4f1a\u5b9e\u73b0\u90e8\u5206\u7684mermaid\u8bed\u6cd5\uff0c\u5982<a href=\"https:\/\/typora.io\/\"><strong>Typora<\/strong><\/a> \u548c <a href=\"https:\/\/stackedit.io\/app#\"><strong>StackEdit<\/strong><\/a>\u3002<\/p>\n<\/li>\n<li>\n<p>\u7f51\u9875\u53ef\u4ee5\u96c6\u6210Mermaid\u6e32\u67d3\u5668\uff0c\u4f7f\u7528\u6807\u8bb0\u65b9\u5f0f\u505amermaid\u6e32\u67d3\u3002<\/p>\n<p>\u7b80\u5355\u7684 \u5305\u542b mermaid\u56fe\u5f62\u7684html\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-{html}\"><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<\/head>\n<body>\n<div class=\"mermaid\">\ngraph LR\n    A --- B\n    B-->C[fa:fa-ban forbidden]\n    B-->D(fa:fa-spinner);\n<\/div>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/mermaid\/dist\/mermaid.min.js\"><\/script>\n<script>mermaid.initialize({startOnLoad:true});<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/li>\n<\/ul>\n<h3>0.3 Mermaid\u80fd\u7ed8\u5236\u54ea\u4e9b\u56fe\uff1f<\/h3>\n<p>mermaid \u8fd8\u5728\u6301\u7eed\u5f00\u53d1\u4e2d\uff0c\u76ee\u524d\u53ef\u4ee5\u753b\u7684\u56fe\u8868\u6709\uff1a<\/p>\n<ol>\n<li><code>graph<\/code>: \u57fa\u7840\u7684<strong>\u89d2\u8272\u8fde\u63a5\u56fe<\/strong>\u3002<br \/>\n\u63d0\u4f9b\u89d2\u8272\u7684\u5f62\u72b6\u3001\u989c\u8272\u3001\u548c\u8fde\u7ebf\u7684\u6837\u5f0f\u4e0e\u6807\u8bb0\u3002\u53ef\u4ee5\u7528\u6765\u8868\u8fbe\u5de5\u4f5c\u7684\u6d41\u7a0b\u56fe\u3002<\/li>\n<li><code>sequenceDiagram<\/code>\uff1a<strong>\u5e8f\u5217\u56fe<\/strong>\u3002UML\u76f8\u5bb9\u3002<br \/>\n\u8868\u8fbe\u591a\u4e2a\u89d2\u8272\u5728\u4e00\u8fde\u4e32\u987a\u5e8f\u4e8b\u4ef6\u53d1\u751f\u65f6\u7684\u4ea4\u4e92\u52a8\u4f5c\u3002<\/li>\n<li><code>classDiagram<\/code>\uff1a<strong>\u7c7b\u56fe<\/strong>\u3002UML\u76f8\u5bb9\u3002<br \/>\n\u9759\u6001\u7684\u8868\u8fbe\u7cfb\u7edf\u4e2d\u7684\u7c7b\u6216\u5b9e\u4f53\u4e4b\u95f4\u7684\u76f8\u4f9d\u5173\u7cfb\uff0c\u4ee5\u53ca\u7c7b\u7684\u5185\u5bb9\u63cf\u8ff0\u3002<\/li>\n<li><code>stateDiagram-v2<\/code>\uff1a<strong>\u72b6\u6001\u56fe<\/strong>\u3002UML\u76f8\u5bb9\u3002<br \/>\n\u753b\u51fa\u4efb\u52a1\u72b6\u6001\u673a\u7684\u72b6\u6001\u8f6c\u79fb\u56fe\u3002\u6807\u793a\u7740\u72b6\u6001\u673a\u7684\u9759\u6001\u8f6c\u6362\u7684\u62d3\u6251\u6837\u5f0f\u3002<\/li>\n<li><code>gantt<\/code>\uff1a<strong>\u7518\u7279\u56fe<\/strong>\u3002<br \/>\n\u5b89\u6392\u5206\u6790\u4e00\u4e2a\u5de5\u4f5c\u5185\u7684\u6240\u6709\u4efb\u52a1\u7684\u76f8\u4f9d\u5173\u7cfb\u3001\u9700\u65f6\u3001\u4ee5\u53ca\u5173\u952e\u6027\uff0c\u753b\u51fa\u4efb\u52a1\u7684\u6574\u4f53\u65f6\u7a0b\u3002<\/li>\n<li><code>pie<\/code>\uff1a<strong>\u997c\u72b6\u56fe<\/strong>\u3002<br \/>\n\u4f7f\u7528\u5706\u5f62\u8868\u793a\u6bcf\u4e2anode\u7684\u6570\u503c\u5728\u603b\u548c\u4e2d\u7684\u5360\u6bd4\u3002<\/li>\n<li><code>journey<\/code>\uff1a<strong>\u7528\u6237\u65c5\u7a0b\u56fe<\/strong>\u3002\u7ebf\u6027\u663e\u793a\u4e00\u4e2a\u65c5\u7a0b\u3002<br \/>\n\u53ef\u4ee5\u5c06\u884c\u7a0b\u5206\u9636\u6bb5\uff0c\u9636\u6bb5\u5185\u7684\u6bcf\u4e2a\u666f\u70b9\u53ef\u4ee5\u6709\u8bc4\u5206\u548c\u53c2\u4e0e\u4eba\u3002<\/li>\n<li><code>erDiagram<\/code>\uff1a<strong>\u5b9e\u4f53\u5173\u7cfb\u56fe<\/strong>\u3002\uff08Typora\u4e0d\u652f\u6301\u5b9e\u4f53\u7684\u5c5e\u6027\u5ba3\u544a\u3001StackEdit\u53ef\u4ee5\uff09<\/li>\n<li><code>gitGraph<\/code>\uff1a<strong>git \u5e93\u5206\u652f\u56fe<\/strong>\u3002\uff08Typora\u3001StackEdit\u652f\u6301\u4e0d\u4f73\uff09<\/li>\n<li><code>requirementDiagram<\/code>\uff1a<strong>\u7528\u6237\u9700\u6c42\u56fe<\/strong>\u3002\uff08Typora\u3001StackEdit\u4e0d\u652f\u6301\uff09<\/li>\n<\/ol>\n<p>Mermaid \u662f\u4e00\u4e2a\u7528\u4e8e\u753b\u6d41\u7a0b\u56fe\u3001\u72b6\u6001\u56fe\u3001\u65f6\u5e8f\u56fe\u3001\u7518\u7279\u56fe\u7684\u5e93\uff0c\u4f7f\u7528 JS \u8fdb\u884c\u672c\u5730\u6e32\u67d3\uff0c\u5e7f\u6cdb\u96c6\u6210\u4e8e\u8bb8\u591a Markdown \u7f16\u8f91\u5668\u4e2d\u3002<\/p>\n<p>\u4e4b\u524d\u7528\u8fc7 PlantUML\uff0c\u4f46\u662f\u53d1\u73b0\u8fd9\u4e2a\u4e1c\u897f\u7684\u5b9e\u73b0\u539f\u7406\u662f\u751f\u6210 UML \u7684\u56fe\u7247\u540e\u4e0a\u4f20\u670d\u52a1\u7aef\uff0c\u6bcf\u6b21\u518d\u4ece\u670d\u52a1\u7aef\u8bfb\u53d6\uff0c\u56e0\u6b64\u89c9\u5f97\u4e0d\u591f\u9c81\u68d2\uff0c\u9690\u79c1\u6027\u4e5f\u4e0d\u597d\uff0c\u56e0\u800c\u5f03\u7528\u3002<\/p>\n<p>Mermaid \u4f5c\u4e3a\u4e00\u4e2a\u4f7f\u7528 JS \u6e32\u67d3\u7684\u5e93\uff0c\u751f\u6210\u7684\u4e0d\u662f\u4e00\u4e2a\u201c\u56fe\u7247\u201d\uff0c\u800c\u662f\u4e00\u6bb5 HTML \u4ee3\u7801\uff0c\u56e0\u6b64\u5b89\u5168\u8bb8\u591a\u3002<\/p>\n<p>\u5b98\u7f51\uff1a<a href=\"https:\/\/mermaidjs.github.io\/\">https:\/\/mermaidjs.github.io\/<\/a><br \/>\nGithub \u9879\u76ee\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/knsv\/mermaid\">https:\/\/github.com\/knsv\/mermaid<\/a><\/p>\n<p>\u5728markdown\u4e2d\uff0c\u4f7f\u7528 <code> <\/code>`<code>mermaid <\/code> \u6807\u6ce8\u8bed\u6cd5\u7684\u6587\u5b57\u6846\uff0c\u5373\u53ef\u88ab\u6e32\u67d3\u6210 mermaid\u56fe\u5f62\u3002<\/p>\n<h3>Mermaid \u57fa\u7840\u8bed\u6cd5\uff1a<\/h3>\n<p>\u8bed\u6cd5\u5f88\u7b80\u5355\uff0c\u6bcf\u4e00\u884c\u5b9a\u4e49\u4e00\u4e2a\u53c2\u6570\u6216\u662f\u63cf\u8ff0\u4e00\u4e2a\u56fe\u5f62\u7279\u5f81\u3002\u4e0d\u540c\u7684\u56fe\u5f62\u7c7b\u522b\u4f1a\u6709\u4e0d\u540c\u7279\u5f81\u7684\u63cf\u8ff0\uff0c\u4f46\u5927\u81f4\u4e0a\uff1a<\/p>\n<ul>\n<li>\u7b2c\u4e00\u884c\u662f\u56fe\u5f62\u7c7b\u522b\u3002<\/li>\n<li>\u4e4b\u540e\u7684\u6bcf\u4e00\u884c\u5c31\u662f\u56fe\u5f62\u4e2d\u7684\u8282\u70b9\u6216\u8fde\u7ebf\u7684\u63cf\u8ff0\u3002<\/li>\n<li>\u8fde\u7ebf\u4e0a\u53ef\u4ee5\u6709\u6807\u8bb0\uff0c\u901a\u5e38\u662f\u8fde\u7ebf\u63cf\u8ff0\u540e\u52a0\u4e0a\u5192\u53f7 <code>:<\/code> \uff0c\u5192\u53f7\u4e4b\u540e\u7684\u6587\u5b57\u5c31\u4f1a\u6807\u8bb0\u5728\u7ebf\u4e0a\u3002<\/li>\n<li>\u4ee5 <code>%%<\/code> \u5f00\u5934\u7684\u662fmermaid \u6ce8\u89e3\uff0c\u4e0d\u4f1a\u88ab mermaid \u6e32\u67d3\u3002<\/li>\n<\/ul>\n<h3>Mermaid \u56fe\u8868\u7c7b\u578b\uff1a<\/h3>\n<ol>\n<li>\u6d41\u7a0b\u56fe graph \/ flowchart <\/li>\n<li>\u987a\u5e8f\u56fe sequenceDiagram<\/li>\n<li>\u7c7b\u56fe classDiagram<\/li>\n<li>\u72b6\u6001\u56fe stateDiagram<\/li>\n<li>\u5b9e\u4f53\u5173\u7cfb\u56fe erDiagram ==\uff08Typora\u76ee\u524d\u4e0d\u80fd\u753b\u5c5e\u6027, StackEdit OK\uff09==<\/li>\n<li>\u7528\u6237\u65c5\u7a0b\u56fe journey<\/li>\n<li>\u7518\u7279\u56fe gantt<\/li>\n<li>\u997c\u72b6\u56fe pie<\/li>\n<li>\u9700\u6c42\u56fe requirementDiagram ==(Typora, StackEdit \u90fd\u4e0d\u652f\u6301)==<\/li>\n<li>Git \u56fe gitGraph  ==(Typora\u3001StackEdit \u76ee\u524d\u652f\u6301\u4e0d\u4f73)==<\/li>\n<\/ol>\n<h2>1. \u6d41\u7a0b\u56fe graph \/ flowchart<\/h2>\n<p>\u6d41\u7a0b\u56fe\u662f\u6700\u666e\u901a\u7684\u56fe\u8868\u3002\u5185\u5bb9\u4ee5\u8282\u70b9\u548c\u8282\u70b9\u95f4\u7684\u8fde\u7ebf\u8868\u8fbe\u3002<\/p>\n<ul>\n<li>\u6d41\u7a0b\u56fe\u8868\u6709\u56db\u4e2a\u5ef6\u5c55\u65b9\u5411\u3002<\/li>\n<li>\u8282\u70b9\u53ef\u4ee5\u6709\u540d\u79f0\u548c\u5916\u89c2\u9009\u62e9\u3002<\/li>\n<li>\u8fde\u7ebf\u6709\u6837\u5f0f\u3001\u7bad\u53f7\u3001\u53ef\u9009\uff0c\u8fd8\u53ef\u4ee5\u6dfb\u52a0\u6807\u8bb0\u3001\u5ef6\u957f\u8fde\u7ebf\u3002\u65b0\u7684\u6d41\u7a0b\u56fe <code>flowchart<\/code> \u7c7b\u578b\u5c1a\u5728beta\u7248\u672c\uff0c\u8bed\u6cd5\u4e0d\u53d8\u3002\u76ee\u524d\u8fde\u7ebf\u8868\u8fbe\u65b9\u5f0f\u66f4\u591a\u6837\u5316\u4e86\u3002<\/li>\n<li>\u53ef\u4ee5\u6709\u5b50\u56fe\uff0c\u5c06\u56fe\u8868\u518d\u5206\u95e8\u522b\u7c7b\u8868\u8fbe\u3002\u5b50\u56fe\u53ef\u4ee5\u5305\u542b\u5b50\u56fe\uff0c\u8fd8\u53ef\u5f53\u65b0\u7684\u8282\u70b9\u5efa\u7acb\u8fde\u7ebf\u3002<\/li>\n<li>\u6709 <code>style<\/code>\u548c <code> linkstyle<\/code> \u53ef\u4ee5\u4fee\u9970 \u8282\u70b9\u548c\u7ebf\u6761\u7684\u989c\u8272\u4e0e\u8fb9\u6846\u3002\u8fd8\u53ef\u7528 <code>class<\/code> \u5c06\u5b9a\u4e49style\uff0c\u7136\u540e\u591a\u4e2a\u8282\u70b9\u7528\u540c\u4e00\u79cd class \u7684 style \u6e32\u67d3\u3002<\/li>\n<\/ul>\n<h3>1.1 \u56fe\u8868\u7c7b\u578b+\u65b9\u5411<\/h3>\n<p>Mermaid \u652f\u6301\u56db\u79cd\u5ef6\u5c55\u56fe\u8868\u7684\u65b9\u5411\uff0c\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">graph \u65b9\u5411\u63cf\u8ff0\n    \u56fe\u8868\u4e2d\u7684\u5176\u4ed6\u8bed\u53e5...<\/code><\/pre>\n<p>\u5176\u4e2d\u201c\u65b9\u5411\u63cf\u8ff0\u201d\u4e3a\uff1a<br \/>\n<code>TB<\/code> \uff1a\u4ece\u4e0a\u5230\u4e0b\u3001 <code>BT<\/code> \uff1a\u4ece\u4e0b\u5230\u4e0a\u3001<code>LR<\/code>\uff1a\u4ece\u5de6\u5230\u53f3\u3001 <code>RL<\/code>\uff1a\u4ece\u53f3\u5230\u5de6\u3002\u7f3a\u7701\u503c\u662f\u4ece\u4e0a\u5230\u4e0b\u3002<code>TB<\/code> \u53ef\u4ee5\u7528\u4f20\u7edf\u7684 <code>TD<\/code> \uff08top down\uff09\u66ff\u4ee3\u3002<\/p>\n<h3>1.2 \u8282\u70b9\u5b9a\u4e49<\/h3>\n<pre><code class=\"language-{mermaid}\">&lt;\u8282\u70b9id&gt;[&lt;\u5de6\u8fb9\u6846&gt; &lt;\u8282\u70b9\u6587\u5b57&gt; &lt;\u53f3\u8fb9\u6846&gt;]<\/code><\/pre>\n<p>\u8282\u70b9id \u4e3a\u5fc5\u5907\uff0c\u5de6\u53f3\u8fb9\u6846\u548c\u8282\u70b9\u6587\u5b57\u4e3a\u53ef\u9009\uff0c\u6ca1\u6709\u7684\u8bdd\u662f\u4ee5id\u4e3a\u5185\u5bb9\u7684\u77e9\u5f62\u8282\u70b9\u3002id\u548c\u8fb9\u6846\u4e4b\u95f4\u4e0d\u80fd\u6709\u7a7a\u683c\u3002<\/p>\n<p>\u76ee\u524d\u670913\u79cd\u8282\u70b9\u8fb9\u6846\u6837\u5f0f\uff0c\u7528\u4e0b\u9762\u4f8b\u5b50\u5c55\u73b0\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">flowchart LR\n id1[\u77e9\u5f62]           %% \u4e00\u822c\u6d41\u7a0b\n id2(\u5706\u89d2\u77e9\u5f62)        %% \u4e8b\u4ef6\n id3((\u5706\u5f62))         %% \u5f00\u59cb\n id4([\u5706\u8fb9\u77e9\u5f62])      %% \u5f00\u59cb\/\u7ed3\u675f\n id5{\u83f1\u5f62}           %% \u6761\u4ef6\u5224\u5b9a\n id6{{\u516d\u89d2\u5f62}}       %% \u51c6\u5907\/\u6570\u636e\u4f20\u8f93\n id7&gt;\u65d7\u5e1c\u5f62]         %% \uff1f\n id8[[\u5b50\u7a0b\u5e8f]]       %% \u5b50\u7a0b\u5e8f\u6216\u9884\u5b9a\u4e49\u6d41\u7a0b\n id9[(\u5706\u67f1\u5f62)]       %% \u5b58\u50a8\n id10[\/\u53f3\u5e73\u884c\u56db\u8fb9\u5f62\/] %% \u6570\u636e\u8f93\u5165\/\u8f93\u51fa\n id11[\\\u5de6\u5e73\u884c\u56db\u8fb9\u5f62\\] %% \uff1f\n id12[\/\u6b63\u68af\u5f62\\]      %% \uff1f\n id13[\\\u5012\u68af\u5f62\/]      %% \u624b\u52a8\u64cd\u4f5c\n %%\u5e95\u4e0b\u75286\u79cd\u8fde\u7ebf\u8fde\u63a5\u8282\u70b9\uff0c\u6f14\u793a\u56fe\u5f62\u3002\uff08\u5b9e\u7ebf\u3001\u7c97\u5b9e\u7ebf\u3001\u865a\u7ebf\uff09x\uff08\u65e0\u7bad\u5934\u3001\u6709\u7bad\u5934\uff09\u5171\u516d\u79cd\u8fde\u7ebf\u3002\n  id1---id2--&gt;id3===|\u7ebf\u5c3e\u6dfb\u52a0\u6807\u6ce8|id4==&gt;id5; \n  id6-.-id7-.-id8-.\u7ebf\u4e2d\u589e\u52a0\u6807\u6ce8.-&gt;id9; \n  id10 -.- id11-.-id12-..-|\u5ef6\u957f\u865a\u7ebf, &lt;br&gt;\u5e76\u5728\u7ebf\u5c3e\u7528\u53cc\u7ad6\u7ebf\u589e\u52a0\u6807\u6ce8|id13<\/code><\/pre>\n<p>\u6e32\u67d3\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-mermaid\">flowchart LR\n id1[\u77e9\u5f62]           %% \u4e00\u822c\u6d41\u7a0b\n id2(\u5706\u89d2\u77e9\u5f62)        %% \u4e8b\u4ef6\n id3((\u5706\u5f62))         %% \u5f00\u59cb\n id4([\u5706\u8fb9\u77e9\u5f62])      %% \u5f00\u59cb\/\u7ed3\u675f\n id5{\u83f1\u5f62}           %% \u6761\u4ef6\u5224\u5b9a\n id6{{\u516d\u89d2\u5f62}}       %% \u51c6\u5907\/\u6570\u636e\u4f20\u8f93\n id7&gt;\u65d7\u5e1c\u5f62]         %% \uff1f\n id8[[\u5b50\u7a0b\u5e8f]]       %% \u5b50\u7a0b\u5e8f\u6216\u9884\u5b9a\u4e49\u6d41\u7a0b\n id9[(\u5706\u67f1\u5f62)]       %% \u5b58\u50a8\n id10[\/\u53f3\u5e73\u884c\u56db\u8fb9\u5f62\/] %% \u6570\u636e\u8f93\u5165\/\u8f93\u51fa\n id11[\\\u5de6\u5e73\u884c\u56db\u8fb9\u5f62\\] %% \uff1f\n id12[\/\u6b63\u68af\u5f62\\]      %% \uff1f\n id13[\\\u5012\u68af\u5f62\/]      %% \u624b\u52a8\u64cd\u4f5c\n %%\u5e95\u4e0b\u75286\u79cd\u8fde\u7ebf\u8fde\u63a5\u8282\u70b9\uff0c\u6f14\u793a\u56fe\u5f62\u3002\uff08\u5b9e\u7ebf\u3001\u7c97\u5b9e\u7ebf\u3001\u865a\u7ebf\uff09x\uff08\u65e0\u7bad\u5934\u3001\u6709\u7bad\u5934\uff09\u5171\u516d\u79cd\u8fde\u7ebf\u3002\n  id1---id2--&gt;id3===|\u7ebf\u5c3e\u6dfb\u52a0\u6807\u6ce8|id4==&gt;id5; \n  id6-.-id7-.-id8-.\u7ebf\u4e2d\u589e\u52a0\u6807\u6ce8.-&gt;id9; \n  id10 -.- id11-.-id12-..-|\u5ef6\u957f\u865a\u7ebf, &lt;br&gt;\u5e76\u5728\u7ebf\u5c3e\u7528\u53cc\u7ad6\u7ebf\u589e\u52a0\u6807\u6ce8|id13<\/code><\/pre>\n<blockquote>\n<p><strong>Note:<\/strong> mermaid graph \u7684\u8282\u70b9\u5f62\u72b6\u4e0d\u591a\uff0c\u4e0d\u80fd\u5b8c\u5168\u5bf9\u5e94\u5230\u4f20\u7edf\u6d41\u7a0b\u56fe\u3002<br \/>\n\u4ee5\u4e0b\u8282\u5f55\u4f20\u7edf\u6d41\u7a0b\u56fe\u7684\u4e00\u4e9b\u53ef\u80fd\u7684\u7b26\u53f7\u4f9b\u53c2\u8003\uff1a(from www.edrawsoft.com )<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.edrawsoft.com\/cn\/images\/shapes\/BasicFlow_Shapes.png\" alt=\"\u6807\u51c6\u6d41\u7a0b\u56fe\u7b26\u53f7\" \/> <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.edrawsoft.com\/cn\/images\/shapes\/AuditFlow_Shapes.png\" alt=\"\u5ba1\u8ba1\u6d41\u7a0b\u56fe\u7b26\u53f7\" \/> <\/p>\n<\/blockquote>\n<p>\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u5982\u679c\u8282\u70b9\u7684\u6587\u5b57\u4e2d\u5305\u542b\u6807\u70b9\u7b26\u53f7\uff0c\u9700\u8981\u65f6\u7528\u53cc\u5f15\u53f7\u5305\u88f9\u8d77\u6765\u3002<br \/>\n\u53e6\u5916\u5982\u679c\u5e0c\u671b\u5728\u6587\u5b57\u4e2d\u4f7f\u7528\u6362\u884c\uff0c\u8bf7\u4f7f\u7528<br \/>\n\u66ff\u6362\u6362\u884c<\/p>\n<h3>1.3 \u8282\u70b9\u95f4\u7684\u8fde\u7ebf<\/h3>\n<ul>\n<li><code>graph<\/code> \u7684\u8fde\u7ebf\u53ea\u6709\u5b9e\u7ebf <code>---<\/code>\u3001\u7c97\u5b9e\u7ebf<code>===<\/code>\u3001\u865a\u7ebf<code>-.-<\/code> \u4e09\u79cd\u7ebf\u6761\u3002\u8fde\u7ebf\u53ef\u4ee5\u589e\u52a0\u7bad\u5934\uff1a\u5b9e\u7ebf <code>--&gt;<\/code>\u3001\u7c97\u5b9e\u7ebf<code>==&gt;<\/code>\u3001\u865a\u7ebf<code>-.-&gt;<\/code> \u3002\u5171\u67093x(1+1)=6\u79cd\u7ebf\u6837\u5f0f\u3002<\/li>\n<li>\u65b0\u7684 mermaid beta \u4f7f\u7528 <code>flowchart<\/code> \u53d6\u4ee3 <code>graph<\/code>\uff0c\u6dfb\u52a0\u4e24\u79cd\u7bad\u5934\uff1a\u5706\u70b9\u7bad\u5934<code>--o<\/code> \uff0c\u548cx\u7bad\u5934<code>--x<\/code>\u3002\u4e09\u79cd\u7bad\u5934\u8fde\u7ebf\u53ef\u4ee5\u662f\u53cc\u5411\u7bad\u5934\uff1a<code>&lt;--&gt;<\/code> \u3001<code>o--o<\/code> \u3001<code>x--x<\/code>\u3002\u5171\u67093x(1+3+3)=21\u79cd\u7ebf\u6837\u5f0f\u3002<\/li>\n<li>\u6709\u4e24\u79cd\u65b9\u6cd5\u53ef\u4ee5\u5728\u7ebf\u4e0a\u6dfb\u52a0\u6807\u8bb0\uff1a\n<ul>\n<li><strong>\u7ebf\u540e\u6807\u8bb0<\/strong>\uff0c\u5728\u7ebf\u540e\u7d27\u63a5\u7740\u7ad6\u7ebf\u5305\u5939\u7740\u6807\u8bb0\uff0c\u5982\uff1a<code>--&gt;|\u6807\u8bb0|<\/code>\u3001<code>==&gt;|\u6807\u8bb0|<\/code>\u3001<code>-.-&gt;|\u6807\u8bb0|<\/code>\u3002<\/li>\n<li><strong>\u7ebf\u4e2d\u6807\u8bb0<\/strong>\uff0c\u5982\uff1a<code>--\u6807\u8bb0--&gt;<\/code>\u3001<code>==\u6807\u8bb0==&gt;<\/code>\u3001<code>-.\u6807\u8bb0.-&gt;<\/code>\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u8981\u62c9\u957f\u8fde\u7ebf\uff0c\u4f9d\u636e\u5b9e\u7ebf\u3001\u7c97\u5b9e\u7ebf\u3001\u865a\u7ebf\u53ef\u589e\u52a0\u4e2d\u5fc3\u7b26\u53f7 <code>-<\/code> \u3001<code>=<\/code>\u3001 <code>.<\/code>\u6765\u5ef6\u957f\u3002\u82e5\u6709<strong>\u7ebf\u4e2d\u6807\u8bb0<\/strong>\uff0c\u62c9\u957f\u7b26\u53f7\u6dfb\u52a0\u5728\u6807\u8bb0\u540e\u3002<\/li>\n<li>\u53ef\u4ee5\u5728\u540c\u4e00\u884c\u4e2d\u4e32\u591a\u7ea7\u7684\u8fde\u63a5\uff0c\u6216\u662f\u5ba3\u544a\u591a\u70b9\u5bf9\u591a\u70b9\u7684\u8fde\u63a5\u3002\u5982\u4e0b\u4f8b\u5b50\uff1a<\/li>\n<\/ul>\n<p><code>flowchart<\/code> 21\u79cd\u8fde\u7ebf\u3001\u4e24\u79cd\u6807\u8bb0\u4e0e\u5ef6\u957f\u7ebf\u7efc\u5408\u8303\u4f8b\uff1a<\/p>\n<pre><code class=\"language-{mermiad}\">flowchart LR\na --- b ===c-.-d    -...-|\u65e0\u7bad\u5934\/&lt;br&gt;\u6709\u7bad\u5934| e  %% \u4f7f\u7528\u7ebf\u5c3e\u53cc\u7ad6\u7ebf\u6807\u6ce8\uff0c\u7ebf\u4e2d\u6dfb\u52a0\u7ebf\u7684\u5ef6\u957f\u5b57\u7b26\ne--&gt;f==&gt;g-.-&gt;h\ne&lt;--&gt;f&lt;==&gt;g&lt;-.-&gt;h\n\ni --o j ==o k -.-o l   -.o\u7bad\u5934 \/&lt;br&gt;x\u7bad\u5934...- m %% \u4f7f\u7528\u7ebf\u4e2d\u6807\u6ce8\uff0c\u6807\u6ce8\u540e\u6dfb\u52a0\u7ebf\u7684\u5ef6\u957f\u5b57\u7b26\ni o--o j o==o k o-.-o l\nm --x n ==x o -.-x p\nm x--x n x==x o x-.-x p<\/code><\/pre>\n<pre><code class=\"language-mermaid\">flowchart LR\na --- b ===c-.-d    -...-|\u65e0\u7bad\u5934\/&lt;br&gt;\u6709\u7bad\u5934| e  %% \u4f7f\u7528\u7ebf\u5c3e\u53cc\u7ad6\u7ebf\u6807\u6ce8\uff0c\u7ebf\u4e2d\u6dfb\u52a0\u7ebf\u7684\u5ef6\u957f\u5b57\u7b26\ne--&gt;f==&gt;g-.-&gt;h\ne&lt;--&gt;f&lt;==&gt;g&lt;-.-&gt;h\n\ni --o j ==o k -.-o l   -.o\u7bad\u5934 \/&lt;br&gt;x\u7bad\u5934...- m %% \u4f7f\u7528\u7ebf\u4e2d\u6807\u6ce8\uff0c\u6807\u6ce8\u540e\u6dfb\u52a0\u7ebf\u7684\u5ef6\u957f\u5b57\u7b26\ni o--o j o==o k o-.-o l\nm --x n ==x o -.-x p\nm x--x n x==x o x-.-x p<\/code><\/pre>\n<p>\u591a\u70b9\u5bf9\u591a\u70b9\u7684\u8fde\u63a5\u5982\u4e0b\u4f8b\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">flowchart LR\n   a --&gt; b &amp; c--&gt; d &amp; e<\/code><\/pre>\n<pre><code class=\"language-mermaid\">flowchart LR\n   a --&gt; b &amp; c--&gt; d &amp; e<\/code><\/pre>\n<h3>1.4 \u5b50\u56fe\u8868<\/h3>\n<ul>\n<li>\u4f7f\u7528\u4ee5\u4e0b\u8bed\u6cd5\u6dfb\u52a0\u5b50\u56fe\u8868\uff1a<\/li>\n<\/ul>\n<pre><code class=\"language-{mermaid}\">subgraph \u5b50\u56fe\u8868\u540d\u79f0\n    \u5b50\u56fe\u8868\u4e2d\u7684\u63cf\u8ff0\u8bed\u53e5...\nend<\/code><\/pre>\n<ul>\n<li>\u5b50\u56fe\u8868\u53ef\u4ee5\u5305\u542b\u5b50\u56fe\u8868<\/li>\n<li>\u8fde\u7ebf\u53ef\u4ee5\u8de8\u8d8a\u5b50\u56fe\u8868\uff0c<\/li>\n<li>\u5b50\u56fe\u8868\u7684id\u4e5f\u53ef\u4ee5\u5f53\u8282\u70b9\u8ba9\u5176\u4ed6\u8282\u70b9\u8fde\u7ebf\u3002<\/li>\n<\/ul>\n<p>\u5b50\u56fe\u8868\u8303\u4f8b\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">flowchart TB\n    c1--&gt;a2\n    subgraph one\n    a1--&gt;a2\n    end\n    subgraph two\n    b1--&gt;b2\n    end\n    subgraph three\n    c1--&gt;c2\n    subgraph four %%\u5b50\u56fe\u8868\u4e2d\u7684\u5b50\u56fe\u8868\n    d1--&gt;d2\n    end\n    end\n    one --&gt; two %%\u5b50\u56fe\u8868\u548c\u8282\u70b9\u3001\u5b50\u56fe\u8868\u7684\u8fde\u63a5\n    two --&gt; c2\n    three --&gt; two<\/code><\/pre>\n<pre><code class=\"language-mermaid\">flowchart TB\n    c1--&gt;a2\n    subgraph one\n    a1--&gt;a2\n    end\n    subgraph two\n    b1--&gt;b2\n    end\n    subgraph three\n    c1--&gt;c2\n    subgraph four %%\u5b50\u56fe\u8868\u4e2d\u7684\u5b50\u56fe\u8868\n    d1--&gt;d2\n    end\n    end\n    one --&gt; two %%\u5b50\u56fe\u8868\u548c\u8282\u70b9\u3001\u5b50\u56fe\u8868\u7684\u8fde\u63a5\n    two --&gt; c2\n    three --&gt; two<\/code><\/pre>\n<h3>1.7 \u6dfb\u52a0\u989c\u8272\u8fb9\u6846\u6837\u5f0f\uff1astyle\/linkstyle\/classDef\/class<\/h3>\n<ul>\n<li>\n<p>\u7528 <code>style<\/code> \u63cf\u8ff0\u8282\u70b9\u7684 svg \u6837\u5f0f\u3002\u4f7f\u7528 <code>,<\/code> \u5206\u5f00\u5404\u4e2a\u680f\u4f4d\u3002\u680f\u4f4d\u662f\u5192\u53f7 <code>:<\/code> \u5206\u5f00\u7684 <code>\u540d\u79f0:\u6570\u503c<\/code> \u5bf9\u3002<\/p>\n<ul>\n<li><code>fill:#RGB<\/code> :\u586b\u5145\u8272<\/li>\n<li><code>stroke:#RGB<\/code> : \u7ebf\u6761\u8272<\/li>\n<li><code>stroke-width:2px<\/code>: \u7ebf\u6761\u5bbd\u5ea6<\/li>\n<li><code>stroke-dasharray: 5, 5<\/code> : \u865a\u7ebf\u70b9\u7684\u663e\u793a\/\u906e\u6ca1\u70b9\u5bbd\u3002<\/li>\n<li><code>color:#RGB<\/code> : \u524d\u666f\u8272\u3002RGB \u53ef\u4ee5\u5404\u662f 1\u62162\u4f4d\u7684 16\u8fdb\u6570\u5b57\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u7528 <code>linkstyle<\/code>  \u63cf\u8ff0\u8fde\u7ebf\u7684 svg \u6837\u5f0f\u3002\u6837\u5f0f\u8bed\u6cd5\u4e0estyle\u540c\u3002<\/p>\n<\/li>\n<li>\n<p>\u7528 <code>classDef<\/code> \u53ef\u4ee5\u5b9a\u4e49\u4e00\u4e2a svg \u6837\u5f0f\u7c7b\u522b\uff0c\u4e4b\u540e\u53ef\u4ee5\u6709\u591a\u4e2a\u8282\u70b9\u4f7f\u7528\u6b64\u6837\u5f0f\u3002 \u6837\u5f0f\u8bed\u6cd5\u4e0estyle\u540c\u3002<\/p>\n<p>\u5982\uff1a<code>classDef className fill:#ff0,stroke:#333,stroke-width:4px;<\/code><br \/>\n\u4f7f\u7528\u65f6\uff1a<\/p>\n<ul>\n<li>\u7528 <code>class<\/code> \u5ba3\u544a\uff08\u9017\u53f7\u533a\u9694\u591a\u4e2a\uff09\u8282\u70b9\u91c7\u7528\u7684\u56fe\u5f62\u6837\u5f0f\u7c7b\u522b\u3002\u5982\uff1a<br \/>\n<code>class id4,id5 className;<\/code><\/li>\n<li>\u6216\u76f4\u63a5\u5728\u56fe\u4e2d\u8282\u70b9\u540e\u7528 <code>:::<\/code> \u5ba3\u544a\u4f7f\u7528\u7684 class \u5982\uff1a<br \/>\n<code>id3:::className --&gt; id4<\/code><\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u5f53 <code>className<\/code> \u4e3a <code>default<\/code> \u65f6\uff0c\u662f\u7f3a\u7701\u503c\u3002\u53ef\u4ee5\u7edf\u4e00\u56fe\u8868\u7684\u7f3a\u7701\u989c\u8272\u8fb9\u6846\u6837\u5f0f\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u7efc\u5408\u793a\u4f8b\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">flowchart LR\n    id1(Start)&lt;--&gt;id2(Stop) o--o id3:::className --o id4\n    id3 x-.-x id5\n    classDef className fill:#ff0,stroke:#333,stroke-width:4px,stroke-dasharray:3, 3;\n    style id1 fill:#f9f,stroke:#333,stroke-width:4px\n    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5\n    class id4,id5 className;\n    linkStyle 0 stroke:#333,stroke-width:2px,stroke-dasharray: 6, 6<\/code><\/pre>\n<pre><code class=\"language-mermaid\">flowchart LR\n    id1(Start)&lt;--&gt;id2(Stop) o--o id3:::className1 --o id4\n    id3 x-.-x id5\n    classDef className1 fill:#ff0,stroke:#333,stroke-width:4px,stroke-dasharray:3, 3;\n    style id1 fill:#f9f,stroke:#333,stroke-width:4px\n    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5\n    class id4,id5 className1;\n    linkStyle 0 stroke:#333,stroke-width:2px,stroke-dasharray: 6, 6<\/code><\/pre>\n<blockquote>\n<p>Note\uff1a\u76ee\u524d typora\u67d0\u4e9b\u5f62\u72b6\u7684\u5916\u89c2<\/p>\n<\/blockquote>\n<h2>2. \u987a\u5e8f\u56fe sequenceDiagram (UML\u6837\u5f0f)<\/h2>\n<p>\u4f7f\u7528\u4ee5\u4e0b\u8bed\u6cd5\u5f00\u59cb\u987a\u5e8f\u56fe<\/p>\n<pre><code class=\"language-{mermaid}\">sequenceDiagram\n    [\u53c2\u4e0e\u80051][\u6d88\u606f\u7ebf][\u53c2\u4e0e\u80052]:\u6d88\u606f\u4f53\n    ...<\/code><\/pre>\n<p>\u4f8b\u5982<\/p>\n<pre><code class=\"language-{mermaid}\">sequenceDiagram\n    \u5f20\u4e09-&gt;&gt;\u674e\u56db: \u5403\u4e86\u5417\uff1f\n    \u674e\u56db-&gt;&gt;\u5f20\u4e09: \u5403\u4e86<\/code><\/pre>\n<h3>2.1 \u53c2\u4e0e\u8005<\/h3>\n<p>\u4e0a\u4f8b\u4e2d\u7684\u5f20\u4e09\u3001\u674e\u56db\u90fd\u662f\u53c2\u4e0e\u8005\uff0c\u4e0a\u4f8b\u4e2d\u7684\u8bed\u6cd5\u662f\u6700\u7b80\u5355\u7684\uff0c\u4e5f\u53ef\u4ee5\u660e\u663e\u8868\u660e\u53c2\u4e0e\u8005\u6709\u54ea\u4e9b<\/p>\n<pre><code class=\"language-{mermaid}\">sequenceDiagram\n    participant \u53c2\u4e0e\u8005 1\n    participant \u53c2\u4e0e\u8005 2\n    ...\n    participant \u7b80\u79f0 as \u53c2\u4e0e\u8005 3 #\u8be5\u8bed\u6cd5\u53ef\u4ee5\u5728\u63a5\u4e0b\u6765\u7684\u63cf\u8ff0\u4e2d\u4f7f\u7528\u7b80\u79f0\u6765\u4ee3\u66ff\u53c2\u4e0e\u8005 3<\/code><\/pre>\n<h3>2.2 \u6d88\u606f\u7ebf<\/h3>\n<table>\n<thead>\n<tr>\n<th>\u7c7b\u578b<\/th>\n<th>\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>-&gt;<\/code><\/td>\n<td>\u65e0\u7bad\u5934\u7684\u5b9e\u7ebf<\/td>\n<\/tr>\n<tr>\n<td><code>--&gt;<\/code><\/td>\n<td>\u65e0\u7bad\u5934\u7684\u865a\u7ebf<\/td>\n<\/tr>\n<tr>\n<td><code>-&gt;&gt;<\/code><\/td>\n<td>\u6709\u7bad\u5934\u7684\u5b9e\u7ebf<\/td>\n<\/tr>\n<tr>\n<td><code>--&gt;&gt;<\/code><\/td>\n<td>\u6709\u7bad\u5934\u7684\u865a\u7ebf<\/td>\n<\/tr>\n<tr>\n<td><code>-x<\/code><\/td>\n<td>\u672b\u7aef\u4e3a\u53c9\u7684\u5b9e\u7ebf\uff08\u8868\u793a\u5f02\u6b65\uff09<\/td>\n<\/tr>\n<tr>\n<td><code>--x<\/code><\/td>\n<td>\u672b\u7aef\u4e3a\u53c9\u7684\u865a\u7ebf\uff08\u8868\u793a\u5f02\u6b65\uff09<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><code>autonumber<\/code> : \u4f7f\u7528\u6b64\u53c2\u6570\u53c2\u6570\uff0c\u4e4b\u540e\u4f1a\u5728\u6d88\u606f\u7ebf\u4e0a\u81ea\u52a8\u52a0\u4e0a\u5e8f\u53f7\u3002<\/p>\n<h3>2.3 \u5904\u7406\u4e2d<\/h3>\n<p>\u5728\u6d88\u606f\u7ebf\u672b\u5c3e\u589e\u52a0 <code>+<\/code> \uff0c\u5219\u6d88\u606f\u63a5\u6536\u8005\u8fdb\u5165\u5f53\u524d\u6d88\u606f\u7684\u201c\u5904\u7406\u4e2d\u201d\u72b6\u6001\uff1b<br \/>\n\u5728\u6d88\u606f\u7ebf\u672b\u5c3e\u589e\u52a0 <code>-<\/code> \uff0c\u5219\u6d88\u606f\u63a5\u6536\u8005\u79bb\u5f00\u5f53\u524d\u6d88\u606f\u7684\u201c\u5904\u7406\u4e2d\u201d\u72b6\u6001\u3002<\/p>\n<p>\u6216\u8005\u4f7f\u7528\u4ee5\u4e0b\u8bed\u6cd5\u76f4\u63a5\u8bf4\u660e\u67d0\u4e2a\u53c2\u4e0e\u8005\u8fdb\u5165\u201c\u5904\u7406\u4e2d\u201d\u72b6\u6001<\/p>\n<pre><code>activate \u53c2\u4e0e\u8005<\/code><\/pre>\n<h3>2.4 \u6807\u6ce8<\/h3>\n<p>\u8bed\u6cd5\u5982\u4e0b<\/p>\n<pre><code>Note \u4f4d\u7f6e\u8868\u8ff0 \u53c2\u4e0e\u8005: \u6807\u6ce8\u6587\u5b57<\/code><\/pre>\n<p>\u5176\u4e2d\u4f4d\u7f6e\u8868\u8ff0\u53ef\u4ee5\u4e3a<\/p>\n<table>\n<thead>\n<tr>\n<th>\u8868\u8ff0<\/th>\n<th>\u542b\u4e49<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>right of<\/td>\n<td>\u53f3\u4fa7<\/td>\n<\/tr>\n<tr>\n<td>left of<\/td>\n<td>\u5de6\u4fa7<\/td>\n<\/tr>\n<tr>\n<td>over<\/td>\n<td>\u5728\u5f53\u4e2d\uff0c\u53ef\u4ee5\u9017\u53f7 <code>,<\/code> \u5206\u9694\u6a2a\u8de8\u591a\u4e2a\u53c2\u4e0e\u8005<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>2.5 \u5faa\u73af<\/h3>\n<p>\u8bed\u6cd5\u5982\u4e0b<\/p>\n<pre><code>loop \u5faa\u73af\u7684\u6761\u4ef6\n    \u5faa\u73af\u4f53\u63cf\u8ff0\u8bed\u53e5\nend<\/code><\/pre>\n<h3>2.6 \u5224\u65ad<\/h3>\n<pre><code>alt \u6761\u4ef6 1 \u63cf\u8ff0\n    \u5206\u652f 1 \u63cf\u8ff0\u8bed\u53e5\nelse \u6761\u4ef6 2 \u63cf\u8ff0 # else \u5206\u652f\u53ef\u9009\n    \u5206\u652f 2 \u63cf\u8ff0\u8bed\u53e5\nelse ...\n    ...\nend<\/code><\/pre>\n<p>\u5982\u679c\u9047\u5230\u53ef\u9009\u7684\u60c5\u51b5\uff0c\u5373\u6ca1\u6709 else \u5206\u652f\u7684\u60c5\u51b5\uff0c\u4f7f\u7528\u5982\u4e0b\u8bed\u6cd5\uff1a<\/p>\n<pre><code>opt \u6761\u4ef6\u63cf\u8ff0\n    \u5206\u652f\u63cf\u8ff0\u8bed\u53e5\nend<\/code><\/pre>\n<h3>2.7 \u4f8b\u5b50<\/h3>\n<pre><code class=\"language-{mermaid}\">sequenceDiagram\nautonumber\n    participant z as \u5f20\u4e09\n    participant l as \u674e\u56db\n\n    loop \u65e5\u590d\u4e00\u65e5\n        z-&gt;&gt;l: \u5403\u4e86\u5417\u60a8\u5450\uff1f\n        l--&gt;&gt;z: \u5403\u4e86\uff0c\u60a8\u5462\uff1f\n        activate z\n        Note over z: \u60f3\u4e86\u4e00\u4e0b\n        alt \u8fd8\u6ca1\u5403\n            z-xl: \u8fd8\u6ca1\u5462\uff0c\u6b63\u51c6\u5907\u56de\u53bb\u5403\n        else \u5df2\u7ecf\u5403\u4e86\n            z-xl: \u6211\u4e5f\u5403\u8fc7\u4e86\uff0c\u54c8\u54c8\n        end\n        opt \u5927\u8fc7\u5e74\u7684\n            l--&gt;z: \u795d\u60a8\u65b0\u5e74\u597d\u554a\n        end\n    end\n<\/code><\/pre>\n<p>\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">sequenceDiagram\nautonumber\n    participant z as \u5f20\u4e09\n    participant l as \u674e\u56db\n    loop \u65e5\u590d\u4e00\u65e5\n        z-&gt;&gt;+l: \u5403\u4e86\u5417\u60a8\u5450\uff1f\n        l--&gt;&gt;-z: \u5403\u4e86\uff0c\u60a8\u5462\uff1f\n        activate z\n        Note over z: \u60f3\u4e86\u4e00\u4e0b\n        alt \u8fd8\u6ca1\u5403\n            z-xl: \u8fd8\u6ca1\u5462\uff0c\u6b63\u51c6\u5907\u56de\u53bb\u5403\n        else \u5df2\u7ecf\u5403\u4e86\n            z-xl: \u6211\u4e5f\u5403\u8fc7\u4e86\uff0c\u54c8\u54c8\n        end\n        opt \u5927\u8fc7\u5e74\u7684\n            l--&gt;z: \u795d\u60a8\u65b0\u5e74\u597d\u554a\n        end\n    end<\/code><\/pre>\n<h2>3. \u7c7b\u56fe classDiagram (UML\u6837\u5f0f)<\/h2>\n<p>UML\u7684\u7c7b\u56fe\u7528\u4e8e\u8868\u8fbe\u7cfb\u7edf\u4e2d\u7684\u7c7b\u6216\u5b9e\u4f53\u4e4b\u95f4\u7684\u76f8\u4f9d\u5173\u7cfb\uff0c\u4ee5\u53ca\u7c7b\u7684\u5185\u5bb9\u63cf\u8ff0\uff0c\u662f\u4e00\u79cd\u9759\u6001\u7684\u7cfb\u7edf\u5173\u8054\u63cf\u8ff0\u3002<\/p>\n<h3>3.1 \u7c7b\u4e0e\u7c7b\u95f4\u7684\u5173\u7cfb\uff1a<\/h3>\n<p>\u4f7f\u7528\u4e0d\u540c\u6837\u5f0f\u7684\u8fde\u7ebf\u7b26\u53f7\u8fde\u63a5\u4e24\u4e2a\u7c7b\u7684\u540d\u79f0\uff0c\u8868\u793a\u7c7b\u4e4b\u95f4\u7684\u5173\u7cfb\u3002<\/p>\n<p>\u9664\u4e86UML\u7684\u7ee7\u627f\u3001\u7ec4\u5408\u3001\u805a\u5408\u3001\u5173\u8054\u3001\u4f9d\u8d56\u3001\u5b9e\u73b0\u30016\u5927\u5173\u7cfb\uff0c\u8fd8\u6709\u4e0d\u5e26\u7bad\u53f7\u7684\u5b9e\u73b0\u6216\u865a\u7ebf\uff0c\u6cdb\u6307\u6709\u5173\u7cfb\uff08\u5f3a\u6216\u5f31\uff09\u3002<\/p>\n<h4>3.1.1 \u5173\u7cfb\u6837\u5f0f\u5217\u4e3e\uff1a<\/h4>\n<pre><code class=\"language-{mermaid}\">classDiagram\nclassA &lt;|-- classB : Inheritance\/\u7ee7\u627f\nclassC *-- classD : Composition\/\u7ec4\u5408\nclassE o-- classF : Aggregation\/\u805a\u5408\nclassG &lt;-- classH : Association\/\u5173\u8054\nclassK &lt;.. classL : Dependency\/\u4f9d\u8d56\nclassM &lt;|.. classN : Realization\/\u5b9e\u73b0\nclassI -- classJ : Link(Solid)\/\u5b9e\u7ebf\u8fde\u63a5\nclassO .. classP : Link(Dashed)\/\u865a\u7ebf\u8fde\u63a5<\/code><\/pre>\n<p>\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">classDiagram\nclassA &lt;|-- classB : Inheritance\/\u7ee7\u627f\nclassC *-- classD : Composition\/\u7ec4\u5408\nclassE o-- classF : Aggregation\/\u805a\u5408\nclassG &lt;-- classH : Association\/\u5173\u8054\nclassK &lt;.. classL : Dependency\/\u4f9d\u8d56\nclassM &lt;|.. classN : Realization\/\u5b9e\u73b0\nclassI -- classJ : Link(Solid)\/\u5b9e\u7ebf\u8fde\u63a5\nclassO .. classP : Link(Dashed)\/\u865a\u7ebf\u8fde\u63a5<\/code><\/pre>\n<ul>\n<li>\u8fde\u7ebf\u7b26\u53f7\u51e0\u4e4e\u5c31\u662f\u7528\u753b\u7684\u5f88\u597d\u8bb0\uff0c\u53ef\u4ee5\u5728\u5192\u53f7\u540e\u6dfb\u52a0\u8fde\u7ebf\u7684\u8bf4\u660e\u3002\u5b9e\u7ebf:<code>--<\/code> \uff0c\u865a\u7ebf\uff1a<code>..<\/code> \uff0c \u65e0\u5c01\u5e95\u7bad\u53f7\uff1a<code>&lt;<\/code> \u6216\u00b7 <code>&gt;<\/code> \uff0c\u5c01\u5e95\u7bad\u53f7\uff1a <code>&lt;|<\/code>\uff0c  \u6216 <code>|&gt;<\/code> \uff0c\u5b9e\u5fc3\u68f1\u5f62 <code>*<\/code>\uff0c \u7a7a\u5fc3\u68f1\u5f62\uff1a<code>o<\/code>\u3002<\/li>\n<\/ul>\n<h4>3.1.2 \u5173\u7cfb\u524d\u540e\u6dfb\u52a0\u6ce8\u811a<\/h4>\n<ul>\n<li>\n<p>\u6ce8\u811a\u901a\u5e38\u662f\u7c7b\u5728\u76f8\u4e92\u5173\u7cfb\u4e0a\u53ef\u4ee5\u6709\u591a\u7684\u5b9e\u4f8b\u6570\u3002<\/p>\n<\/li>\n<li>\n<p>\u8fde\u7ebf\u524d\u540e\u53ef\u7528\u53cc\u5f15\u53f7 <code>&quot; &quot;<\/code> \u5305\u542b\u6587\u5b57\u4ee5\u6dfb\u52a0\u6ce8\u811a\uff0cUML\u7684\u6ce8\u811a\u6837\u5f0f\u6709\uff1a<\/p>\n<\/li>\n<li>\n<ul>\n<li><code>0..1<\/code> Zero or one<\/li>\n<li><code>1<\/code> Only 1<\/li>\n<li><code>0..1<\/code> Zero or One<\/li>\n<li><code>1..*<\/code> One or more<\/li>\n<li><code>*<\/code> Many<\/li>\n<li><code>n<\/code> n {where n&gt;1}<\/li>\n<li><code>0..n<\/code> zero to n {where n&gt;1}<\/li>\n<li><code>1..n<\/code> one to n {where n&gt;1}<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u6807\u793a\u6ce8\u811a\u7684\u7c7b\u5173\u7cfb\u4f8b\u5b50\uff1a<\/p>\n<pre><code class=\"language-C#\">classDiagram\nclassA &quot;1&quot; &lt;|-- &quot;1..n&quot; classB : Inheritance\/\u7ee7\u627f<\/code><\/pre>\n<pre><code class=\"language-mermaid\">classDiagram\nclassA &quot;1&quot; &lt;|-- &quot;1..n&quot; classB : Inheritance\/\u7ee7\u627f<\/code><\/pre>\n<h3>3.2 \u7c7b\u7684\u5185\u5bb9\u63cf\u8ff0<\/h3>\n<p>UML \u7c7b\u7684\u56fe\u5f62\u5206\u540d\u79f0\u3001\u53d8\u91cf\u3001\u65b9\u6cd5\u4e09\u680f\u3002 mermaid\u53ef\u4ee5\u6709\u5355\u884c\u6216\u591a\u884c\u4e24\u79cd\u63cf\u8ff0\u6cd5\u3002\u4e5f\u53ef\u6df7\u7528\u5355\u884c\/\u591a\u884c\u63cf\u8ff0\u6cd5\u3002<\/p>\n<ul>\n<li>\n<p>\u5355\u884c\u63cf\u8ff0\uff1a\u4ee5\u7c7b\u540d\u79f0\u5f00\u5934\u52a0\u5192\u53f7\uff0c\u4e4b\u540e\u7684\u53d9\u8ff0\u5c31\u662f\u5bf9\u4e00\u4e2a\u7c7b\u6210\u5458\u7684\u63cf\u8ff0\u3002\u7c7b\u540d\u79f0\u524d\u65b9\u8fd8\u53ef\u4ee5\u7528<code>&lt;&lt; &gt;&gt;<\/code>\u6dfb\u52a0\u7c7b\u7684\u6027\u8d28\u6807\u8bb0\u3002<\/p>\n<\/li>\n<li>\n<p>\u591a\u884c\u7c7b\u63cf\u8ff0\uff1a\u6253\u5305\u7684\u7c7b\u5199\u6cd5\u662f\uff1a<code>class &lt;name&gt;{ [lines]... }<\/code> \u3002\u540d\u79f0\u540e\u7528\u5927\u62ec\u53f7 <code class=\"kb-btn\"> <\/code> \u5305\u7740\u7684\u6bcf\u4e00\u884c\u90fd\u662f\u7c7b\u7684\u4e00\u4e2a\u6210\u5458\u7684\u53d9\u8ff0\uff0c\u6216\u662f\u7c7b\u7684\u6027\u8d28\u6807\u8bb0\u3002\u4e5f\u53ef\u7528<code> name : statements <\/code> \u6765\u4e3a name \u7c7b\u4e00\u884c\u4e00\u884c\u7684\u6dfb\u52a0\u6210\u5458\u3002<\/p>\n<\/li>\n<\/ul>\n<h4>3.2.1 \u7c7b\u7684\u6210\u5458\u548c\u6210\u5458\u4fee\u9970\u7b26\u53f7\uff1a<\/h4>\n<p>UML\/mermaid \u5bf9\u7c7b\u6bcf\u884c\u63cf\u8ff0\u7684\u4fee\u9970\u7b26\u53f7\uff1a<\/p>\n<ul>\n<li>\n<p>\u5e26\u5c0f\u62ec\u53f7 <code>( )<\/code> \u7684\u6210\u5458\u662f \u7c7b\u7684<strong>\u65b9\u6cd5<\/strong>\uff0c\u91cc\u9762\u5305\u7740\u7684\u662f\u65b9\u6cd5\u7684\u53c2\u6570\u3002<\/p>\n<\/li>\n<li>\n<p>\u5c0f\u62ec\u53f7\u540e\u7684\u6587\u5b57\u4ee3\u8868\u65b9\u6cd5\u7684<strong>\u8fd4\u56de\u503c<\/strong>\u3002<\/p>\n<\/li>\n<li>\n<p>\u7528\u66f2\u7ebf\u53f7 <code>~ ~<\/code> \u5305\u7740\u7684\u63cf\u8ff0\uff0c\u5728UML\u56fe\u4f1a\u663e\u793a\u6210\u5c16\u62ec\u5f27 <code>&lt; &gt;<\/code>\u5305\u7740 \uff0c\u4ee3\u8868\u524d\u65b9\u5b57\u6bb5\u7684<strong>\u7c7b\u522b<\/strong>\u3002<\/p>\n<\/li>\n<li>\n<p>\u6bcf\u4e2a\u6210\u5458\u884c\u524d\u65b9\u53ef\u4ee5\u6dfb\u52a0\u53ef\u89c1\u5ea6\u7684\u4fee\u9970\u7b26\uff1a<code>+<\/code> \u516c\u5f00\u7684\u3001<code>-<\/code> \u79c1\u4eba\u7684\u3001<code>#<\/code> \u53d7\u4fdd\u62a4\u7684\u3001<code>~<\/code> \u88ab\u5305\u88c5\/\u5185\u90e8\u7684\u3002<\/p>\n<\/li>\n<\/ul>\n<h4>3.2.2 \u5bf9\u7c7b\u7684\u6027\u8d28\u6807\u8bb0\u7b26\u53f7\uff1a<\/h4>\n<p>UML\u53ef\u4ee5\u4f7f\u7528\u7279\u5b9a\u7684\u6807\u8bb0 <code>&lt;&lt; &gt;&gt;<\/code> \u6587\u672c\u6765\u6ce8\u91ca\u7c7b\uff0c\u5c31\u50cf\u7c7b\u7684\u5143\u6570\u636e\u4e00\u6837\uff0c\u6e05\u695a\u5730\u8868\u660e\u5176\u6027\u8d28\u3002<\/p>\n<p>\u4e00\u4e9b\u5e38\u89c1\u7684\u6ce8\u91ca\u793a\u4f8b\u53ef\u80fd\u662f\uff1a<\/p>\n<ul>\n<li><code>&lt;&lt;Interface&gt;&gt;<\/code> \u8868\u793a\u63a5\u53e3\u7c7b<\/li>\n<li><code>&lt;&lt;abstract&gt;&gt;<\/code> \u8868\u793a\u62bd\u8c61\u7c7b<\/li>\n<li><code>&lt;&lt;Service&gt;&gt;<\/code> \u8868\u793a\u670d\u52a1\u7c7b<\/li>\n<li><code>&lt;&lt;enumeration&gt;&gt;<\/code> \u4ee3\u8868\u4e00\u4e2a\u679a\u4e3e<\/li>\n<\/ul>\n<p>\u53ef\u4ee5\u5728\u5355\u884c\u7c7b\u5ba3\u544a\u7684\u6700\u5f00\u5934\u6dfb\u52a0\u6b64\u6ce8\u91ca\uff0c\u6216\u662f\u5728\u6a21\u5757\u5927\u62ec\u53f7\u5185\u7684\u7b2c\u4e00\u884c\u6dfb\u52a0\u7c7b\u7684\u6027\u8d28\u6ce8\u91ca\u3002<\/p>\n<p>\u4e5f\u53ef\u5728\u7c7b\u5ba3\u544a\u540e\u7684\u5176\u4ed6\u5730\u65b9\u518d\u4e3a\u7c7b\u6dfb\u52a0\u6210\u5458\uff0c\u5199\u6cd5\u662f <code>\u7c7b\u540d\u79f0: \u6210\u5458\u63cf\u8ff0<\/code>\u3002<\/p>\n<h3>3.3 \u7c7b\u7684\u5ba3\u544a\u4e3e\u4f8b<\/h3>\n<p>\u7c7b\u5ba3\u544a\u6837\u5f0f\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">classDiagram\n\nclass Square~Shape~{\n        &lt;&lt;interface&gt;&gt; \n    int id\n    List~int~ position\n    setPoints(List~int~ points)\n    getPoints() List~int~\n}\n%%\u6dfb\u52a0messages\u53c2\u6570\uff0c\u662f string\u578b\u522b\u7684 List \nSquare : -List~string~ messages  \n%%\u6dfb\u52a0setMessages\u65b9\u6cd5\uff0c\u53c2\u6570 message \u662f string\u578b\u522b\u7684 List \nSquare : +setMessages(List~string~ messages)\n%%\u6dfb\u52a0getMessages\u65b9\u6cd5\uff0c\u8fd4\u56de\u503c\u662f string\u578b\u522b\u7684 List\nSquare : +getMessages() List~string~   \n%%\u5bf9\u7c7b\u6dfb\u52a0\u968f\u610f\u5b9a\u7684 &lt;&lt;test_only&gt;&gt; \u6807\u8bb0\n&lt;&lt;test_only&gt;&gt; Square<\/code><\/pre>\n<p>\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">classDiagram\n\nclass Square~Shape~{\n        &lt;&lt;interface&gt;&gt; \n    int id\n    List~int~ position\n    setPoints(List~int~ points)\n    getPoints() List~int~\n}\n%%\u6dfb\u52a0messages\u53c2\u6570\uff0c\u662f string\u578b\u522b\u7684 List \nSquare : -List~string~ messages  \n%%\u6dfb\u52a0setMessages\u65b9\u6cd5\uff0c\u53c2\u6570 message \u662f string\u578b\u522b\u7684 List \nSquare : +setMessages(List~string~ messages)\n%%\u6dfb\u52a0getMessages\u65b9\u6cd5\uff0c\u8fd4\u56de\u503c\u662f string\u578b\u522b\u7684 List\nSquare : +getMessages() List~string~   \n%%\u5bf9\u7c7b\u6dfb\u52a0\u968f\u610f\u5b9a\u7684 &lt;&lt;test_only&gt;&gt; \u6807\u8bb0\n&lt;&lt;test_only&gt;&gt; Square<\/code><\/pre>\n<h2>4.\u72b6\u6001\u56fe stateDiagram (UML\u6837\u5f0f)<\/h2>\n<p>UML\u7684 state diagram \u662f\u72b6\u6001\u8f6c\u6362\u56fe\uff0c\u6807\u793a\u7740\u72b6\u6001\u673a\u7684\u9759\u6001\u8f6c\u6362\u62d3\u6251\u6837\u5f0f\u3002<br \/>\nmeimaid\u7684\u72b6\u6001\u56fe\u4f7f\u7528\u4e86v2\u7248\u672c\u3002\u56fe\u5f62\u5ba3\u544a\u4e3a\uff1a<code>stateDiagram-v2<\/code><\/p>\n<h3>4.1 \u72b6\u6001<\/h3>\n<p>\u2003\u2003\u72b6\u6001\u56fe\u7684\u5b9a\u4e49\u6709\u5f88\u591a\uff0c\u4e3a\u4e86\u4fbf\u4e8e\u8bb0\u5fc6\uff0c\u4e2a\u4eba\u6311\u9009\u4e86\u6700\u5e38\u7528\u7684\u4e00\u79cd\u5199\u6cd5\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">stateDiagram-v2\ns2 : \u8fd9\u662f\u72b6\u60012<\/code><\/pre>\n<p>\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">stateDiagram-v2\ns2 : \u8fd9\u662f\u72b6\u60012<\/code><\/pre>\n<p>\u2003\u2003:\u524ds2\u662f\u72b6\u6001\u7684ID,\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<h3>4.2 \u72b6\u6001\u8f6c\u6362<\/h3>\n<p>\u2003\u2003mermaid\u7528&#8211;&gt;\u8868\u793a\u4e24\u4e2a\u72b6\u6001\u95f4\u7684\u8f6c\u6362\uff0c\u6bd4\u5982\uff1a s1 &#8211;&gt; s2\u3002\u4f60\u4e5f\u53ef\u4ee5\u7528:\u52a0\u4e0a\u63cf\u8ff0\u7b26\u7ec4\u6210\u8f6c\u6362\u6761\u4ef6\uff1as1 &#8211;&gt; s2 :\u8f6c\u6362\uff0c\u4ee3\u7801\u4e3a\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">stateDiagram-v2\ns1 --&gt; s2: A transition<\/code><\/pre>\n<p>\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">stateDiagram-v2\ns1 --&gt; s2: A transition<\/code><\/pre>\n<h3>4.3 \u521d\u59cb\u548c\u7ec8\u6b62\u72b6\u6001<\/h3>\n<p>\u2003\u2003\u5728\u72b6\u6001\u8f6c\u6362\u56fe\u4e2d\uff0c\u6709\u4e24\u4e2a\u7279\u6b8a\u7684\u72b6\u6001\uff1a\u521d\u59cb\u72b6\u6001\u548c\u7ec8\u6b62\u72b6\u6001(\u4e0d\u660e\u767d\u8fd9\u4e24\u4e2a\u77e5\u8bc6\u53ef\u4ee5\u8865\u4e60\u72b6\u6001\u673a\u76f8\u5173\u77e5\u8bc6)\u3002\u5b83\u4eec\u662f\u7528[*]\u7b26\u53f7\u548c&#8211;&gt;\u6807\u8bc6\u7684\u8f6c\u6362\u3002<\/p>\n<ul>\n<li><code>[*] --&gt; s1<\/code>\uff0c\u8868\u793a\u521d\u59cb\u72b6\u6001\u5230s1\u3002<\/li>\n<li><code>s1 --&gt; [*]<\/code>\uff0c\u8868\u793as1\u5230\u7ec8\u6b62\u72b6\u6001\u3002<br \/>\n\u4ee3\u7801\u5982\u4e0b\uff1a<\/li>\n<\/ul>\n<pre><code class=\"language-{mermaid}\">stateDiagram-v2\n[*] --&gt; s1\ns1 --&gt; [*]<\/code><\/pre>\n<p>\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">stateDiagram-v2\n[*] --&gt; s1\ns1 --&gt; [*]<\/code><\/pre>\n<h3>4.4 \u7ec4\u5408\u72b6\u6001<\/h3>\n<p>\u2003\u2003\u5728\u73b0\u5b9e\u751f\u6d3b\u4e2d\u72b6\u6001\u590d\u6742\u591a\u53d8\uff0c\u5f80\u5f80\u5177\u6709\u591a\u7ef4\u6027\u3002\u53ef\u80fd\u5728\u4e00\u4e2a\u72b6\u6001\u4e2d\uff0c\u53c8\u6709\u8bb8\u591a\u72b6\u6001\u7ec4\u6210\u4e00\u4e2a\u5b50\u72b6\u6001\u673a\u3002mermaid\u7528<code class=\"kb-btn\"> <\/code>\u6765\u8868\u793a\u7ec4\u5408\u72b6\u6001\u3002<br \/>\n\u2003\u2003\u4ee3\u7801\u4e2d\uff0c\u5148\u5b9a\u4e49\u51fa\u603b\u7684\u72b6\u6001\u673a\u3002\u5728\u5728\u6bcf\u4e2a\u72b6\u6001\u4e2d\u7528{}\u5b9a\u4e49\u51fa\u6bcf\u4e2a\u5b50\u72b6\u6001\u673a\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">stateDiagram-v2\n[*] --&gt; First\nFirst --&gt; Second\nFirst --&gt; Third\n\nstate First {\n    [*] --&gt; fir\n    fir --&gt; [*]\n}\nstate Second {\n    [*] --&gt; sec\n    sec --&gt; [*]\n}\nstate Third {\n    [*] --&gt; thi\n    thi --&gt; [*]\n}<\/code><\/pre>\n<p>\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">stateDiagram-v2\n[*] --&gt; First\nFirst --&gt; Second\nFirst --&gt; Third\n\nstate First {\n    [*] --&gt; fir\n    fir --&gt; [*]\n}\nstate Second {\n    [*] --&gt; sec\n    sec --&gt; [*]\n}\nstate Third {\n    [*] --&gt; thi\n    thi --&gt; [*]\n}<\/code><\/pre>\n<h3>4.5 \u5206\u652f\u548c\u8fde\u63a5<\/h3>\n<p>\u2003\u2003\u5bf9\u4e8e\u9047\u5230\u5206\u652f\u6761\u4ef6\u6216\u8005\u7ec4\u5408\u6761\u4ef6\u7684\u72b6\u6001\u673a\uff0cmermaid\u5b9a\u4e49\u4e86\u5173\u952e\u5b57 <code>&lt;&lt;fork&gt;&gt;<\/code> \u548c <code>&lt;&lt;join&gt;&gt;<\/code> \u3002\u4e0b\u9762\u4f8b\u5b50\u4e2d\u5c55\u793a\u4e86\u8fd9\u4e24\u4e2a\u5173\u952e\u5b57\u7684\u7528\u6cd5\uff0c\u5148\u5b9a\u4e49 <code>&lt;&lt;fork&gt;&gt;<\/code> \u548c <code>&lt;&lt;join&gt;&gt;<\/code> \u7684\u72b6\u6001\uff0c\u518d\u8fdb\u884c\u5f15\u7528\u5b9a\u4e49\u3002\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">stateDiagram-v2\nstate fork_state &lt;&lt;fork&gt;&gt;\n  [*] --&gt; fork_state\n  fork_state --&gt; State2\n  fork_state --&gt; State3\n\n  state join_state &lt;&lt;join&gt;&gt;\n  State2 --&gt; join_state\n  State3 --&gt; join_state\n  join_state --&gt; State4\n  State4 --&gt; [*]<\/code><\/pre>\n<p>\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">stateDiagram-v2\nstate fork_state &lt;&lt;fork&gt;&gt;\n  [*] --&gt; fork_state\n  fork_state --&gt; State2\n  fork_state --&gt; State3\n\n  state join_state &lt;&lt;join&gt;&gt;\n  State2 --&gt; join_state\n  State3 --&gt; join_state\n  join_state --&gt; State4\n  State4 --&gt; [*]<\/code><\/pre>\n<h3>4.6 \u6807\u8bb0<\/h3>\n<p>\u2003\u2003\u5bf9\u4e8e\u4e00\u4e9b\u590d\u6742\u72b6\u6001\uff0c\u6211\u4eec\u901a\u5e38\u9700\u8981\u5728\u56fe\u4e0a\u8fdb\u884c\u7b80\u5355\u8bf4\u660e\u6807\u8bb0\u3002mermaid \u4f7f\u7528\u4e86note\u548cend note\u5305\u62ec\u4e00\u4e2a\u8bf4\u660e\u7684\u8d77\u59cb\u3002\u540c\u65f6\uff0c\u5b83\u8fd8\u7528right of\u548cleft of\u8868\u660e\u6807\u8bb0\u8bf4\u660e\u7684\u4f4d\u7f6e\u5728\u72b6\u6001\u7684\u5de6\u8fb9\u8fd8\u662f\u53f3\u8fb9\u3002\u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">stateDiagram-v2\n    State1: The state with a note\n    note right of State1\n        \u6807\u8bb0\u91cd\u8981\u4fe1\u606f\n        notes.\n    end note\n    State1 --&gt; State2\n    note left of State2 : \u5728\u72b6\u6001\u5de6\u8fb9\u6807\u8bb0<\/code><\/pre>\n<p>\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">stateDiagram-v2\n    State1: The state with a note\n    note right of State1\n        \u6807\u8bb0\u91cd\u8981\u4fe1\u606f\n        notes.\n    end note\n    State1 --&gt; State2\n    note left of State2 : \u5728\u72b6\u6001\u5de6\u8fb9\u6807\u8bb0<\/code><\/pre>\n<h3>4.7 \u5e76\u53d1<\/h3>\n<p>\u2003\u2003\u5bf9\u4e8eUML\u4e2d\u7ecf\u5e38\u51fa\u73b0\u7684\u5e76\u53d1\u72b6\u6001\uff0c\u53ef\u4ee5\u7528&#8211;\u5bf9\u7ec4\u5408\u72b6\u6001\u4e2d\u7684\u5b50\u72b6\u6001\u8fdb\u884c\u533a\u5206\uff0c\u5c31\u53d8\u6210\u5e76\u884c\u72b6\u6001\u3002\u4ee3\u7801\u793a\u4f8b\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">stateDiagram-v2\n    [*] --&gt; Active %% from start to active state...\n\n    state Active {\n        [*] --&gt; NumLockOff\n        NumLockOff --&gt; NumLockOn : EvNumLockPressed\n        NumLockOn --&gt; NumLockOff : EvNumLockPressed\n        --\n        [*] --&gt; CapsLockOff\n        CapsLockOff --&gt; CapsLockOn : EvCapsLockPressed\n        CapsLockOn --&gt; CapsLockOff : EvCapsLockPressed\n        --\n        [*] --&gt; ScrollLockOff\n        ScrollLockOff --&gt; ScrollLockOn : EvCapsLockPressed\n        ScrollLockOn --&gt; ScrollLockOff : EvCapsLockPressed\n    }<\/code><\/pre>\n<p>\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">stateDiagram-v2\n    [*] --&gt; Active %% from start to active state...\n\n    state Active {\n        [*] --&gt; NumLockOff\n        NumLockOff --&gt; NumLockOn : EvNumLockPressed\n        NumLockOn --&gt; NumLockOff : EvNumLockPressed\n        --\n        [*] --&gt; CapsLockOff\n        CapsLockOff --&gt; CapsLockOn : EvCapsLockPressed\n        CapsLockOn --&gt; CapsLockOff : EvCapsLockPressed\n        --\n        [*] --&gt; ScrollLockOff\n        ScrollLockOff --&gt; ScrollLockOn : EvCapsLockPressed\n        ScrollLockOn --&gt; ScrollLockOff : EvCapsLockPressed\n    }<\/code><\/pre>\n<h3>4.8 \u6ce8\u91ca<\/h3>\n<p>\u2003\u2003\u6ce8\u91ca\u662f\u4ee3\u7801\u5757\u4e2d\u5fc5\u4e0d\u53ef\u5c11\u7684\uff0cmermaid\u4ec5\u652f\u6301\u5355\u884c\u6ce8\u91ca\uff0c\u6ce8\u91ca\u7b26\u53f7\u4e3a%%\u3002<\/p>\n<h2>5 \u5b9e\u4f53\u5173\u7cfb\u56fe erDiagram\uff08Typora\u76ee\u524d\u4e0d\u80fd\u753b\u5c5e\u6027, StackEdit OK\uff09<\/h2>\n<p><strong>Typora\u7684\u5b9e\u4f53\u5173\u7cfb\u56fe\u76ee\u524d\u6dfb\u52a0\u5b9e\u4f53\u5c5e\u6027\u65f6\u4f1a\u6e32\u67d3\u9519\u8bef\u3002\u6682\u65f6\u4e0d\u8981\u5728 Typora \u4f7f\u7528\u5b9e\u4f53\u5c5e\u6027\u3002<\/strong><\/p>\n<blockquote>\n<p><strong>Entity Relationship Diagram\uff0c\u5b9e\u4f53-\u5173\u7cfb\u6a21\u578b<\/strong>\uff08\u6216 <strong>ER \u6a21\u578b<\/strong>\uff09\u63cf\u8ff0\u4e86\u7279\u5b9a\u77e5\u8bc6\u9886\u57df\u4e2d\u7684\u76f8\u5173\u4e8b\u7269\u3002\u57fa\u672c ER \u6a21\u578b\u7531\u5b9e\u4f53\u7c7b\u578b\uff08\u5bf9\u611f\u5174\u8da3\u7684\u4e8b\u7269\u8fdb\u884c\u5206\u7c7b\uff09\u7ec4\u6210\uff0c\u5e76\u6307\u5b9a\u5b9e\u4f53\uff08\u8fd9\u4e9b\u5b9e\u4f53\u7c7b\u578b\u7684\u5b9e\u4f8b\uff09\u4e4b\u95f4\u53ef\u4ee5\u5b58\u5728\u7684\u5173\u7cfb\u3002\u7ef4\u57fa\u767e\u79d1\u3002<\/p>\n<\/blockquote>\n<p>\u8bf7\u6ce8\u610f\uff0cER \u5efa\u6a21\u7684\u4ece\u4e1a\u8005\u51e0\u4e4e\u603b\u662f\u5c06<em>\u5b9e\u4f53\u7c7b\u578b<\/em>\u7b80\u79f0\u4e3a<em>\u5b9e\u4f53<\/em>\u3002\u4f8b\u5982\uff0c<code>CUSTOMER<\/code>\u5b9e\u4f53<em>\u7c7b\u578b<\/em>\u5c06\u7b80\u79f0\u4e3a<code>CUSTOMER<\/code>\u5b9e\u4f53\u3002\u8fd9\u592a\u5e38\u89c1\u4e86\uff0c\u4e0d\u5efa\u8bae\u505a\u4efb\u4f55\u5176\u4ed6\u4e8b\u60c5\uff0c\u4f46\u4ece\u6280\u672f\u4e0a\u8bb2\uff0c\u5b9e\u4f53\u662f\u5b9e\u4f53\u7c7b\u578b\u7684\u62bd\u8c61<em>\u5b9e\u4f8b<\/em>\uff0c\u8fd9\u5c31\u662f ER \u56fe\u6240\u663e\u793a\u7684 &#8211; \u62bd\u8c61\u5b9e\u4f8b\uff0c\u4ee5\u53ca\u5b83\u4eec\u4e4b\u95f4\u7684\u5173\u7cfb\u3002\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\u5b9e\u4f53\u603b\u662f\u4f7f\u7528\u5355\u6570\u540d\u8bcd\u547d\u540d\u7684\u539f\u56e0\u3002<\/p>\n<p>mermaid\u53ef\u4ee5\u6e32\u67d3ER\u56fe<\/p>\n<h3>5.1 \u5b9e\u4f53\u95f4\u7684\u5173\u7cfb\u5bf9\u5e94<\/h3>\n<pre><code class=\"language-{mermaid}\">erDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses<\/code><\/pre>\n<p>\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">erDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses<\/code><\/pre>\n<p>\u5b9e\u4f53\u540d\u79f0\u901a\u5e38\u5927\u5199\uff0c\u5c3d\u7ba1\u5bf9\u6b64\u6ca1\u6709\u516c\u8ba4\u7684\u6807\u51c6\uff0cmermaid\u4e2d\u4e5f\u4e0d\u9700\u8981\u3002<\/p>\n<p>\u5b9e\u4f53\u4e4b\u95f4\u7684\u5173\u7cfb\u7531\u5e26\u6709\u8868\u793a\u57fa\u6570\u7684\u7ed3\u675f\u6807\u8bb0\u7684\u7ebf\u8868\u793a\u3002mermaid\u4f7f\u7528\u6700\u6d41\u884c\u7684\u9c7c\u5c3e\u7eb9\u7b26\u53f7\u3002\u9c7c\u5c3e\u7eb9\u76f4\u89c2\u5730\u4f20\u8fbe\u4e86\u5b83\u6240\u8fde\u63a5\u7684\u5b9e\u4f53\u7684\u8bb8\u591a\u5b9e\u4f8b\u7684\u53ef\u80fd\u6027\u3002<\/p>\n<h4>5.1.1 \u5173\u7cfb\u8bed\u6cd5<\/h4>\n<p><code>  &lt;first-entity&gt; [&lt;relationship&gt; &lt;second-entity&gt; : &lt;relationship-label&gt;]<\/code><\/p>\n<p><code>relationship<\/code>\u6bcf\u4e2a\u8bed\u53e5\u7684\u90e8\u5206\u53ef\u4ee5\u5206\u89e3\u4e3a\u4e09\u4e2a\u5b50\u7ec4\u4ef6\uff1a<\/p>\n<ul>\n<li>\u7b2c\u4e00\u4e2a\u5b9e\u4f53\u76f8\u5bf9\u4e8e\u7b2c\u4e8c\u4e2a\u5b9e\u4f53\u7684\u57fa\u6570\uff0c<\/li>\n<li>\u8be5\u5173\u7cfb\u662f\u5426\u8d4b\u4e88\u201c\u5b50\u201d\u5b9e\u4f53\u8eab\u4efd<\/li>\n<li>\u7b2c\u4e8c\u4e2a\u5b9e\u4f53\u76f8\u5bf9\u4e8e\u7b2c\u4e00\u4e2a\u5b9e\u4f53\u7684\u57fa\u6570<\/li>\n<\/ul>\n<p>\u5b9e\u4f53\u5728\u5173\u7cfb\u4e0a\u7684\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<table>\n<thead>\n<tr>\n<th>\u503c\uff08\u5de6\uff09<\/th>\n<th>\u4ef7\u503c\uff08\u53f3\uff09<\/th>\n<th>\u610f\u4e49<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>|o<\/code><\/td>\n<td><code>o|<\/code><\/td>\n<td>\u96f6\u6216\u4e00<\/td>\n<\/tr>\n<tr>\n<td><code>||<\/code><\/td>\n<td><code>||<\/code><\/td>\n<td>\u6b63\u597d\u4e00\u4e2a<\/td>\n<\/tr>\n<tr>\n<td><code>}o<\/code><\/td>\n<td><code>o{<\/code><\/td>\n<td>\u96f6\u4e2a\u6216\u591a\u4e2a\uff08\u65e0\u4e0a\u9650\uff09<\/td>\n<\/tr>\n<tr>\n<td><code>}|<\/code><\/td>\n<td><code>|{<\/code><\/td>\n<td>\u4e00\u9879\u6216\u591a\u9879\uff08\u65e0\u4e0a\u9650\uff09<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>5.2 \u6dfb\u52a0\u5b9e\u4f53\u5c5e\u6027\uff08Typora\u5931\u8d25\uff0cStackEdit\u53ef\u4ee5\uff09<\/h3>\n<p>ER \u56fe\u53ef\u7528\u4e8e\u5404\u79cd\u76ee\u7684\uff0c\u4ece<u>\u65e0\u5b9e\u73b0\u7ec6\u8282\u7684\u62bd\u8c61\u6a21\u578b<\/u>\u5230\u5173\u7cfb<u>\u6570\u636e\u5e93\u8868\u7684\u7269\u7406\u6a21\u578b<\/u>\u3002\u5728 ER \u56fe\u4e0a\u5305\u542b\u5c5e\u6027\u5b9a\u4e49\u4ee5\u5e2e\u52a9\u7406\u89e3\u5b9e\u4f53\u7684\u76ee\u7684\u548c\u542b\u4e49\u662f\u5f88\u6709\u7528\u7684\u3002\u8fd9\u4e9b\u4e0d\u4e00\u5b9a\u662f\u8be6\u5c3d\u65e0\u9057\u7684\uff1b\u901a\u5e38\u4e00\u5c0f\u90e8\u5206\u5c5e\u6027\u5c31\u8db3\u591f\u4e86\u3002Mermaid \u5141\u8bb8\u6839\u636e\u5b83\u4eec\u7684<em>\u7c7b\u578b<\/em>\u548c<em>\u540d\u79f0<\/em>\u8fdb\u884c\u5b9a\u4e49\u3002<\/p>\n<pre><code class=\"language-{mermaid}\">erDiagram\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }<\/code><\/pre>\n<p>\u6548\u679c\uff1a<\/p>\n<p><span style=\"color:red\"><strong>Typora\u6e32\u67d3\u9519\u8bef\uff1a<\/strong><\/span><\/p>\n<pre><code class=\"language-mermaid\">erDiagram\n    CUSTOMER ||--o{ ORDER : places\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : contains\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }<\/code><\/pre>\n<p>\u5e94\u8be5\u50cf\u8fd9\u6837\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/vm2.go2see.co\/md-pics\/image-20210805104529005.png\" alt=\"image-20210805104529005\" style=\"zoom:50%;\" \/>  <\/p>\n<p>\u5c5e\u6027\u5448\u73b0\u5728\u5b9e\u4f53\u6846\u5185\uff1a<\/p>\n<pre><code class=\"language-{mermaid}\">erDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON ||--o{ NAMED-DRIVER : is\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }<\/code><\/pre>\n<p><span style=\"color:red\"><strong>Typora\u6e32\u67d3\u9519\u8bef\uff1a<\/strong><\/span><\/p>\n<pre><code class=\"language-mermaid\">erDiagram\n    CAR ||--o{ NAMED-DRIVER : allows\n    CAR {\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON ||--o{ NAMED-DRIVER : is\n    PERSON {\n        string firstName\n        string lastName\n        int age\n    }<\/code><\/pre>\n<p>\u5e94\u8be5\u662f\u50cf\u8fd9\u6837\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/vm2.go2see.co\/md-pics\/image-20210805104407620.png\" alt=\"image-20210805104407620\" style=\"zoom:50%;\" \/> <\/p>\n<p>\u5c5e\u6027\u7684 <code>type<\/code> \u548c <code>name<\/code> \u503c\u5fc5\u987b\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u53ef\u4ee5\u5305\u542b\u6570\u5b57\uff0c\u8fde\u5b57\u7b26\u6216\u4e0b\u5212\u7ebf\u3002\u9664\u6b64\u4e4b\u5916\uff0c\u6ca1\u6709\u4efb\u4f55\u9650\u5236\uff0c\u4e5f\u6ca1\u6709\u9690\u5f0f\u7684\u6709\u6548\u6570\u636e\u7c7b\u578b\u96c6\u3002<\/p>\n<h4><a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/entityRelationshipDiagram?id=other-things\">\u5176\u4ed6\u4e8b\u60c5<\/a><\/h4>\n<ul>\n<li>\u5982\u679c\u60a8\u5e0c\u671b\u5173\u7cfb\u6807\u7b7e\u8d85\u8fc7\u4e00\u4e2a\u5355\u8bcd\uff0c\u5219\u5fc5\u987b\u5728\u77ed\u8bed\u5468\u56f4\u4f7f\u7528\u53cc\u5f15\u53f7<\/li>\n<li>\u5982\u679c\u60a8\u6839\u672c\u4e0d\u60f3\u8981\u5173\u7cfb\u4e0a\u7684\u6807\u7b7e\uff0c\u5219\u5fc5\u987b\u4f7f\u7528\u7a7a\u7684\u53cc\u5f15\u53f7\u5b57\u7b26\u4e32<\/li>\n<\/ul>\n<h3>5.3 <a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/entityRelationshipDiagram?id=styling\">\u9020\u578b<\/a>Styling<\/h3>\n<h4>5.3.1 <a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/entityRelationshipDiagram?id=config-options\">\u914d\u7f6e\u9009\u9879<\/a><\/h4>\n<p>\u5bf9\u4e8e\u7b80\u5355\u7684\u989c\u8272\u5b9a\u5236\uff1a<\/p>\n<table>\n<thead>\n<tr>\n<th>\u540d\u79f0<\/th>\n<th>\u7528\u4f5c<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>fill<\/code><\/td>\n<td>\u586b\u5145\u5b9e\u4f53\u6216\u5c5e\u6027\u7684\u80cc\u666f\u989c\u8272<\/td>\n<\/tr>\n<tr>\n<td><code>stroke<\/code><\/td>\n<td>\u63cf\u7ed8\u5b9e\u4f53\u6216\u5c5e\u6027\u7684\u8fb9\u6846\u989c\u8272\uff0c\u5173\u7cfb\u7684\u7ebf\u6761\u989c\u8272<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>5.3.2 <a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/entityRelationshipDiagram?id=classes-used\">\u4f7f\u7528\u7684\u7c7b<\/a><\/h4>\n<p>\u4ee5\u4e0b CSS \u7c7b\u9009\u62e9\u5668\u53ef\u7528\u4e8e\u66f4\u4e30\u5bcc\u7684\u6837\u5f0f\uff1a<\/p>\n<table>\n<thead>\n<tr>\n<th>\u9009\u62e9\u5668<\/th>\n<th>\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>.er.attributeBoxEven<\/code><\/td>\n<td>\u5305\u542b\u5076\u6570\u884c\u5c5e\u6027\u7684\u6846<\/td>\n<\/tr>\n<tr>\n<td><code>.er.attributeBoxOdd<\/code><\/td>\n<td>\u5305\u542b\u5947\u6570\u884c\u5c5e\u6027\u7684\u6846<\/td>\n<\/tr>\n<tr>\n<td><code>.er.entityBox<\/code><\/td>\n<td>\u4ee3\u8868\u5b9e\u4f53\u7684\u6846<\/td>\n<\/tr>\n<tr>\n<td><code>.er.entityLabel<\/code><\/td>\n<td>\u5b9e\u4f53\u7684\u6807\u7b7e<\/td>\n<\/tr>\n<tr>\n<td><code>.er.relationshipLabel<\/code><\/td>\n<td>\u5173\u7cfb\u7684\u6807\u7b7e<\/td>\n<\/tr>\n<tr>\n<td><code>.er.relationshipLabelBox<\/code><\/td>\n<td>\u5173\u7cfb\u6807\u7b7e\u5468\u56f4\u7684\u6846<\/td>\n<\/tr>\n<tr>\n<td><code>.er.relationshipLine<\/code><\/td>\n<td>\u8868\u793a\u5b9e\u4f53\u4e4b\u95f4\u5173\u7cfb\u7684\u7ebf<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>6. \u7528\u6237\u65c5\u7a0b\u56fe journey<\/h2>\n<blockquote>\n<p>\u7528\u6237\u65c5\u7a0b\u9ad8\u5ea6\u8be6\u7ec6\u5730\u63cf\u8ff0\u4e86\u4e0d\u540c\u7528\u6237\u5728\u7cfb\u7edf\u3001\u5e94\u7528\u7a0b\u5e8f\u6216\u7f51\u7ad9\u4e2d\u5b8c\u6210\u7279\u5b9a\u4efb\u52a1\u6240\u91c7\u53d6\u7684\u5177\u4f53\u6b65\u9aa4\u3002\u6b64\u6280\u672f\u663e\u793a\u5f53\u524d\uff08\u539f\u6837\uff09\u7528\u6237\u5de5\u4f5c\u6d41\u7a0b\uff0c\u5e76\u63ed\u793a\u672a\u6765\u5de5\u4f5c\u6d41\u7a0b\u7684\u6539\u8fdb\u9886\u57df\u3002<\/p>\n<\/blockquote>\n<p>Mermaid \u53ef\u4ee5\u6e32\u67d3\u7528\u6237\u65c5\u7a0b\u56fe\uff1a<\/p>\n<h3>6.1 \u8bed\u6cd5<\/h3>\n<ul>\n<li>\n<p>\u4ece <code>journey<\/code> \u5173\u952e\u5b57\u5c55\u5f00\u7684 mermaid \u7a0b\u5f0f\u6846<\/p>\n<\/li>\n<li>\n<p>\u7136\u540e\u4f7f\u7528<code>title<\/code>\u5173\u952e\u5b57\u53ca\u5176\u5728\u5b57\u7b26\u4e32\u4e2d\u7684\u503c\uff0c\u4e3a\u65c5\u7a0b\u56fe\u8d4b\u4e88\u6807\u9898\u3002\uff08\u8fd9\u662f<strong>\u53ef\u9009\u7684<\/strong>\uff09<\/p>\n<\/li>\n<li>\n<p>\u4f7f\u7528 <code>section<\/code> \u5c06\u65c5\u7a0b\u884c\u7a0b\u5206\u6bb5<\/p>\n<\/li>\n<li>\n<p>\u65c5\u7a0b\u884c\u7a0b<\/p>\n<p><code>&lt;\u884c\u7a0b\u540d\u79f0&gt; : &lt;\u8bc4\u4ef71\uff5e5\u5206&gt; : &lt;\u9017\u53f7\u533a\u9694\u7684\u53c2\u4e0e\u4eba\u5458\u5217\u8868&gt;<\/code><\/p>\n<\/li>\n<\/ul>\n<h3>6.2 \u8303\u4f8b<\/h3>\n<pre><code class=\"language-{mermaid}\">journey\n    title My working day\n    section Go to work\n      Make tea: 5: Me\n      Go upstairs: 3: Me\n      Do work: 1: Me, Cat\n    section Go home\n      Go downstairs: 5: Me\n      Sit down: 5: Me<\/code><\/pre>\n<p>\u6e32\u67d3\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-mermaid\">journey\n    title My working day\n    section Go to work\n      Make tea: 5: Me\n      Go upstairs: 3: Me\n      Do work: 1: Me, Cat\n    section Go home\n      Go downstairs: 5: Me\n      Sit down: 5: Me<\/code><\/pre>\n<h2>7. \u7518\u7279\u56fe gantt<\/h2>\n<blockquote>\n<p>\u7518\u7279\u56fe\u662f\u4e00\u79cd\u6761\u5f62\u56fe\uff0c\u7528\u4e8e\u8bf4\u660e\u9879\u76ee\u8fdb\u5ea6\u548c\u5b8c\u6210\u4efb\u4f55\u9879\u76ee\u6240\u9700\u7684\u65f6\u95f4\u3002<\/p>\n<p>\u7518\u7279\u56fe\u8bf4\u660e\u9879\u76ee\u7684\u7ec8\u7aef\u5143\u7d20\u548c\u6458\u8981\u5143\u7d20\u7684\u5f00\u59cb\u65e5\u671f\u548c\u5b8c\u6210\u65e5\u671f\u4e4b\u95f4\u7684\u5929\u6570\u3002<\/p>\n<\/blockquote>\n<p>\u7518\u7279\u56fe\u7528\u6765\u56fe\u793a\u5316\u5404\u4e2a\u4efb\u52a1\u7684\u72b6\u6001\u3001\u76f8\u4f9d\u5173\u7cfb\u3001\u5173\u952e\u6027\uff0c\u53ef\u89c6\u5316\u7684\u5b89\u6392\u8c03\u6574\u6574\u4e2a\u5de5\u4f5c\u7684\u6d41\u7a0b\u4e0e\u65f6\u957f\u3002<\/p>\n<h3>7.1 \u56fe\u578b\u5ba3\u544a<\/h3>\n<p><code>gantt<\/code><\/p>\n<h3>7.2 \u4efb\u52a1\u8bed\u53e5\u6837\u5f0f\uff1a<\/h3>\n<p><code>&lt;\u663e\u793a\u540d\u79f0&gt; :[\u5173\u952e\u4efb\u52a1, ] [\u72b6\u6001 , ] [ \u6807\u8bb0\u540d , ] &lt;[after \u6807\u8bb0\u540d1 [\u6807\u8bb0\u540d2 [...]] ,] \uff5c [\u8d77\u59cb\u65f6\u95f4,]&gt;  &lt;\u65f6\u957f\uff5c\u7ed3\u675f\u65f6\u95f4&gt;<\/code><\/p>\n<ul>\n<li>\u663e\u793a\u540d\u79f0\uff1a\u663e\u793a\u5728\u7518\u7279\u56fe\u4e0a\u7684\u4efb\u52a1\u540d\u79f0<\/li>\n<li>\u5173\u952e\u4efb\u52a1: \u53ef\u9009\u6807\u793a <code>crit<\/code>\u3002 \u4efb\u52a1\u4f1a\u88ab\u6807\u793a\u7ea2\u6846\u3002\u82e5\u672a\u6807\u793a\u4efb\u52a1\u72b6\u6001\uff08\u672a\u8fdb\u884c\uff09\uff0c\u4efb\u52a1\u989c\u8272\u4f1a\u7528\u6df1\u7ea2\u8b66\u793a\u3002<\/li>\n<li>\u72b6\u6001\uff1a\u53ef\u9009\u9879\uff0c \u53ef\u4ee5\u662f done\uff08\u5b8c\u6210\uff0c\u7070\u8272\uff09\u3001active\uff08\u8fdb\u884c\u4e2d\uff0c\u6d45\u84dd\u8272\uff09\u3002\u65e0\u72b6\u6001\u8868\u793a\u672a\u8fdb\u884c\uff08\u6df1\u84dd\u8272\uff09\u3002<\/li>\n<li>\u6807\u8bb0\u540d\uff1a\u5f53\u4f1a\u662f\u5176\u4ed6\u4efb\u52a1\u7684\u4f9d\u8d56\u4efb\u52a1\u65f6\uff0c\u5b9a\u4e49\u6807\u8bb0\u540d\uff0c\u8ba9\u5176\u4ed6\u4efb\u52a1\u80fd\u53c2\u8003\u5230\u3002<\/li>\n<li>\u4f9d\u8d56\u5217\u8868\uff1a\u7531 after \u5173\u952e\u5b57\u5f00\u59cb\u7684\uff0c\u4ee5\u7a7a\u767d\u4e3a\u95f4\u9694\u7684\u6807\u8bb0\u540d\u5217\u8868\u3002\u4ee3\u8868\u8fd9\u4e9b\u4efb\u52a1\u5b8c\u6210\u540e\u624d\u80fd\u88ab\u6267\u884c\u3002<\/li>\n<li>\u8d77\u59cb\u65f6\u95f4\uff1a\u4efb\u52a1\u6700\u65e9\u53ef\u80fd\u5f00\u59cb\u7684\u65f6\u95f4\u3002<\/li>\n<li>\u65f6\u957f\uff1a\u4efb\u52a1\u9700\u65f6\u3002\u6570\u5b57+\u5355\u4f4d\u7684\u5b57\u4e32\u3002\u5355\u4f4d\u53ef\u4ee5\u662f<code>h<\/code>(\u65f6\uff09\u3001<code>d<\/code> (\u65e5)\u3001 <code>w<\/code> (\u5468)\u3002<\/li>\n<li>\u7ed3\u675f\u65f6\u95f4\uff1a\u4efb\u52a1\u56fa\u5b9a\u7684\u5b8c\u6210\u65f6\u95f4\u3002<\/li>\n<\/ul>\n<p>\u663e\u793a\u540d\u79f0\u548c &lt;\u65f6\u957f\uff5c\u7ed3\u675f\u65f6\u95f4&gt;\u662f\u5fc5\u5907\u7684\u680f\u4f4d\uff0c\u5176\u4ed6\u53ef\u9009\u3002<\/p>\n<p>\u672a\u6307\u5b9a\u4f9d\u8d56\u5217\u8868\u4e0e\u8d77\u59cb\u65f6\u95f4\u7684\u4efb\u52a1\uff0c\u4ee5\u4e0a\u4e00\u4e2a\u5ba3\u544a\u7684\u4efb\u52a1\u4e3a\u4f9d\u8d56\u4efb\u52a1\u3002<\/p>\n<h3>7.3 \u5176\u4ed6\u8bed\u53e5\u6837\u5f0f\uff1a<\/h3>\n<h4>dateFormat<\/h4>\n<p><code>dateFormat  YYYY-MM-DD<\/code>\uff1a\u65f6\u95f4\u8f74\u4e0a\u7684\u65f6\u95f4\u6807\u8bb0\u6837\u5f0f\u4e3a \u3002\u3002\u3002\u3002<\/p>\n<h4>title XXX<\/h4>\n<p>\u7518\u7279\u56fe\u7684\u663e\u793a\u540d\u79f0<\/p>\n<h4>excludes<\/h4>\n<p>\u4ee5\u7a7a\u767d\u95f4\u9694\u7684\u4e0d\u6392\u73ed\u65e5\u5217\u8868\u3002\u53ef\u4ee5\u662f <code>weekends<\/code>, <code>YYYY-MM-DD<\/code>, \u6216\u662f <code>sunday<\/code>, <code>monday<\/code>,&#8230;\u7b49\u3002<br \/>\n\u4e0d\u63a5\u53d7<code>weekday<\/code>\u3002<\/p>\n<h4>section<\/h4>\n<p>\u5b9a\u4e49\u533a\u6bb5\u540d\u3002\u4efb\u52a1\u4ee5section\u5206\u7fa4\u3001\u5206\u5e95\u8272\u663e\u793a\u3002<\/p>\n<h3>7.4 \u5404\u79cd\u8bed\u6cd5\u6f14\u793a<\/h3>\n<pre><code class=\"language-{mermaid}\">gantt\n    dateFormat  YYYY-MM-DD\n    title       Adding GANTT diagram functionality to mermaid\n    excludes    weekends\n    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week (&quot;sunday&quot;) or &quot;weekends&quot;, but not the word &quot;weekdays&quot;.)\n\n    section A section\n    Completed task            :done,    des1, 2014-01-06,2014-01-08\n    Active task               :active,  des2, 2014-01-09, 3d\n    Future task               :         des3, after des2, 5d\n    Future task2              :         des4, after des3, 5d\n\n    section Critical tasks\n    Completed task in the critical line :crit, done, 2014-01-06,24h\n    Implement parser and jison          :crit, done, after des1, 2d\n    Create tests for parser             :crit, active, 3d\n    Future task in critical line        :crit, 5d\n    Create tests for renderer           :2d\n    Add to mermaid                      :1d\n\n    section Documentation\n    Describe gantt syntax               :active, a1, after des1, 3d\n    Add gantt diagram to demo page      :after a1  , 20h\n    Add another diagram to demo page    :doc1, after a1  , 48h\n\n    section Last section\n    Describe gantt syntax               :after doc1, 3d\n    Add gantt diagram to demo page      :20h\n    Add another diagram to demo page    :48h\n<\/code><\/pre>\n<p>\u6e32\u67d3\u6837\u5f0f\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-mermaid\">gantt\n    dateFormat  YYYY-MM-DD\n    title       Adding GANTT diagram functionality to mermaid\n    excludes    weekends monday\n    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week (&quot;sunday&quot;) or &quot;weekends&quot;, but not the word &quot;weekdays&quot;.)\n\n    section A section\n    Completed task            :done,    des1, 2014-01-06,2014-01-08\n    Active task               :active,  des2, 2014-01-09, 3d\n    Future task               :         des3, after des2, 5d\n    Future task2              :         des4, after des3, 5d\n\n    section Critical tasks\n    Completed task in the critical line :crit, done, 2014-01-06,24h\n    Implement parser and jison          :crit, done, after des1, 2d\n    Create tests for parser             :crit, active, 3d\n    Future task in critical line        :crit, 5d\n    Create tests for renderer           :2d\n    Add to mermaid                      :1d\n\n    section Documentation\n    Describe gantt syntax               :active, a1, after des1, 3d\n    Add gantt diagram to demo page      :after a1  , 20h\n    Add another diagram to demo page    :doc1, after a1  , 48h\n\n    section Last section\n    Describe gantt syntax               :after doc1, 3d\n    Add gantt diagram to demo page      :20h\n    Add another diagram to demo page    :48h<\/code><\/pre>\n<h2>8. \u997c\u72b6\u56fe pie<\/h2>\n<h3>8.1 \u8bed\u6cd5<\/h3>\n<ul>\n<li>\u4ece<code>pie<\/code>\u5173\u952e\u5b57\u5f00\u59cb\u56fe\u8868<\/li>\n<li>\u7136\u540e\u4f7f\u7528<code>title<\/code>\u5173\u952e\u5b57\u53ca\u5176\u5728\u5b57\u7b26\u4e32\u4e2d\u7684\u503c\uff0c\u4e3a\u997c\u56fe\u8d4b\u4e88\u6807\u9898\u3002\uff08\u8fd9\u662f<strong>\u53ef\u9009\u7684<\/strong>\uff09<\/li>\n<li>\u6570\u636e\u90e8\u5206\n<ul>\n<li>\u5728<code>&quot; &quot;<\/code>\u5185\u5199\u4e0a\u5206\u533a\u540d\u3002<\/li>\n<li>\u5206\u533a\u540d\u540e\u4f7f\u7528<code>:<\/code>\u4f5c\u4e3a\u5206\u9694\u7b26<\/li>\n<li>\u5206\u9694\u7b26\u540e\u5199\u4e0a\u6570\u503c\uff0c\u6700\u591a\u652f\u63012\u4f4d\u5c0f\u6570\u2014\u2014\u6570\u636e\u4f1a\u4ee5\u603b\u6570\u7684\u767e\u5206\u6bd4\u7684\u5f62\u5f0f\u5c55\u793a\u5728\u997c\u56fe\u4e2d\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>8.2 \u5b9e\u4f8b<\/h3>\n<pre><code class=\"language-{mermaid}\">pie\n    title \u4e3a\u4ec0\u4e48\u603b\u662f\u5b85\u5728\u5bb6\u91cc\uff1f\n    &quot;\u559c\u6b22\u5b85&quot; : 15\n    &quot;\u5929\u6c14\u592a\u70ed\u6216\u592a\u51b7&quot; : 20\n    &quot;\u7a77&quot; : 500<\/code><\/pre>\n<p>\u6548\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">pie\n    title \u4e3a\u4ec0\u4e48\u603b\u662f\u5b85\u5728\u5bb6\u91cc\uff1f\n    &quot;\u559c\u6b22\u5b85&quot; : 15\n    &quot;\u5929\u6c14\u592a\u70ed\u6216\u592a\u51b7&quot; : 20\n    &quot;\u7a77&quot; : 500<\/code><\/pre>\n<h2>9. \u9700\u6c42\u56fe requirementDiagram (Typora, StackEdit \u90fd\u4e0d\u652f\u6301)<\/h2>\n<blockquote>\n<p>\u9700\u6c42\u56fe\u63d0\u4f9b\u4e86\u9700\u6c42\u53ca\u5176\u76f8\u4e92\u4e4b\u95f4\u548c\u5176\u4ed6\u6587\u6863\u5316\u5143\u7d20\u4e4b\u95f4\u7684\u8054\u7cfb\u7684\u53ef\u89c6\u5316\u3002\u5efa\u6a21\u89c4\u8303\u9075\u5faa SysML v1.6 \u5b9a\u4e49\u7684\u89c4\u8303\u3002<\/p>\n<\/blockquote>\n<p>\u6e32\u67d3\u8981\u6c42\u5f88\u7b80\u5355\u3002<\/p>\n<pre><code class=\"language-{mermaid}\">    requirementDiagram\n\n    requirement test_req {\n    id: 1\n    text: the test text.\n    risk: high\n    verifymethod: test\n    }\n\n    element test_entity {\n    type: simulation\n    }\n\n    test_entity - satisfies -&gt; test_req<\/code><\/pre>\n<p><span style=\"color:red\"><strong>Typora\u6e32\u67d3\u9519\u8bef\uff1a<\/strong><\/span><\/p>\n<pre><code class=\"language-mermaid\">requirementDiagram\n\n    requirement test_req {\n    id: 1\n    text: the test text.\n    risk: high\n    verifymethod: test\n    }\n\n    element test_entity {\n    type: simulation\n    }\n\n    test_entity - satisfies -&gt; test_req<\/code><\/pre>\n<p>\u5e94\u8be5\u662f\u50cf\u8fd9\u6837\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/vm2.go2see.co\/md-pics\/image-20210805103509322.png\" alt=\"image-20210805103509322\" style=\"zoom: 50%;\" \/>  <\/p>\n<h3><a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/requirementDiagram?id=syntax\">\u8bed\u6cd5<\/a><\/h3>\n<p>\u9700\u6c42\u56fe\u5305\u542b\u4e09\u79cd\u7c7b\u578b\u7684\u7ec4\u4ef6\uff1a\u9700\u6c42\u3001\u5143\u7d20\u548c\u5173\u7cfb\u3002<\/p>\n<p>\u5b9a\u4e49\u6bcf\u4e2a\u7684\u8bed\u6cd5\u5b9a\u4e49\u5982\u4e0b\u3002\u7528\u5c16\u62ec\u53f7\u8868\u793a\u7684\u8bcd\uff0c\u4f8b\u5982<code>&lt;word&gt;<\/code>\uff0c\u662f\u5217\u4e3e\u7684\u5173\u952e\u5b57\uff0c\u5728\u8868\u683c\u4e2d\u8be6\u7ec6\u8bf4\u660e\u4e86\u9009\u9879\u3002<code>user_defined_...<\/code>\u7528\u4e8e\u4efb\u4f55\u9700\u8981\u7528\u6237\u8f93\u5165\u7684\u5730\u65b9\u3002<\/p>\n<p>\u5173\u4e8e\u7528\u6237\u6587\u672c\u7684\u91cd\u8981\u8bf4\u660e\uff1a\u6240\u6709\u8f93\u5165\u90fd\u53ef\u4ee5\u7528\u5f15\u53f7\u62ec\u8d77\u6765\uff0c\u4e5f\u53ef\u4ee5\u4e0d\u62ec\u8d77\u6765\u3002\u4f8b\u5982\uff0c\u4e24\u8005<code>Id: &quot;here is an example&quot;<\/code>\u548c<code>Id: here is an example<\/code>\u90fd\u6709\u6548\u3002\u4f46\u662f\uff0c\u7528\u6237\u5fc5\u987b\u5c0f\u5fc3\u672a\u5f15\u7528\u7684\u8f93\u5165\u3002\u5982\u679c\u68c0\u6d4b\u5230\u53e6\u4e00\u4e2a\u5173\u952e\u5b57\uff0c\u89e3\u6790\u5668\u5c06\u5931\u8d25\u3002<\/p>\n<h4><a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/requirementDiagram?id=requirement\">\u8981\u6c42<\/a><\/h4>\n<p>\u9700\u6c42\u5b9a\u4e49\u5305\u542b\u9700\u6c42\u7c7b\u578b\u3001\u540d\u79f0\u3001id\u3001\u6587\u672c\u3001\u98ce\u9669\u548c\u9a8c\u8bc1\u65b9\u6cd5\u3002\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre><code>&lt;type&gt; user_defined_name {\n    id: user_defined_id\n    text: user_defined text\n    risk: &lt;risk&gt;\n    verifymethod: &lt;method&gt;\n}<\/code><\/pre>\n<p>Type, risk, \u548c method \u90fd\u5728 SysML \u4e2d\u5217\u4e3e\u5b9a\u4e49\u3002<\/p>\n<table>\n<thead>\n<tr>\n<th>\u5173\u952e\u5b57<\/th>\n<th>\u9009\u9879<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>type \u7c7b\u578b<\/td>\n<td>\u9700\u6c42\u3001\u529f\u80fd\u9700\u6c42\u3001\u63a5\u53e3\u9700\u6c42\u3001\u6027\u80fd\u9700\u6c42\u3001\u7269\u7406\u9700\u6c42\u3001\u8bbe\u8ba1\u7ea6\u675f<\/td>\n<\/tr>\n<tr>\n<td>risk \u98ce\u9669<\/td>\n<td>\u4f4e\u3001\u4e2d\u3001\u9ad8<\/td>\n<\/tr>\n<tr>\n<td>verifymethod \u9a8c\u8bc1\u65b9\u6cd5<\/td>\n<td>\u5206\u6790\u3001\u68c0\u9a8c\u3001\u6d4b\u8bd5\u3001\u6f14\u793a<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4><a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/requirementDiagram?id=element\">\u5143\u7d20<\/a><\/h4>\n<p>\u5143\u7d20\u5b9a\u4e49\u5305\u542b\u5143\u7d20\u540d\u79f0\u3001\u7c7b\u578b\u548c\u6587\u6863\u5f15\u7528\u3002\u8fd9\u4e09\u4e2a\u90fd\u662f\u7528\u6237\u5b9a\u4e49\u7684\u3002\u5143\u7d20\u529f\u80fd\u65e8\u5728\u8f7b\u91cf\u7ea7\uff0c\u4f46\u5141\u8bb8\u5c06\u9700\u6c42\u8fde\u63a5\u5230\u5176\u4ed6\u6587\u6863\u7684\u90e8\u5206\u3002<\/p>\n<pre><code>element user_defined_name {\n    type: user_defined_type\n    docref: user_defined_ref\n}<\/code><\/pre>\n<h4><a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/requirementDiagram?id=relationship\">\u5173\u7cfb<\/a><\/h4>\n<p>\u5173\u7cfb\u7531\u6e90\u8282\u70b9\u3001\u76ee\u6807\u8282\u70b9\u548c\u5173\u7cfb\u7c7b\u578b\u7ec4\u6210\u3002<\/p>\n<p>\u6bcf\u4e2a\u90fd\u9075\u5faa\u7684\u5b9a\u4e49\u683c\u5f0f<\/p>\n<pre><code>{name of source} - &lt;type&gt; -&gt; {name of destination}<\/code><\/pre>\n<p>\u8981\u4e48<\/p>\n<pre><code>{name of destination} &lt;- &lt;type&gt; - {name of source}<\/code><\/pre>\n<p>\u201c\u6e90\u540d\u79f0\u201d\u548c\u201c\u76ee\u6807\u540d\u79f0\u201d\u5e94\u8be5\u662f\u5728\u522b\u5904\u5b9a\u4e49\u7684\u9700\u6c42\u6216\u5143\u7d20\u8282\u70b9\u7684\u540d\u79f0\u3002<\/p>\n<p>\u5173\u7cfb\u7c7b\u578b\u53ef\u4ee5\u662f\u5305\u542b\u3001\u590d\u5236\u3001\u6d3e\u751f\u3001\u6ee1\u8db3\u3001\u9a8c\u8bc1\u3001\u7ec6\u5316\u6216\u8ddf\u8e2a\u4e4b\u4e00\u3002<\/p>\n<p>\u6bcf\u4e2a\u5173\u7cfb\u90fd\u5728\u56fe\u4e2d\u8fdb\u884c\u4e86\u6807\u8bb0\u3002<\/p>\n<h2>10. Git \u56fe gitGraph (Typora\u3001StackEdit \u76ee\u524d\u652f\u6301\u4e0d\u4f73)<\/h2>\n<blockquote>\n<p>Typora \u76ee\u524d\u7684\u8282\u70b9\u6807\u7b7e\u4f4d\u7f6e\u4e0d\u6b63\u786e\uff0c\u6682\u65f6\u6ca1\u6709\u6807\u7b7e\u540d\u79f0\u7684\u4fe1\u606f\u3002<\/p>\n<p>\u6216\u9700\u8981\u5bf9\u5e94\u672c\u5730git\u624d\u80fd\u5f97\u5230\u7248\u6b21\u4fe1\u606f\uff0c\u4e0d\u662f\u53ea\u6709\u8282\u70b9\u56fe\u5f62<\/p>\n<\/blockquote>\n<pre><code>gitGraph:\noptions\n{\n    &quot;nodeSpacing&quot;: 150,\n    &quot;nodeRadius&quot;: 10\n}\nend\ncommit\nbranch newbranch\ncheckout newbranch\ncommit\ncommit\ncheckout master\ncommit\ncommit\nmerge newbranch\n<\/code><\/pre>\n<p><span style=\"color:red\"><strong>Typora\u6e32\u67d3\u5982\u4e0b\uff1a<\/strong><\/span>\uff08\u76ee\u524d\u6e32\u67d3\u6709\u95ee\u9898\uff09<\/p>\n<pre><code class=\"language-mermaid\">gitGraph:\noptions\n{\n    &quot;nodeSpacing&quot;: 100,\n    &quot;nodeRadius&quot;: 10\n}\nend\ncommit\nbranch newbranch\ncheckout newbranch\ncommit\ncommit\ncheckout master\ncommit\ncommit\nmerge newbranch\n<\/code><\/pre>\n<p>\u5e94\u8be5\u8868\u73b0\u7684\u6837\u5f0f\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/vm2.go2see.co\/md-pics\/git.png\" alt=\"Git \u56fe\" \/><\/p>\n<hr \/>\n<h1>HTML Table<\/h1>\n<p>\u8a73\u898b\uff1a<a href=\"https:\/\/www.w3school.com.cn\/tags\/tag_table.asp\">https:\/\/www.w3school.com.cn\/tags\/tag_table.asp<\/a><\/p>\n<pre><code class=\"language-html\">&lt;table border=&quot;2&quot;&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Month&lt;\/th&gt;\n    &lt;th&gt;Savings&lt;\/th&gt;\n\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;January&lt;\/td&gt;\n    &lt;td&gt;$100&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre>\n<table border=\"2\">\n<tr>\n<th>Month<\/th>\n<th>Savings<\/th>\n<\/tr>\n<tr>\n<td>January<\/td>\n<td>$100<\/td>\n<\/tr>\n<\/table>\n<p>Html \u53ef\u4ee5\u4e0d\u5b8c\u6574\uff1a\u7d50\u675f\u6a19\u7c64 <code>&lt;\/tr&gt;<\/code> \u3001<code>&lt;\/th&gt;<\/code>\u3001<code>&lt;\/td&gt;<\/code> \u6a19\u7c64\u53ef\u4ee5\u7701\u7565\u3002 <\/p>\n<table border=\"2\">\n<tr bgcolor=\"#FFFF00\">\n<th>Month <\/th>\n<th>Savings\n<\/th>\n<\/tr>\n<tr>\n<td>January <\/td>\n<td>$100\n<\/td>\n<\/tr>\n<\/table>\n<h3>\u53ef\u9009\u7684\u5c5e\u6027<\/h3>\n<p>\u5c6c\u6027\u5728 tag\u4e2d\u6dfb\u52a0\uff0c \u5982 <code>&lt;tr bgcolor=#FFFF00&gt;<\/code> \u6703\u8b93\u6574\u689d row\u5e95\u8272\u90fd\u662f\u9ec3\u8272\u3002<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">\u5c5e\u6027<\/th>\n<th style=\"text-align: left;\">\u503c<\/th>\n<th style=\"text-align: left;\">\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.w3school.com.cn\/tags\/att_table_align.asp\">align<\/a><\/td>\n<td style=\"text-align: left;\">left center right<\/td>\n<td style=\"text-align: left;\">\u4e0d\u8d5e\u6210\u4f7f\u7528\u3002\u8bf7\u4f7f\u7528\u6837\u5f0f\u4ee3\u66ff\u3002\u89c4\u5b9a\u8868\u683c\u76f8\u5bf9\u5468\u56f4\u5143\u7d20\u7684\u5bf9\u9f50\u65b9\u5f0f\u3002<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.w3school.com.cn\/tags\/att_table_bgcolor.asp\">bgcolor<\/a><\/td>\n<td style=\"text-align: left;\"><em>rgb(x,x,x)<\/em> <em>#xxxxxx<\/em> <em>colorname<\/em><\/td>\n<td style=\"text-align: left;\">\u4e0d\u8d5e\u6210\u4f7f\u7528\u3002\u8bf7\u4f7f\u7528\u6837\u5f0f\u4ee3\u66ff\u3002\u89c4\u5b9a\u8868\u683c\u7684\u80cc\u666f\u989c\u8272\u3002<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.w3school.com.cn\/tags\/att_table_border.asp\">border<\/a><\/td>\n<td style=\"text-align: left;\"><em>pixels<\/em><\/td>\n<td style=\"text-align: left;\">\u89c4\u5b9a\u8868\u683c\u8fb9\u6846\u7684\u5bbd\u5ea6\u3002<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.w3school.com.cn\/tags\/att_table_cellpadding.asp\">cellpadding<\/a><\/td>\n<td style=\"text-align: left;\">*pixels*<em>%<\/em><\/td>\n<td style=\"text-align: left;\">\u89c4\u5b9a\u5355\u5143\u8fb9\u6cbf\u4e0e\u5176\u5185\u5bb9\u4e4b\u95f4\u7684\u7a7a\u767d\u3002<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.w3school.com.cn\/tags\/att_table_cellspacing.asp\">cellspacing<\/a><\/td>\n<td style=\"text-align: left;\">*pixels*<em>%<\/em><\/td>\n<td style=\"text-align: left;\">\u89c4\u5b9a\u5355\u5143\u683c\u4e4b\u95f4\u7684\u7a7a\u767d\u3002<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.w3school.com.cn\/tags\/att_table_frame.asp\">frame<\/a><\/td>\n<td style=\"text-align: left;\">void above below hsides lhs rhs vsides box border<\/td>\n<td style=\"text-align: left;\">\u89c4\u5b9a\u5916\u4fa7\u8fb9\u6846\u7684\u54ea\u4e2a\u90e8\u5206\u662f\u53ef\u89c1\u7684\u3002<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.w3school.com.cn\/tags\/att_table_rules.asp\">rules<\/a><\/td>\n<td style=\"text-align: left;\">none groups rows cols all<\/td>\n<td style=\"text-align: left;\">\u89c4\u5b9a\u5185\u4fa7\u8fb9\u6846\u7684\u54ea\u4e2a\u90e8\u5206\u662f\u53ef\u89c1\u7684\u3002<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.w3school.com.cn\/tags\/att_table_summary.asp\">summary<\/a><\/td>\n<td style=\"text-align: left;\"><em>text<\/em><\/td>\n<td style=\"text-align: left;\">\u89c4\u5b9a\u8868\u683c\u7684\u6458\u8981\u3002<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.w3school.com.cn\/tags\/att_table_width.asp\">width<\/a><\/td>\n<td style=\"text-align: left;\"><em>%<\/em> <em>pixels<\/em><\/td>\n<td style=\"text-align: left;\">\u89c4\u5b9a\u8868\u683c\u7684\u5bbd\u5ea6\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Mermaid \u5b9e\u7528\u6559\u7a0b ref: https:\/\/mermaid.js.org\/config\/Tutoria&#8230; &raquo; <a class=\"read-more-link\" href=\"https:\/\/vm1.go2see.me\/?p=447\">\u95b1\u8b80\u5168\u6587<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-447","post","type-post","status-publish","format-standard","hentry","category-mermaid"],"_links":{"self":[{"href":"https:\/\/vm1.go2see.me\/index.php?rest_route=\/wp\/v2\/posts\/447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vm1.go2see.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vm1.go2see.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vm1.go2see.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vm1.go2see.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=447"}],"version-history":[{"count":5,"href":"https:\/\/vm1.go2see.me\/index.php?rest_route=\/wp\/v2\/posts\/447\/revisions"}],"predecessor-version":[{"id":452,"href":"https:\/\/vm1.go2see.me\/index.php?rest_route=\/wp\/v2\/posts\/447\/revisions\/452"}],"wp:attachment":[{"href":"https:\/\/vm1.go2see.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vm1.go2see.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vm1.go2see.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}