id: 486ca9ad48a34084a1be9ab002bed567
parent_id: 
item_type: 1
item_id: d26f405f7aaf44929613be7e19d54adc
item_updated_time: 1764345469573
title_diff: "[{\"diffs\":[[1,\"認識 docsify 文件好幫手 mermaid，簡單畫出 Flowcharts\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":40}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>認識 docsify 文件好幫手 mermaid，簡單畫出 Flowcharts</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"3966\\\"></a>\\\r\\\n<h1>認識 docsify 文件好幫手 mermaid，簡單畫出 Flowcharts</h1>\\\r\\\n\\\r\\\n<div>\\\n<span><div><br/></div><div style=\\\"font-size: 16px; min-width: 100%;\\\"><div style=\\\"background-color: transparent; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"background-color: transparent; vertical-align: baseline; font-size: 16px; text-align: left;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px auto; padding: 0px 2em; border: 0px; font-size: inherit; vertical-align: baseline; width: 36em; z-index: 200; position: relative;\\\"><div style=\\\"margin: 0px 25px 0px -25px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; position: relative;\\\"><div style=\\\"margin: 0px; padding: 0px 0px 9em; border: 0px; font-size: inherit; vertical-align: baseline; position: relative;\\\"><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; position: relative;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><h1 style=\\\"text-align: left; border: 0px; vertical-align: baseline; font-size: 35px; padding: 0px; margin: 0px;\\\"><span style=\\\"font-size: 35px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: normal;\\\">認識 docsify 文件好幫手 mermaid，簡單畫出 Flowcharts</span></h1><div style=\\\"padding: 1.5em 0px; border: 0px; font-size: inherit; vertical-align: baseline; position: relative; height: 1em; text-align: center; margin: 0px;\\\"><div style=\\\"padding:0px;border:0px;font:inherit;vertical-align:baseline;background:-webkit-linear-gradient(0deg, rgb(243, 242, 238) 1%, rgb(31, 9, 9) 50%, rgb(243, 242, 238) 99%);position:absolute;left:-4em;top:50%;z-index:10;width:100%;padding-left:4em;padding-right:4em;height:0.1em;opacity:0.5;margin:0px;margin-bottom:0px;\\\"></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><h2 style=\\\"text-align: left; margin: 35px 0px 15px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 30px;\\\"><span style=\\\"font-size: 30px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: bold;\\\">認識 mermaid，利用圖表增進文件可讀性</span></h2><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">Published in</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><a href=\\\"https://medium.com/unalai?source=post_page-----3b1ac30b1ee1--------------------------------\\\" style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\" target=\\\"_blank\\\"></a><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><a href=\\\"https://medium.com/unalai?source=post_page-----3b1ac30b1ee1--------------------------------\\\" style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\" target=\\\"_blank\\\"></a><a href=\\\"https://medium.com/unalai?source=post_page-----3b1ac30b1ee1--------------------------------\\\" style=\\\"font-size: 16px; font-family: &quot;PT Serif&quot;; line-height: 1.5em; color: rgb(6, 85, 136); text-decoration: none;\\\">UnaLai</a></div></div></div></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">·</span></div></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">6 min read</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">·</span></div><div><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">Jul 26, 2020</span></div></div></div></div></div></div></div></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 1em 0px 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; text-align: center;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/f19df43555b14753a175c0fa2e8d1822\\\" type=\\\"image/webp\\\" data-filename=\\\"Image.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></span></div></div></div></div></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">撰寫文件時，時常需要利用流程圖等，視覺化表達文件內容，幫助閱讀理解。</span></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">先前文章介紹過 docsify 文件工具(</span><a href=\\\"https://medium.com/unalai/%E5%AD%B8%E7%BF%92%E6%92%B0%E5%AF%AB%E6%96%87%E4%BB%B6-%E5%88%9D%E8%AD%98%E5%A5%BD%E5%B9%AB%E6%89%8B-docsify-4a6b93f815fb\\\" style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; font-family: &quot;PT Serif&quot;; line-height: 1.5em; color: rgb(6, 85, 136); text-decoration: none;\\\" target=\\\"_blank\\\">學習撰寫文件，初識好幫手 docsify</a><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">)，docsify 使用的是 Markdown 語法。因此繪圖時，也希望可以一併使用 Markdown 語法繪圖。較多人推薦使用的工具為 Graphviz 及 mermaid。</span></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">兩者皆可以透過 Markdown 語法，以 JS 畫圖，不需另外透過外部 server 處理、存取圖片，隱私安全性較好。</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">筆者先前使用 Graphviz，畫流程圖、簡單的資料關聯表，使用上簡單好上手，也有滿足需求。後來看見 mermaid 能夠畫出更多不同的圖表，例如甘特圖、圓餅圖等，也想試著了解 mermaid，也許能夠幫助文件撰寫。因此本文先以最好入門的 Flowcharts 流程圖開始，入門 mermaid。</span></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><h1 style=\\\"text-align: left; margin: 0px 0px 20px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 35px;\\\"><span style=\\\"font-size: 35px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: normal;\\\">➤ 在 docsify 引入 mermaid</span></h1><h2 style=\\\"text-align: left; margin: 4px 0px 20px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 15px;\\\"><span style=\\\"font-size: 15px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: bold;\\\">STEP 1：於 index.html 引入 CSS、JS 資源</span></h2><div style=\\\"background-color: rgb(243, 242, 238); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; width: auto; font-size: 0.875em;\\\"><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">&lt;link rel=&quot;stylesheet&quot; href=&quot;//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css&quot;&gt;</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">&lt;script src=&quot;//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js&quot;&gt;&lt;/script&gt;</span></div></div><h2 style=\\\"text-align: left; margin: 35px 0px 15px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 30px;\\\"><span style=\\\"font-size: 30px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: bold;\\\">STEP 2：初始化設置</span></h2><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">num 為 mermaid 渲染時，每一區塊 id 命名用。</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">initialize 初始化參數中的 theme 主題，亦可以選用其他主題，例如：default、forest、dark、neutral</span></div><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 1em 0px 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; text-align: center;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/22f2ae58cca145c095a7c38c9aa49b5c\\\" type=\\\"image/webp\\\" data-filename=\\\"1nwOOhIMxgAc8EeNdZ9LovQ.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></span></div></div></div></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">如果要做其他更細微的 CSS 調整，亦可調整於初始化參數 themeCSS 中</span></div></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><h1 style=\\\"text-align: left; margin: 0px 0px 20px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 35px;\\\"><span style=\\\"font-size: 35px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: normal;\\\">➤ 畫出簡單的 Flowcharts</span></h1><h2 style=\\\"text-align: left; margin: 4px 0px 20px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 15px;\\\"><span style=\\\"font-size: 15px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: bold;\\\">定義方向</span></h2><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.5em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">TB：上到下，同 TD</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.5em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">BT：下到上</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.5em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">RL：右到左</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.5em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">LR：左到右</span></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">聲明語言為 mermaid，以 graph 為開頭，聲明圖表方向。</span></div><div style=\\\"background-color: rgb(243, 242, 238); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; width: auto; font-size: 0.875em;\\\"><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```mermaid</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">graph TB</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id1(A)--&gt;id2[B]</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```</span></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">以 A 至 B 為例，可以使用四種方向：</span></div><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 1em 0px 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; text-align: center;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/b1fa8b82bf214f338f45b5054b12e406\\\" type=\\\"image/webp\\\" data-filename=\\\"1dWRG3qWDAyOZz-yI5x2riQ.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></span></div></div></div></div></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><h2 style=\\\"text-align: left; margin: 35px 0px 15px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 30px;\\\"><span style=\\\"font-size: 30px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: bold;\\\">定義圖型</span></h2><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">每一個圖型，皆有自己的表達方式，例如 方框 [] 、六角形 {{}}。圖型表達內的文字，即為顯示文字。圖型表達前方的 id，即為渲染後的元素 id。</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">體育場形狀指的是一對相對側具有半圓形的矩形構成的二維幾何形狀(</span><a href=\\\"https://en.wikipedia.org/wiki/Stadium_(geometry)\\\" style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; font-family: &quot;PT Serif&quot;; line-height: 1.5em; color: rgb(6, 85, 136); text-decoration: none;\\\" target=\\\"_blank\\\">查看更多說明</a><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">)</span></div><div style=\\\"background-color: rgb(243, 242, 238); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; width: auto; font-size: 0.875em;\\\"><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```mermaid</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">graph LR</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id1[方框]</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id2(帶有圓角的方框)</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id3([體育場形狀])</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id4[[子例程]]</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id5[(圓柱狀)]</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id6((圓形))</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id7&gt;非對稱形狀]</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id8{菱形}</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id9{{六角形}}</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id10[/平行四邊形1/]</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id11[\\\\平行四邊形2\\\\]</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id12[/梯形1\\\\]</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">id13[\\\\梯形2/]</span></div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```</span></div><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 1em 0px 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; text-align: center;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/c6322f37ec9b48cbaefc6a81912d5a89\\\" type=\\\"image/webp\\\" data-filename=\\\"1fBIL3Ltq5e5O214u0bezqA.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></span></div></div></div></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">若不特別更改圖型，預設為方框，其中 id 即為文本內容與元素 id</span></div><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/811a61bd63394127826281c6cdb2333c\\\" type=\\\"image/webp\\\" data-filename=\\\"Image.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;\\\" width=\\\"114\\\"/></span></div></div></div></div><div style=\\\"background-color: rgb(243, 242, 238); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; width: auto; font-size: 0.875em;\\\"><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">graph LR</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id</span></div></div></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><h2 style=\\\"text-align: left; margin: 35px 0px 15px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 30px;\\\"><span style=\\\"font-size: 30px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: bold;\\\">圖形之間的連接</span></h2><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">線條分為實線(一般、箭頭、加粗)與虛線(一般、箭頭)。</span></div><div style=\\\"background-color: rgb(243, 242, 238); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; width: auto; font-size: 0.875em;\\\"><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```mermaid</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">graph LR</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">A --- B</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">C --&gt; D</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">E -.- F</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">G -.-&gt; H</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">I === J</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```</span></div></div><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/7bd60d088fe94de393dfee7928cb06da\\\" type=\\\"image/webp\\\" data-filename=\\\"12e6qHgPW-v3-y7G6I21PUg.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;\\\" width=\\\"700\\\"/></span></div></div></div></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">線條間可以加上文字描述</span></div><div style=\\\"background-color: rgb(243, 242, 238); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; width: auto; font-size: 0.875em;\\\"><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```mermaid</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">graph LR</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">A-- 文字 ---B</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">C-- 文字 --&gt; D</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">E -. 文字 .- F</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">G -. 文字 .-&gt; H</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">I == 文字 ==&gt; J</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```</span></div></div><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/82192ef6d7d84d218290861254dafee0\\\" type=\\\"image/webp\\\" data-filename=\\\"1kLJL989AAzKXNYt8s4ccYg.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;\\\" width=\\\"700\\\"/></span></div></div></div></div></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><h2 style=\\\"text-align: left; margin: 35px 0px 15px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 30px;\\\"><span style=\\\"font-size: 30px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: bold;\\\">調整 CSS 樣式</span></h2><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">使用 style 關鍵字，定義特定 id 元素的 CSS 樣式</span></div><div style=\\\"background-color: rgb(243, 242, 238); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; width: auto; font-size: 0.875em;\\\"><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```mermaid</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">graph LR</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id1[方框]-- 文字 ---id2(帶有圓角的方框)</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">style id1 fill:#f6e6a1,stroke:#a1cdf6,stroke-width:4px</span></div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```</span></div><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 1em 0px 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; text-align: center;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/2221d2d0751b42319bcb90887c3cb65b\\\" type=\\\"image/webp\\\" data-filename=\\\"1lQd0h2-fOxMLF-q7_JDrLA.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"566\\\"/></span></div></div></div></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><h2 style=\\\"text-align: left; margin: 35px 0px 15px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 30px;\\\"><span style=\\\"font-size: 30px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: bold;\\\">子圖</span></h2><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">利用子圖可以標示出特定流程區塊</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">以 subgraph 表示子圖區塊開始，end 表示子圖區塊結束</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">子圖標題設定於 subgraph 關鍵字後</span></div><div style=\\\"background-color: rgb(243, 242, 238); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; width: auto; font-size: 0.875em;\\\"><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```mermaid</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">graph LR</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">subgraph 子圖A</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">A --- B --- C</span></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">end</span></div><div><br/></div><div><span style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; background-color: rgb(255, 250, 165); transition: background-color 0.4s ease 0s; color: black; font-family: &quot;PT Serif&quot;; line-height: 1.71429em; font-style: unset;-evernote-highlight:true;\\\" title=\\\"点击以取消高亮显示\\\">C --&gt; D</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```</span></div></div><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 1em 0px 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; text-align: center;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/dc0e061f02af426c822d83a783f737a6\\\" type=\\\"image/webp\\\" data-filename=\\\"11M6-3WiA8ZEQbh7PZygGag.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></span></div></div></div></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><h2 style=\\\"text-align: left; margin: 35px 0px 15px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 30px;\\\"><span style=\\\"font-size: 30px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: bold;\\\">繪製流程</span></h2><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">範例一</span></div><div style=\\\"background-color: rgb(243, 242, 238); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; width: auto; font-size: 0.875em;\\\"><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```mermaid</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">graph TD</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id1[A] --&gt; id2{B}</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id2{B} -- YES --&gt; id3[C]</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id2{B} -- NO --&gt; id4{D}</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id4{D} -- YES --&gt; id5[E]</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id4{D} -- NO --&gt; id6[F]</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```</span></div></div><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 1em 0px 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; text-align: center;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/3d5aeef145a147f2ad89e7f94fe1e64b\\\" type=\\\"image/webp\\\" data-filename=\\\"1GEwvUU7kZnphmP0ZuHj8xw.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"448\\\"/></span></div></div></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">範例二</span></div><div style=\\\"background-color: rgb(243, 242, 238); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; width: auto; font-size: 0.875em;\\\"><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```mermaid</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">graph LR</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id1([開始]) --&gt; id2[B] --&gt; id3{C}</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">subgraph block</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id3{C} -- NO --&gt; id2[B]</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id3{C} -- YES --&gt; id4[D]</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">end</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">id4[D] --&gt; id5([結束])</span></div><div><span style=\\\"color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.71429em;\\\">```</span></div></div><div style=\\\"margin: 1em 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 1em 0px 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; text-align: center;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\"><img src=\\\":/8db105d538f94d6d9d635da023536d1c\\\" type=\\\"image/webp\\\" data-filename=\\\"1hPl8Mf0W_H--4tkmhj_vUQ.webp\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></span></div></div></div></div></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">以上是今天的小分享，之後有時間再補上其他的圖表繪製方式，有任何問題都歡迎留言指教，謝謝</span></div></div></div></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline;\\\"><h1 style=\\\"text-align: left; margin: 0px 0px 20px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 35px;\\\"><span style=\\\"font-size: 35px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 35px; font-weight: normal;\\\">➤ 參考文件</span></h1><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; list-style-type: inherit; list-style-position: outside;\\\"><a href=\\\"https://mermaid-js.github.io/mermaid/#/\\\" style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; font-family: &quot;PT Serif&quot;; line-height: 1.5em; color: rgb(6, 85, 136); text-decoration: none;\\\" target=\\\"_blank\\\">mermaid 文件</a></div></div></div></div></div></div></div><div style=\\\"margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; position: absolute; top: -1000px; left: -1000px;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1.5em;\\\">Measure</span></div><div style=\\\"margin: 0px; padding: 0px; border: 0px; font-size: inherit; vertical-align: baseline; position: absolute; top: -1000px; left: -1000px;\\\"><span style=\\\"font-size: 16px; color: rgb(31, 9, 9); font-family: &quot;PT Serif&quot;; line-height: 1;\\\">Measure</span></div></div></div></div></div></div></div></div></span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":47045}]"
metadata_diff: {"new":{"id":"d26f405f7aaf44929613be7e19d54adc","parent_id":"061de1401cfc4cfaadf6e74e015970e9","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764345890490,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":0},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T16:20:27.361Z
created_time: 2025-11-28T16:20:27.361Z
type_: 13