{"id":164,"date":"2024-06-19T22:40:32","date_gmt":"2024-06-19T14:40:32","guid":{"rendered":"https:\/\/www.swreader.com\/?p=164"},"modified":"2024-06-22T10:44:07","modified_gmt":"2024-06-22T02:44:07","slug":"mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b","status":"publish","type":"post","link":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/","title":{"rendered":"Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b"},"content":{"rendered":"<p>Mermaid \u662f\u4e00\u4e2a\u57fa\u4e8e JavaScript \u7684\u56fe\u8868\u5e93\uff0c\u901a\u8fc7\u7b80\u5355\u7684\u6587\u672c\u63cf\u8ff0\u8bed\u6cd5\u53ef\u4ee5\u751f\u6210\u591a\u79cd\u7c7b\u578b\u7684\u56fe\u8868\u3002\u5b83\u80fd\u591f\u76f4\u63a5\u5728\u6d4f\u89c8\u5668\u4e2d\u6e32\u67d3\u56fe\u8868\uff0c\u4e5f\u53ef\u4ee5\u96c6\u6210\u5230 Markdown\u3001HTML \u7b49\u6587\u6863\u4e2d\u3002\u4e3b\u8981\u7279\u70b9\u5305\u62ec\uff1a<\/p>\n<ul>\n<li>\u652f\u6301\u591a\u79cd\u7c7b\u578b\u7684\u56fe\u8868\uff0c\u5982\u6d41\u7a0b\u56fe\u3001\u5e8f\u5217\u56fe\u3001\u7518\u7279\u56fe\u7b49\u3002<\/li>\n<li>\u4f7f\u7528\u7b80\u5355\u7684\u6587\u672c\u8bed\u6cd5\u63cf\u8ff0\uff0c\u6613\u4e8e\u5b66\u4e60\u548c\u4f7f\u7528\u3002<\/li>\n<li>\u652f\u6301\u5728\u5404\u79cd\u73af\u5883\u4e2d\u96c6\u6210\u548c\u5b9a\u5236\uff0c\u6ee1\u8db3\u4e0d\u540c\u9700\u6c42\u3002<\/li>\n<\/ul>\n<p>\u5728\u672c\u7bc7\u535a\u5ba2\u4e2d\uff0c\u6211\u4eec\u5c06\u6db5\u76d6\u4ee5\u4e0b\u5185\u5bb9\uff1a<\/p>\n<ol>\n<li><strong>\u5b89\u88c5\u548c\u96c6\u6210 Mermaid<\/strong><\/li>\n<li><strong>\u57fa\u672c\u56fe\u8868\u7c7b\u578b\u548c\u8bed\u6cd5<\/strong>\n<ul>\n<li>\u6d41\u7a0b\u56fe<\/li>\n<li>\u5e8f\u5217\u56fe<\/li>\n<li>\u7518\u7279\u56fe<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u9ad8\u7ea7\u7528\u6cd5\u548c\u5b9a\u5236<\/strong>\n<ul>\n<li>\u7c7b\u56fe<\/li>\n<li>\u72b6\u6001\u56fe<\/li>\n<li>Pie \u56fe<\/li>\n<li>Entity-Relationship \u56fe<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u5728\u4e0d\u540c\u73af\u5883\u4e2d\u4f7f\u7528 Mermaid<\/strong>\n<ul>\n<li>\u5728\u7f51\u9875\u4e2d\u4f7f\u7528<\/li>\n<li>\u5728 Markdown \u4e2d\u4f7f\u7528<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u5b9e\u9645\u793a\u4f8b\u548c\u5e94\u7528\u573a\u666f<\/strong><\/li>\n<\/ol>\n<p>\u8ba9\u6211\u4eec\u5f00\u59cb\u63a2\u7d22\u5982\u4f55\u5229\u7528 Mermaid \u521b\u5efa\u548c\u5b9a\u5236\u60a8\u7684\u56fe\u8868\uff01<\/p>\n<hr \/>\n<h2>1. \u5b89\u88c5\u548c\u96c6\u6210 Mermaid<\/h2>\n<h3>\u5728\u7f51\u9875\u4e2d\u4f7f\u7528 Mermaid<\/h3>\n<p>\u8981\u5728\u7f51\u9875\u4e2d\u4f7f\u7528 Mermaid\uff0c\u60a8\u9700\u8981\u5728 HTML \u6587\u4ef6\u4e2d\u5f15\u5165 Mermaid \u7684 JavaScript \u5e93\u6587\u4ef6\u3002\u53ef\u4ee5\u901a\u8fc7 CDN \u52a0\u8f7d\u6700\u65b0\u7248\u672c\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/mermaid@10\/dist\/mermaid.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n    mermaid.initialize({ startOnLoad: true });\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u4ee5\u4e0a\u4ee3\u7801\u5c06 Mermaid \u521d\u59cb\u5316\u5e76\u542f\u52a8\uff0c\u4f7f\u5f97\u6240\u6709\u5e26\u6709 <code>.mermaid<\/code> \u7c7b\u7684 <code>&lt;div&gt;<\/code> \u5143\u7d20\u4e2d\u7684 Mermaid \u8bed\u6cd5\u90fd\u4f1a\u88ab\u6e32\u67d3\u6210\u56fe\u8868\u3002<\/p>\n<h3>\u5728 Markdown \u4e2d\u4f7f\u7528 Mermaid<\/h3>\n<p>\u8bb8\u591a\u652f\u6301 Mermaid \u7684 Markdown \u7f16\u8f91\u5668\uff08\u5982 Typora\uff09\u53ef\u4ee5\u76f4\u63a5\u6e32\u67d3 Mermaid \u8bed\u6cd5\u3002\u4f8b\u5982\uff0c\u5728 Markdown \u6587\u4ef6\u4e2d\u4f7f\u7528\u5982\u4e0b\u8bed\u6cd5\uff1a<\/p>\n<pre><code class=\"language-markdown\">graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;\n<\/code><\/pre>\n<p>\u8fd9\u5c06\u4f1a\u5728\u6e32\u67d3\u65f6\u751f\u6210\u4e00\u4e2a\u7b80\u5355\u7684\u6d41\u7a0b\u56fe\u3002<\/p>\n<hr \/>\n<h2>2. \u57fa\u672c\u56fe\u8868\u7c7b\u578b\u548c\u8bed\u6cd5<\/h2>\n<h3>2.1 \u6d41\u7a0b\u56fe\uff08Flowchart\uff09<\/h3>\n<p>\u6d41\u7a0b\u56fe\u662f Mermaid \u4e2d\u6700\u57fa\u672c\u7684\u56fe\u8868\u7c7b\u578b\uff0c\u7528\u4e8e\u5c55\u793a\u8fc7\u7a0b\u548c\u6d41\u7a0b\u7684\u5173\u7cfb\u3002<br \/>\n\u4f8b\u5982\uff0c\u4e0b\u9762\u7684mermaid\u6d41\u7a0b\u56fe:<\/p>\n<pre><code class=\"language-markdown\">graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;<\/code><\/pre>\n<p>\u6e32\u67d3\u4e4b\u540e\u7684\u7ed3\u679c\u5982\u4e0b:<\/p>\n<pre><code class=\"language-mermaid\">graph TD;\n    A--&gt;B;\n    A--&gt;C;\n    B--&gt;D;\n    C--&gt;D;<\/code><\/pre>\n<h3>2.2 \u5e8f\u5217\u56fe\uff08Sequence Diagram\uff09<\/h3>\n<p>\u5e8f\u5217\u56fe\u7528\u4e8e\u5c55\u793a\u53c2\u4e0e\u8005\u4e4b\u95f4\u4ea4\u4e92\u7684\u987a\u5e8f\u548c\u6d88\u606f\u6d41\u3002<\/p>\n<p>\u4f8b\u5982\uff0c\u4e0b\u9762\u7684mermaid\u4ee3\u7801\u7247\u6bb5:<\/p>\n<pre><code class=\"language-markdown\">sequenceDiagram\n    participant A\n    participant B\n    A->>B: \u8bf7\u6c42\n    B-->>A: \u54cd\u5e94<\/code><\/pre>\n<p>\u6e32\u67d3\u4e4b\u540e\u7684\u7ed3\u679c\u5982\u4e0b:<\/p>\n<pre><code class=\"language-mermaid\">sequenceDiagram\n    participant A\n    participant B\n    A-&gt;&gt;B: \u8bf7\u6c42\n    B--&gt;&gt;A: \u54cd\u5e94<\/code><\/pre>\n<h3>2.3 \u7518\u7279\u56fe\uff08Gantt Chart\uff09<\/h3>\n<p>\u7518\u7279\u56fe\u7528\u4e8e\u5c55\u793a\u9879\u76ee\u7684\u8ba1\u5212\u548c\u8fdb\u5ea6\uff0c\u5305\u62ec\u4efb\u52a1\u548c\u65f6\u95f4\u8f74\u7684\u5b89\u6392\u3002<\/p>\n<pre><code class=\"language-markdown\">gantt\n    title \u9879\u76ee\u8ba1\u5212\n    section \u8bbe\u8ba1\n    \u9700\u6c42\u8c03\u7814     :done, des1, 2022-06-01,2022-06-10\n    \u6982\u8981\u8bbe\u8ba1     :done, des2, 2022-06-11,2022-06-20\n    \u8be6\u7ec6\u8bbe\u8ba1     :des3, 2022-06-21,2022-06-30\n\n    section \u5f00\u53d1\n    \u7f16\u7801         :crit, coding1, 2022-07-01, 20d\n    \u81ea\u6d4b         :crit, coding2, after coding1, 10d\n\n    section \u6d4b\u8bd5\n    \u529f\u80fd\u6d4b\u8bd5     :testing1, after coding2, 5d\n    \u56de\u5f52\u6d4b\u8bd5     :testing2, after testing1, 5d\n\n    section \u53d1\u5e03\n    \u90e8\u7f72         :deploy1, after testing2, 3d\n    \u53d1\u5e03         :deploy2, after deploy1, 2d\n\n    section \u652f\u6301\n    \u8fd0\u7ef4\u652f\u6301     :support1, after deploy2, 30d<\/code><\/pre>\n<p>\u6e32\u67d3\u4e4b\u540e\u7684\u7ed3\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">gantt\n    title \u9879\u76ee\u8ba1\u5212\n    section \u8bbe\u8ba1\n    \u9700\u6c42\u8c03\u7814     :done, des1, 2022-06-01,2022-06-10\n    \u6982\u8981\u8bbe\u8ba1     :done, des2, 2022-06-11,2022-06-20\n    \u8be6\u7ec6\u8bbe\u8ba1     :des3, 2022-06-21,2022-06-30\n\n    section \u5f00\u53d1\n    \u7f16\u7801         :crit, coding1, 2022-07-01, 20d\n    \u81ea\u6d4b         :crit, coding2, after coding1, 10d\n\n    section \u6d4b\u8bd5\n    \u529f\u80fd\u6d4b\u8bd5     :testing1, after coding2, 5d\n    \u56de\u5f52\u6d4b\u8bd5     :testing2, after testing1, 5d\n\n    section \u53d1\u5e03\n    \u90e8\u7f72         :deploy1, after testing2, 3d\n    \u53d1\u5e03         :deploy2, after deploy1, 2d\n\n    section \u652f\u6301\n    \u8fd0\u7ef4\u652f\u6301     :support1, after deploy2, 30d<\/code><\/pre>\n<hr \/>\n<h2>3. \u9ad8\u7ea7\u7528\u6cd5\u548c\u5b9a\u5236<\/h2>\n<p>\u9664\u4e86\u57fa\u672c\u7684\u6d41\u7a0b\u56fe\u3001\u5e8f\u5217\u56fe\u548c\u7518\u7279\u56fe\u5916\uff0cMermaid \u8fd8\u652f\u6301\u66f4\u591a\u9ad8\u7ea7\u7528\u6cd5\u548c\u5b9a\u5236\u9009\u9879\u3002<\/p>\n<h3>3.1 \u7c7b\u56fe\uff08Class Diagram\uff09<\/h3>\n<p>\u7c7b\u56fe\u7528\u4e8e\u5c55\u793a\u7c7b\u548c\u5b83\u4eec\u4e4b\u95f4\u7684\u5173\u7cfb\u3002<\/p>\n<pre><code class=\"language-markdown\">classDiagram\n    Class01 <|-- AveryLongClass : Cool\n    Class03 *-- Class04\n    Class05 o-- Class06\n    Class07 .. Class08\n    Class09 --> C2 : Where am i?\n    Class09 --* C3\n    Class09 --|> Class07\n    Class07 : equals()\n    Class07 : Object[] elementData\n    Class01 : size()\n    Class01 : int chimp\n    Class01 : int gorilla\n    Class08 <--> C2: Cool label<\/code><\/pre>\n<p>\u6e32\u67d3\u4e4b\u540e\u7684\u7ed3\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">classDiagram\n    Class01 &lt;|-- AveryLongClass : Cool\n    Class03 *-- Class04\n    Class05 o-- Class06\n    Class07 .. Class08\n    Class09 --&gt; C2 : Where am i?\n    Class09 --* C3\n    Class09 --|&gt; Class07\n    Class07 : equals()\n    Class07 : Object[] elementData\n    Class01 : size()\n    Class01 : int chimp\n    Class01 : int gorilla\n    Class08 &lt;--&gt; C2: Cool label<\/code><\/pre>\n<h3>3.2 \u72b6\u6001\u56fe\uff08State Diagram\uff09<\/h3>\n<p>\u72b6\u6001\u56fe\u7528\u4e8e\u5c55\u793a\u5bf9\u8c61\u5728\u4e0d\u540c\u72b6\u6001\u4e0b\u7684\u884c\u4e3a\u3002<\/p>\n<pre><code class=\"language-markdown\">\nstateDiagram\n    [*] --> Active\n\n    state Active {\n        [*] --> State1\n        State1 --> State2\n        State2 --> State1\n        State2 --> [*]\n    }<\/code><\/pre>\n<p>\u6e32\u67d3\u4e4b\u540e\u7684\u7ed3\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">stateDiagram\n    [*] --&gt; Active\n\n    state Active {\n        [*] --&gt; State1\n        State1 --&gt; State2\n        State2 --&gt; State1\n        State2 --&gt; [*]\n    }<\/code><\/pre>\n<h3>3.3 Pie \u56fe\uff08Pie Chart\uff09<\/h3>\n<p>Pie \u56fe\u7528\u4e8e\u5c55\u793a\u6570\u636e\u7684\u6bd4\u4f8b\u548c\u5206\u5e03\u3002<\/p>\n<pre><code class=\"language-markdown\">\npie\n    title \u6d4f\u89c8\u5668\u4f7f\u7528\u5206\u5e03\n    \"Chrome\" : 62.74\n    \"Firefox\" : 22.85\n    \"IE\" : 11.84\n    \"\u5176\u4ed6\" : 2.57<\/code><\/pre>\n<p>\u6e32\u67d3\u4e4b\u540e\u7684\u7ed3\u679c\uff1a<\/p>\n<pre><code class=\"language-mermaid\">pie\n    title \u6d4f\u89c8\u5668\u4f7f\u7528\u5206\u5e03\n    &quot;Chrome&quot; : 62.74\n    &quot;Firefox&quot; : 22.85\n    &quot;IE&quot; : 11.84\n    &quot;\u5176\u4ed6&quot; : 2.57<\/code><\/pre>\n<h3>3.4 Entity-Relationship \u56fe<\/h3>\n<p>ER \u56fe\u7528\u4e8e\u5c55\u793a\u5b9e\u4f53\u4e4b\u95f4\u7684\u5173\u7cfb\u548c\u5c5e\u6027\u3002<\/p>\n<pre><code class=\"language-markdown\">\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses<\/code><\/pre>\n<p>\u6e32\u67d3\u4e4b\u540e\u7684\u7ed3\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<hr \/>\n<h2>4. \u5728\u4e0d\u540c\u73af\u5883\u4e2d\u4f7f\u7528 Mermaid<\/h2>\n<p>Mermaid \u53ef\u4ee5\u8f7b\u677e\u96c6\u6210\u5230\u4e0d\u540c\u7684\u73af\u5883\u4e2d\uff0c\u5305\u62ec\uff1a<\/p>\n<ul>\n<li><strong>\u7f51\u9875<\/strong>\uff1a\u76f4\u63a5\u5728 HTML \u4e2d\u4f7f\u7528 Mermaid \u7684 JavaScript \u5e93\u3002<\/li>\n<li><strong>Markdown<\/strong>\uff1a\u5728\u652f\u6301 Mermaid \u6e32\u67d3\u7684 Markdown \u7f16\u8f91\u5668\u4e2d\u4f7f\u7528\u3002<\/li>\n<\/ul>\n<h3>\u5728\u7f51\u9875\u4e2d\u4f7f\u7528<\/h3>\n<p>\u5728 HTML \u6587\u4ef6\u4e2d\u5f15\u5165 Mermaid \u7684 JavaScript \u5e93\uff0c\u521d\u59cb\u5316\u5e76\u5728 <code>&lt;div class=&quot;mermaid&quot;&gt;<\/code> \u4e2d\u6dfb\u52a0 Mermaid \u8bed\u6cd5\u3002<\/p>\n<pre><code class=\"language-html\">&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/mermaid@10\/dist\/mermaid.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n    mermaid.initialize({ startOnLoad: true });\n&lt;\/script&gt;\n\n&lt;div class=&quot;mermaid&quot;&gt;\ngraph TD;\n    A--&gt;B;\n    A--&gt;C;\n    B--&gt;D;\n    C--&gt;D;\n&lt;\/div&gt;<\/code><\/pre>\n<h3>\u5728 Markdown \u4e2d\u4f7f\u7528<\/h3>\n<p>\u5728 Markdown \u7f16\u8f91\u5668\u4e2d\u76f4\u63a5\u4f7f\u7528 Mermaid \u8bed\u6cd5\u5373\u53ef\uff0c\u5982\uff1a<\/p>\n<pre><code class=\"language-markdown\">\ngraph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;<\/code><\/pre>\n<hr \/>\n<h2>5. \u5b9e\u9645\u793a\u4f8b\u548c\u5e94\u7528\u573a\u666f<\/h2>\n<p>Mermaid \u53ef\u4ee5\u7528\u4e8e\u5404\u79cd\u5e94\u7528\u573a\u666f\uff0c\u4f8b\u5982\uff1a<\/p>\n<ul>\n<li>\u6280\u672f\u6587\u6863\u548c\u535a\u5ba2\u7684\u6d41\u7a0b\u56fe\u548c\u5e8f\u5217\u56fe\u5c55\u793a\u3002<\/li>\n<li>\u9879\u76ee\u7ba1\u7406\u548c\u8ba1\u5212\u7684\u7518\u7279\u56fe\u548c\u65f6\u95f4\u8f74\u5c55\u793a\u3002<\/li>\n<li>\u6570\u636e\u5206\u6790\u548c\u62a5\u544a\u7684 Pie \u56fe\u548c\u7c7b\u56fe\u5c55\u793a\u3002<\/li>\n<\/ul>\n<p>\u901a\u8fc7\u4f7f\u7528 Mermaid\uff0c\u60a8\u53ef\u4ee5\u5c06\u590d\u6742\u7684\u4fe1\u606f\u548c\u6570\u636e\u8f6c\u5316\u4e3a\u76f4\u89c2\u3001\u6613\u4e8e\u7406\u89e3\u7684\u56fe\u8868\uff0c\u63d0\u5347\u6587\u6863\u548c\u62a5\u544a\u7684\u53ef\u89c6\u5316\u6548\u679c\u548c\u8868\u8fbe\u80fd\u529b\u3002<\/p>\n<hr \/>\n","protected":false},"excerpt":{"rendered":"<p>Mermaid \u662f\u4e00\u4e2a\u57fa\u4e8e JavaScript \u7684\u56fe\u8868\u5e93\uff0c\u901a\u8fc7\u7b80\u5355\u7684\u6587\u672c\u63cf\u8ff0\u8bed\u6cd5\u53ef\u4ee5\u751f\u6210\u591a\u79cd\u7c7b\u578b\u7684\u56fe\u8868\u3002\u5b83\u80fd\u591f\u76f4\u63a5\u5728\u6d4f\u89c8\u5668\u4e2d\u6e32\u67d3\u56fe\u8868\uff0c\u4e5f\u53ef\u4ee5\u96c6\u6210\u5230 Markdown\u3001HTML \u7b49\u6587\u6863\u4e2d\u3002\u4e3b\u8981\u7279\u70b9\u5305\u62ec\uff1a \u652f\u6301\u591a\u79cd\u7c7b\u578b\u7684\u56fe\u8868\uff0c\u5982\u6d41\u7a0b\u56fe\u3001\u5e8f\u5217\u56fe\u3001\u7518\u7279\u56fe\u7b49\u3002 \u4f7f\u7528\u7b80\u5355\u7684\u6587\u672c\u8bed\u6cd5\u63cf\u8ff0\uff0c\u6613\u4e8e\u5b66\u4e60\u548c\u4f7f\u7528\u3002 \u652f\u6301\u5728\u5404\u79cd\u73af\u5883\u4e2d\u96c6\u6210\u548c\u5b9a\u5236\uff0c\u6ee1\u8db3\u4e0d\u540c\u9700\u6c42\u3002 \u5728\u672c\u7bc7\u535a\u5ba2\u4e2d\uff0c\u6211\u4eec\u5c06\u6db5\u76d6\u4ee5\u4e0b\u5185\u5bb9\uff1a \u5b89\u88c5\u548c\u96c6\u6210 Mermaid \u57fa\u672c\u56fe\u8868\u7c7b\u578b\u548c\u8bed\u6cd5 \u6d41\u7a0b\u56fe \u5e8f\u5217\u56fe \u7518\u7279\u56fe \u9ad8\u7ea7\u7528\u6cd5\u548c\u5b9a\u5236 \u7c7b\u56fe \u72b6\u6001\u56fe Pie \u56fe Entity-Relationship \u56fe \u5728\u4e0d\u540c\u73af\u5883\u4e2d\u4f7f\u7528 Mermaid \u5728\u7f51\u9875\u4e2d\u4f7f\u7528 \u5728 Markdown \u4e2d\u4f7f\u7528 \u5b9e\u9645\u793a\u4f8b\u548c\u5e94\u7528\u573a\u666f \u8ba9\u6211\u4eec\u5f00\u59cb\u63a2\u7d22\u5982\u4f55\u5229\u7528 Mermaid \u521b\u5efa\u548c\u5b9a\u5236\u60a8\u7684\u56fe\u8868\uff01 1. \u5b89\u88c5\u548c\u96c6\u6210 Mermaid \u5728\u7f51\u9875\u4e2d\u4f7f\u7528 Mermaid \u8981\u5728\u7f51\u9875\u4e2d\u4f7f\u7528 Mermaid\uff0c\u60a8\u9700\u8981\u5728 HTML \u6587\u4ef6\u4e2d\u5f15\u5165 Mermaid \u7684 JavaScript \u5e93\u6587\u4ef6\u3002\u53ef\u4ee5\u901a\u8fc7 CDN \u52a0\u8f7d\u6700\u65b0\u7248\u672c\uff1a &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/mermaid@10\/dist\/mermaid.min.js&quot;&gt;&lt;\/script&gt; &lt;script&gt; mermaid.initialize({ startOnLoad: true }); &lt;\/script&gt; \u4ee5\u4e0a\u4ee3\u7801\u5c06 Mermaid \u521d\u59cb\u5316\u5e76\u542f\u52a8\uff0c\u4f7f\u5f97\u6240\u6709\u5e26\u6709 .mermaid \u7c7b\u7684 &lt;div&gt; \u5143\u7d20\u4e2d\u7684 Mermaid \u8bed\u6cd5\u90fd\u4f1a\u88ab\u6e32\u67d3\u6210\u56fe\u8868\u3002 \u5728 Markdown \u4e2d\u4f7f\u7528 Mermaid \u8bb8\u591a\u652f\u6301 Mermaid \u7684 Markdown \u7f16\u8f91\u5668\uff08\u5982 Typora\uff09\u53ef\u4ee5\u76f4\u63a5\u6e32\u67d3 Mermaid \u8bed\u6cd5\u3002\u4f8b\u5982\uff0c\u5728 Markdown \u6587\u4ef6\u4e2d\u4f7f\u7528\u5982\u4e0b\u8bed\u6cd5\uff1a graph TD; A&#8211;>B; A&#8211;>C; B&#8211;>D; C&#8211;>D; \u8fd9\u5c06\u4f1a\u5728\u6e32\u67d3\u65f6\u751f\u6210\u4e00\u4e2a\u7b80\u5355\u7684\u6d41\u7a0b\u56fe\u3002 2. \u57fa\u672c\u56fe\u8868\u7c7b\u578b\u548c\u8bed\u6cd5 2.1 \u6d41\u7a0b\u56fe\uff08Flowchart\uff09 \u6d41\u7a0b\u56fe\u662f Mermaid \u4e2d\u6700\u57fa\u672c\u7684\u56fe\u8868\u7c7b\u578b\uff0c\u7528\u4e8e\u5c55\u793a\u8fc7\u7a0b\u548c\u6d41\u7a0b\u7684\u5173\u7cfb\u3002 \u4f8b\u5982\uff0c\u4e0b\u9762\u7684mermaid\u6d41\u7a0b\u56fe: graph TD; A&#8211;>B; A&#8211;>C; B&#8211;>D; C&#8211;>D; \u6e32\u67d3\u4e4b\u540e\u7684\u7ed3\u679c\u5982\u4e0b: graph TD; A&#8211;&gt;B; A&#8211;&gt;C; B&#8211;&gt;D; C&#8211;&gt;D; 2.2 \u5e8f\u5217\u56fe\uff08Sequence Diagram\uff09 \u5e8f\u5217\u56fe\u7528\u4e8e\u5c55\u793a\u53c2\u4e0e\u8005\u4e4b\u95f4\u4ea4\u4e92\u7684\u987a\u5e8f\u548c\u6d88\u606f\u6d41\u3002 \u4f8b\u5982\uff0c\u4e0b\u9762\u7684mermaid\u4ee3\u7801\u7247\u6bb5: sequenceDiagram participant A participant B A->>B: \u8bf7\u6c42 B&#8211;>>A: \u54cd\u5e94 \u6e32\u67d3\u4e4b\u540e\u7684\u7ed3\u679c\u5982\u4e0b: sequenceDiagram participant A participant B A-&gt;&gt;B: \u8bf7\u6c42 B&#8211;&gt;&gt;A: \u54cd\u5e94 2.3 \u7518\u7279\u56fe\uff08Gantt Chart\uff09 \u7518\u7279\u56fe\u7528\u4e8e\u5c55\u793a\u9879\u76ee\u7684\u8ba1\u5212\u548c\u8fdb\u5ea6\uff0c\u5305\u62ec\u4efb\u52a1\u548c\u65f6\u95f4\u8f74\u7684\u5b89\u6392\u3002 gantt title \u9879\u76ee\u8ba1\u5212 section \u8bbe\u8ba1 \u9700\u6c42\u8c03\u7814 :done, des1, 2022-06-01,2022-06-10 \u6982\u8981\u8bbe\u8ba1 :done, des2, 2022-06-11,2022-06-20 \u8be6\u7ec6\u8bbe\u8ba1 :des3, 2022-06-21,2022-06-30 section \u5f00\u53d1 \u7f16\u7801 :crit, coding1, 2022-07-01, 20d \u81ea\u6d4b :crit, coding2, after coding1, 10d section \u6d4b\u8bd5 \u529f\u80fd\u6d4b\u8bd5 :testing1, after coding2, 5d \u56de\u5f52\u6d4b\u8bd5 :testing2, after testing1, 5d section \u53d1\u5e03 \u90e8\u7f72 :deploy1, after testing2, 3d \u53d1\u5e03 :deploy2, after deploy1, 2d section \u652f\u6301 \u8fd0\u7ef4\u652f\u6301 :support1, after deploy2, 30d \u6e32\u67d3\u4e4b\u540e\u7684\u7ed3\u679c\uff1a gantt title \u9879\u76ee\u8ba1\u5212 section \u8bbe\u8ba1 \u9700\u6c42\u8c03\u7814 :done, des1, 2022-06-01,2022-06-10 \u6982\u8981\u8bbe\u8ba1 :done, des2, 2022-06-11,2022-06-20 \u8be6\u7ec6\u8bbe\u8ba1 :des3, 2022-06-21,2022-06-30 section \u5f00\u53d1 \u7f16\u7801 :crit, coding1, 2022-07-01, 20d \u81ea\u6d4b :crit, coding2, after coding1, 10d section \u6d4b\u8bd5 \u529f&#8230;<\/p>\n","protected":false},"author":1,"featured_media":165,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[138,82],"tags":[142,148,140,144,146],"class_list":["post-164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mermaid","category-tools","tag-flow","tag-markdown","tag-mermaid","tag-144","tag-146"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b - TianYa Blog<\/title>\n<meta name=\"description\" content=\"\u5728\u8fd9\u7bc7\u535a\u5ba2\u4e2d\uff0c\u6211\u5c06\u8be6\u7ec6\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Mermaid \u8fd9\u4e00\u5f3a\u5927\u7684\u5f00\u6e90\u5de5\u5177\u6765\u521b\u5efa\u5404\u79cd\u7c7b\u578b\u7684\u56fe\u8868\uff0c\u5305\u62ec\u6d41\u7a0b\u56fe\u3001\u5e8f\u5217\u56fe\u3001\u7518\u7279\u56fe\u7b49\u3002Mermaid \u4f7f\u7528\u7b80\u5355\u7684\u6587\u672c\u63cf\u8ff0\u8bed\u6cd5\uff0c\u9002\u5408\u7528\u4e8e\u6280\u672f\u6587\u6863\u3001\u535a\u5ba2\u548c\u5176\u4ed6\u6587\u6863\u7684\u53ef\u89c6\u5316\u5448\u73b0\u3002\u5e76\u4e14\u7ed9\u51fa\u4e86\u8be6\u7ec6\u7684demo\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b - TianYa Blog\" \/>\n<meta property=\"og:description\" content=\"\u5728\u8fd9\u7bc7\u535a\u5ba2\u4e2d\uff0c\u6211\u5c06\u8be6\u7ec6\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Mermaid \u8fd9\u4e00\u5f3a\u5927\u7684\u5f00\u6e90\u5de5\u5177\u6765\u521b\u5efa\u5404\u79cd\u7c7b\u578b\u7684\u56fe\u8868\uff0c\u5305\u62ec\u6d41\u7a0b\u56fe\u3001\u5e8f\u5217\u56fe\u3001\u7518\u7279\u56fe\u7b49\u3002Mermaid \u4f7f\u7528\u7b80\u5355\u7684\u6587\u672c\u63cf\u8ff0\u8bed\u6cd5\uff0c\u9002\u5408\u7528\u4e8e\u6280\u672f\u6587\u6863\u3001\u535a\u5ba2\u548c\u5176\u4ed6\u6587\u6863\u7684\u53ef\u89c6\u5316\u5448\u73b0\u3002\u5e76\u4e14\u7ed9\u51fa\u4e86\u8be6\u7ec6\u7684demo\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b\/\" \/>\n<meta property=\"og:site_name\" content=\"TianYa Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-19T14:40:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-22T02:44:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.swreader.com\/wp-content\/uploads\/2024\/06\/ftjeat_s7q4-e1719024202770.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"451\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"zdm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"zdm\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/\"},\"author\":{\"name\":\"zdm\",\"@id\":\"https:\\\/\\\/www.swreader.com\\\/#\\\/schema\\\/person\\\/9c90501e33afc9307d757bc8cfaf1c6f\"},\"headline\":\"Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b\",\"datePublished\":\"2024-06-19T14:40:32+00:00\",\"dateModified\":\"2024-06-22T02:44:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/\"},\"wordCount\":64,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.swreader.com\\\/#\\\/schema\\\/person\\\/9c90501e33afc9307d757bc8cfaf1c6f\"},\"image\":{\"@id\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.swreader.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/ftjeat_s7q4-e1719024202770.jpg\",\"keywords\":[\"flow\",\"Markdown\",\"Mermaid\",\"\u6d41\u7a0b\u56fe\",\"\u7518\u7279\u56fe\"],\"articleSection\":[\"mermaid\",\"Tools\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/\",\"url\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/\",\"name\":\"Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b - TianYa Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.swreader.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.swreader.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/ftjeat_s7q4-e1719024202770.jpg\",\"datePublished\":\"2024-06-19T14:40:32+00:00\",\"dateModified\":\"2024-06-22T02:44:07+00:00\",\"description\":\"\u5728\u8fd9\u7bc7\u535a\u5ba2\u4e2d\uff0c\u6211\u5c06\u8be6\u7ec6\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Mermaid \u8fd9\u4e00\u5f3a\u5927\u7684\u5f00\u6e90\u5de5\u5177\u6765\u521b\u5efa\u5404\u79cd\u7c7b\u578b\u7684\u56fe\u8868\uff0c\u5305\u62ec\u6d41\u7a0b\u56fe\u3001\u5e8f\u5217\u56fe\u3001\u7518\u7279\u56fe\u7b49\u3002Mermaid \u4f7f\u7528\u7b80\u5355\u7684\u6587\u672c\u63cf\u8ff0\u8bed\u6cd5\uff0c\u9002\u5408\u7528\u4e8e\u6280\u672f\u6587\u6863\u3001\u535a\u5ba2\u548c\u5176\u4ed6\u6587\u6863\u7684\u53ef\u89c6\u5316\u5448\u73b0\u3002\u5e76\u4e14\u7ed9\u51fa\u4e86\u8be6\u7ec6\u7684demo\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\u3002\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.swreader.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/ftjeat_s7q4-e1719024202770.jpg\",\"contentUrl\":\"https:\\\/\\\/www.swreader.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/ftjeat_s7q4-e1719024202770.jpg\",\"width\":800,\"height\":451,\"caption\":\"yellow and blue color paper\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/2024\\\/06\\\/19\\\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\\\/\\\/www.swreader.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.swreader.com\\\/#website\",\"url\":\"https:\\\/\\\/www.swreader.com\\\/\",\"name\":\"TianYa Blog\",\"description\":\"Technology And Life\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.swreader.com\\\/#\\\/schema\\\/person\\\/9c90501e33afc9307d757bc8cfaf1c6f\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.swreader.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.swreader.com\\\/#\\\/schema\\\/person\\\/9c90501e33afc9307d757bc8cfaf1c6f\",\"name\":\"zdm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2670c9b6412a56381880b2ca03988f659e8a378fe7332238a4a741b660a60997?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2670c9b6412a56381880b2ca03988f659e8a378fe7332238a4a741b660a60997?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2670c9b6412a56381880b2ca03988f659e8a378fe7332238a4a741b660a60997?s=96&d=mm&r=g\",\"caption\":\"zdm\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2670c9b6412a56381880b2ca03988f659e8a378fe7332238a4a741b660a60997?s=96&d=mm&r=g\"},\"sameAs\":[\"http:\\\/\\\/www.swreader.com\"],\"url\":\"https:\\\/\\\/www.swreader.com\\\/index.php\\\/author\\\/zdm\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b - TianYa Blog","description":"\u5728\u8fd9\u7bc7\u535a\u5ba2\u4e2d\uff0c\u6211\u5c06\u8be6\u7ec6\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Mermaid \u8fd9\u4e00\u5f3a\u5927\u7684\u5f00\u6e90\u5de5\u5177\u6765\u521b\u5efa\u5404\u79cd\u7c7b\u578b\u7684\u56fe\u8868\uff0c\u5305\u62ec\u6d41\u7a0b\u56fe\u3001\u5e8f\u5217\u56fe\u3001\u7518\u7279\u56fe\u7b49\u3002Mermaid \u4f7f\u7528\u7b80\u5355\u7684\u6587\u672c\u63cf\u8ff0\u8bed\u6cd5\uff0c\u9002\u5408\u7528\u4e8e\u6280\u672f\u6587\u6863\u3001\u535a\u5ba2\u548c\u5176\u4ed6\u6587\u6863\u7684\u53ef\u89c6\u5316\u5448\u73b0\u3002\u5e76\u4e14\u7ed9\u51fa\u4e86\u8be6\u7ec6\u7684demo\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b\/","og_locale":"zh_CN","og_type":"article","og_title":"Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b - TianYa Blog","og_description":"\u5728\u8fd9\u7bc7\u535a\u5ba2\u4e2d\uff0c\u6211\u5c06\u8be6\u7ec6\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Mermaid \u8fd9\u4e00\u5f3a\u5927\u7684\u5f00\u6e90\u5de5\u5177\u6765\u521b\u5efa\u5404\u79cd\u7c7b\u578b\u7684\u56fe\u8868\uff0c\u5305\u62ec\u6d41\u7a0b\u56fe\u3001\u5e8f\u5217\u56fe\u3001\u7518\u7279\u56fe\u7b49\u3002Mermaid \u4f7f\u7528\u7b80\u5355\u7684\u6587\u672c\u63cf\u8ff0\u8bed\u6cd5\uff0c\u9002\u5408\u7528\u4e8e\u6280\u672f\u6587\u6863\u3001\u535a\u5ba2\u548c\u5176\u4ed6\u6587\u6863\u7684\u53ef\u89c6\u5316\u5448\u73b0\u3002\u5e76\u4e14\u7ed9\u51fa\u4e86\u8be6\u7ec6\u7684demo\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\u3002","og_url":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b\/","og_site_name":"TianYa Blog","article_published_time":"2024-06-19T14:40:32+00:00","article_modified_time":"2024-06-22T02:44:07+00:00","og_image":[{"width":800,"height":451,"url":"https:\/\/www.swreader.com\/wp-content\/uploads\/2024\/06\/ftjeat_s7q4-e1719024202770.jpg","type":"image\/jpeg"}],"author":"zdm","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"zdm","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/#article","isPartOf":{"@id":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/"},"author":{"name":"zdm","@id":"https:\/\/www.swreader.com\/#\/schema\/person\/9c90501e33afc9307d757bc8cfaf1c6f"},"headline":"Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b","datePublished":"2024-06-19T14:40:32+00:00","dateModified":"2024-06-22T02:44:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/"},"wordCount":64,"commentCount":0,"publisher":{"@id":"https:\/\/www.swreader.com\/#\/schema\/person\/9c90501e33afc9307d757bc8cfaf1c6f"},"image":{"@id":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/#primaryimage"},"thumbnailUrl":"https:\/\/www.swreader.com\/wp-content\/uploads\/2024\/06\/ftjeat_s7q4-e1719024202770.jpg","keywords":["flow","Markdown","Mermaid","\u6d41\u7a0b\u56fe","\u7518\u7279\u56fe"],"articleSection":["mermaid","Tools"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/","url":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/","name":"Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b - TianYa Blog","isPartOf":{"@id":"https:\/\/www.swreader.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/#primaryimage"},"image":{"@id":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/#primaryimage"},"thumbnailUrl":"https:\/\/www.swreader.com\/wp-content\/uploads\/2024\/06\/ftjeat_s7q4-e1719024202770.jpg","datePublished":"2024-06-19T14:40:32+00:00","dateModified":"2024-06-22T02:44:07+00:00","description":"\u5728\u8fd9\u7bc7\u535a\u5ba2\u4e2d\uff0c\u6211\u5c06\u8be6\u7ec6\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Mermaid \u8fd9\u4e00\u5f3a\u5927\u7684\u5f00\u6e90\u5de5\u5177\u6765\u521b\u5efa\u5404\u79cd\u7c7b\u578b\u7684\u56fe\u8868\uff0c\u5305\u62ec\u6d41\u7a0b\u56fe\u3001\u5e8f\u5217\u56fe\u3001\u7518\u7279\u56fe\u7b49\u3002Mermaid \u4f7f\u7528\u7b80\u5355\u7684\u6587\u672c\u63cf\u8ff0\u8bed\u6cd5\uff0c\u9002\u5408\u7528\u4e8e\u6280\u672f\u6587\u6863\u3001\u535a\u5ba2\u548c\u5176\u4ed6\u6587\u6863\u7684\u53ef\u89c6\u5316\u5448\u73b0\u3002\u5e76\u4e14\u7ed9\u51fa\u4e86\u8be6\u7ec6\u7684demo\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\u3002","breadcrumb":{"@id":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/#primaryimage","url":"https:\/\/www.swreader.com\/wp-content\/uploads\/2024\/06\/ftjeat_s7q4-e1719024202770.jpg","contentUrl":"https:\/\/www.swreader.com\/wp-content\/uploads\/2024\/06\/ftjeat_s7q4-e1719024202770.jpg","width":800,"height":451,"caption":"yellow and blue color paper"},{"@type":"BreadcrumbList","@id":"https:\/\/www.swreader.com\/index.php\/2024\/06\/19\/mermaid%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e%e4%b8%8e%e6%a1%88%e4%be%8b\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.swreader.com\/"},{"@type":"ListItem","position":2,"name":"Mermaid\u4f7f\u7528\u8bf4\u660e\u4e0e\u6848\u4f8b"}]},{"@type":"WebSite","@id":"https:\/\/www.swreader.com\/#website","url":"https:\/\/www.swreader.com\/","name":"TianYa Blog","description":"Technology And Life","publisher":{"@id":"https:\/\/www.swreader.com\/#\/schema\/person\/9c90501e33afc9307d757bc8cfaf1c6f"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.swreader.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"https:\/\/www.swreader.com\/#\/schema\/person\/9c90501e33afc9307d757bc8cfaf1c6f","name":"zdm","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/secure.gravatar.com\/avatar\/2670c9b6412a56381880b2ca03988f659e8a378fe7332238a4a741b660a60997?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2670c9b6412a56381880b2ca03988f659e8a378fe7332238a4a741b660a60997?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2670c9b6412a56381880b2ca03988f659e8a378fe7332238a4a741b660a60997?s=96&d=mm&r=g","caption":"zdm"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/2670c9b6412a56381880b2ca03988f659e8a378fe7332238a4a741b660a60997?s=96&d=mm&r=g"},"sameAs":["http:\/\/www.swreader.com"],"url":"https:\/\/www.swreader.com\/index.php\/author\/zdm\/"}]}},"_links":{"self":[{"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/posts\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/comments?post=164"}],"version-history":[{"count":5,"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/posts\/164\/revisions"}],"predecessor-version":[{"id":173,"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/posts\/164\/revisions\/173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/media\/165"}],"wp:attachment":[{"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/media?parent=164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/categories?post=164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.swreader.com\/index.php\/wp-json\/wp\/v2\/tags?post=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}