drawio（draw.io）教學：免費免登入，畫出流程圖與網站架構圖

網站的聯絡表單一送出，詢價信就進了信箱。誰先看、什麼樣的需求可以直接報價、什麼樣的要先打電話補問，往往每個人腦中各有一套版本，等到某封信漏了沒回，才發現大家想的不一樣。用 drawio 把這條路線畫成一張流程圖，團隊才有同一份依據可以對照，也才有地方可以修改。

這類圖不需要安裝軟體，也不需要註冊帳號，打開瀏覽器就能畫。drawio（正式寫法是 draw.io）是一套免費、開源的線上製圖工具，流程圖、組織圖、網站架構圖都畫得出來，檔案存在自己選的位置，不會被鎖在某個帳號底下。它真正讓新手卻步的地方，通常不是功能不夠，而是所有功能同時攤在畫面上，讓人不知道該從哪裡下手。

讀完這篇，你可以從空白畫布畫出一張龐果設計網站的聯絡表單詢價流程圖，再排出一張網站架構圖，最後匯出成適合放進網頁的 PNG 或 SVG。要把這些動作做順，得先弄清楚這個工具把檔案放在哪裡，以及它靠什麼方式運作。

draw.io 是什麼？

draw.io 是一套在瀏覽器裡執行的免費圖表工具，原始碼開放，網頁版的網址是 app.diagrams.net。它的圖形庫內建流程圖、UML、組織圖、網路圖、心智圖、平面圖、線框圖等類型，所以同一個工具可以應付大部分日常的製圖需求，不用為了不同的圖換不同的軟體。

使用方式有兩種。第一種是直接開網頁版，免登入、免安裝，適合臨時畫一張圖；第二種是安裝離線的桌面版 draw.io Desktop，適合常常在沒有網路的環境工作，或是希望所有檔案都留在自己電腦裡的人。兩者的畫面與操作大致相同，這篇示範用的是網頁版。

隱私的部分，draw.io 的說明文件寫得很明確，它不保管使用者的圖表資料。編輯中的圖表只存在自己裝置的瀏覽器裡，按下儲存才會寫到自己選定的位置，可能是自己的電腦或瀏覽器，也可能是 Google Drive、OneDrive、Dropbox、GitHub、GitLab 這類雲端，存檔時圖表資料不會傳到 draw.io 的伺服器。正因為不保管資料，這個工具不需要帳號就能開啟與編輯。說明文件也註明了一個例外，在較舊的瀏覽器匯出 PDF 或圖片時，圖表會暫時送到伺服器轉檔，交付檔案後隨即刪除。

示範用的範例是龐果設計網站的聯絡表單詢價處理流程，內容是訪客送出表單，團隊收到通知信，判斷需求是否明確，明確就回覆報價，不明確就先補問。這個範例的形狀種類剛好夠用，從放圖形、連線、加標籤、上色到匯出，每個環節都會碰到。

網頁版免登入，檔案存到裝置就能用

開始動手的最短路徑，是在瀏覽器輸入 app.diagrams.net。有時會直接進入空白編輯器，有時會先跳出視窗詢問檔案要存在哪裡，兩種畫面都屬正常。

如果被問到儲存位置，選「裝置」（英文介面為 Device）就好，意思是把檔案存到自己的電腦裡，不必授權任何雲端服務。若選 Google Drive 或 OneDrive 這類雲端，編輯器會要求授權讀取與編輯該平台上的檔案，剛上手時可以先不碰這一塊。

不同儲存位置的差異，主要在附加功能。存到線上平台時，自動儲存預設是開啟的，部分平台還有版本記錄與即時協作；存到裝置或瀏覽器則不需要網路連線，離線也能用，存在瀏覽器時同樣會自動儲存，存到裝置則要記得自己按 Ctrl+S 儲存，想換位置或換檔名用「檔案 > 另存新檔」（Ctrl+Shift+S）。存在瀏覽器裡的檔案會在下次開啟時自動重開最近的圖表，不過它只留在那一個瀏覽器裡，換電腦或換瀏覽器就看不到，清理瀏覽器的網站資料時也可能一併被清掉，重要的圖還是另存成檔案比較安心。

預設的檔案格式是 .drawio，內容是未壓縮的 XML，之後想回頭修改，就用 draw.io 開這個檔。另外也可以存成內嵌圖表資料的 .png、.svg 或 .html，它們看起來是一般圖片，但再拖回 draw.io 仍然能編輯。

後面步驟提到的選單與按鈕名稱，都以繁體中文介面為準。切換方法有兩種，一是在網址後面加上 ?lang=zh-tw，也就是 app.diagrams.net/?lang=zh-tw，二是進入編輯器後從「其他 > 語言」選單挑選。切換成功後，選單列會顯示「檔案、編輯、檢視、調整、其他、說明」。

新增圖表可從空白、範本或文字起手

按下「檔案 > 新增…」會跳出範本視窗，上方可以輸入圖表名稱、選擇檔案格式（預設是 XML 檔案 .drawio），左側是範本分類，右側是縮圖。這一步其實是在決定起手方式，要從零開始，還是借別人排好的版型。

右側縮圖的第一格是「空白圖表」，第二格是「產生」，也就是用文字描述讓工具先出一張草稿。其餘縮圖則是現成範本，像類別圖、流程圖、組織圖、泳道圖、心智圖等。左側分類涵蓋基本圖形、從文字、商務、圖表、雲朵、工程圖、流程圖、地圖、網路、軟體、表格、UML 等類型，數量會隨版本調整，找不到時多半換個分類就會出現。

範本可以先點一下預覽放大，確認版型合用再按「新增」。已經開著一張圖、只是想借用某個版型時，不必另開新檔，用「調整 > 插入 > 樣板…」就能把範本放進目前的畫布。

判斷要不要用範本，看流程的獨特程度。想快速出一張常見版型的圖，例如組織圖，先套範本再改字最省時間；像詢價流程這種每一步都依自己公司作法而定的圖，從空白圖表開始，反而更容易看懂每個操作在做什麼。所以這篇的示範一律從「空白圖表」起手。

圖形庫、畫布與格式面板的分工

編輯器可以想成三塊。左邊是圖形庫，放著可以拖進圖裡的形狀；中間是畫布，所有的圖都在這裡組起來；右邊是格式面板，專門調整目前選取的東西長什麼樣子。後面每一個操作，都可以對應到這三塊其中之一。

左側圖形庫依用途分成「一般、其他、進階、基本圖形、箭頭、流程圖、實體關係、UML」等區塊，區塊上方有搜尋框，直接輸入形狀名稱就能找到。最下方的「更多圖形」按鈕用來啟用其他圖形庫，例如網路、雲端服務的圖示。圖形庫上方還有一塊「便箋本」，把常用的圖形拖進去暫存，下次畫圖就不必再翻找。

右側格式面板會依當下選取的對象改變內容。沒有選任何東西時，面板顯示的是整張圖的設定，像網格、頁面檢視、背景、連接箭頭、連接點、參考線與紙張大小；選了圖形或連接線之後，面板上方會出現「樣式」「文字」「調整」三個分頁，分別管外觀、文字與位置尺寸。找不到某個設定時，多半是因為還沒先選取對象。

畫布上方的工具列則放最常用的幾顆按鈕，包括縮放、復原與重做、刪除、填色、線色、陰影、連接線樣式，以及插入（+）與產生（閃爍的星星）。畫面上的按鈕雖然多，實際上一張流程圖最常動用的，就是圖形庫的形狀、右側的樣式與文字分頁，以及這排工具列。

流程圖常用的六種圖形與放置方式

流程圖的每種圖形各代表不同的流程意義，要把詢價流程畫出來，最常用到的是下面六種：

• 矩形：一般的處理步驟，範例中的「收到通知信」「回覆報價」「來電或來信補問」都用它。
• 菱形：判斷，通常是「是／否」的問題，會把流程分成兩條以上的分支，範例中的「需求是否明確」用它。
• 圓形或橢圓：流程的起點與終點，範例中的「開始」與「結束」用它。
• 平行四邊形：輸入或輸出，也就是流程需要從外部取得資訊，範例中「訪客送出聯絡表單」用它。
• 圓柱：資料儲存，表示這個步驟會把資料存起來，例如詢價紀錄存進資料庫。
• 下緣呈波浪線的矩形：文件，表示這個步驟會產出一份文件，例如報價單。

選定形狀之後，基本編輯動作都在畫布上完成。單擊圖形可以選取，按住 Shift 或 Ctrl（macOS 為 Cmd）再點選其他圖形，就能多選；拖曳圖形可以移動，拖曳四周的控制點可以縮放，按住 Ctrl 縮放時會以圖形中心為基準；圖形右上角的圓弧箭頭可以旋轉；要刪除就按 Backspace 或 Delete，或用工具列的刪除鈕。

三種把圖形放上畫布的方式

把形狀放上畫布有三種做法，差別在位置要不要自己決定。第一種是直接點圖形庫裡的形狀，它會自動出現在畫布上，速度最快，連續點好幾個形狀之後再整理位置也行。第二種是在畫布的空白處雙擊，從跳出的形狀挑選器選一個，滑鼠不必移到左邊，適合一邊畫一邊想的時候。第三種是從圖形庫拖曳到畫布的指定位置，需要把形狀放在精準的地方時才用得上。

範例中，第一個「開始」橢圓可以用第二種做法，在畫布上方偏左的位置雙擊，選圓形放下。接著「訪客送出聯絡表單」的平行四邊形，直接從圖形庫拖到橢圓下方，位置一次到位。後面的矩形與菱形，因為順序固定，用點選的方式連續放進去就好。

用點選方式連續放入多個圖形時，它們會疊在附近，不必擔心，之後都可以拖開，連接線也能事後再補。反過來，如果一開始就想好每個形狀的位置，拖曳會比較有條理。

啟用流程圖專用圖形庫

一般圖形庫裡已經有矩形、菱形等基本形狀，但要用到預先定義流程、手動輸入、資料庫、文件這類更完整的流程圖符號，就需要「流程圖」圖形庫。繁中介面的左側面板通常已經列出「流程圖」這個折疊區，點開就能看到；如果沒看到，或想啟用其他圖形庫，操作都在左側面板最下方的「更多圖形」。

做法是三步。按下「更多圖形」，在跳出的視窗勾選「流程圖」，再按「套用」，該圖形庫就會出現在左側面板。範例中的「需求是否明確」需要一個決策菱形，可以從這個庫拖出來，或直接用一般庫裡的菱形，兩邊的差別只在流程圖庫收錄的形狀比較多，挑一邊用就好，不必兩邊都翻一遍。

連接線分浮動與固定，路徑可自行調整

流程圖能不能長久維護，關鍵在於連接線怎麼接。draw.io 的連接線分成兩種，浮動連接線的端點會沿著圖形外框移動，圖形換位置時自動選最短的路徑；固定連接線則釘在圖形上特定的連接點，圖形搬到哪裡，線頭都留在同一個連接點。

版面還在調整的階段，用浮動連接線最省事，圖形一搬動，線就自己跟上；等到版面確定、需要整齊的出入口位置時，才換成固定連接線，例如菱形的「是」固定從下方出去、「否」固定從右邊出去。兩種接法可以在同一張圖混用，範例中就是前半段用浮動，兩條分支改用固定。

連接線畫好之後還可以調整路徑、線型與箭頭，讓畫面不會出現線穿過別的圖形的情況。

浮動連接線隨圖形自動換邊

標準的拉法很簡單。滑鼠移到來源圖形上，圖形四周會出現淺色的方向箭頭，把滑鼠放在其中一個箭頭上，朝目標圖形拖曳，當目標圖形的外框變成藍色，就可以放開。

放開之後，連接線會依兩個圖形的相對位置，選最短的路徑連起來。之後只要移動其中一個圖形，線的端點就會自動沿著外框換邊，維持最短距離，所以調整版面時不必逐條重接。範例中，「開始」連到「訪客送出聯絡表單」、再連到「收到通知信」與「需求是否明確」，這一段都用浮動連接線畫就夠了。

固定連接線釘在指定連接點

要讓版面整齊，像是菱形的兩條分支一左一右對稱，就改用固定連接線。把滑鼠移到來源圖形上，圖形周圍會顯示小叉叉，這些就是連接點；從其中一個連接點拖向目標圖形，目標圖形的連接點同樣會顯示，對準想連的那一點，直到它亮成綠色再放開。

接好以後，不管圖形怎麼搬動，線頭都會留在同一個連接點上，線的走法不會自己亂跑。範例中的菱形「需求是否明確」，「是」從下方連到「回覆報價」，「否」從右邊連到「來電或來信補問」，兩條都用固定連接線；補問之後再把線拉回菱形上方，讓流程形成一個回圈。

調整連接線的路徑、線型與箭頭

選取一條連接線，線上會出現小圓圈形狀的路徑點。拖曳其中一個到新位置，連接線就繞過去，新的路徑點會依抓取位置自動增加。浮動連接線靠近被拖動的那一端，仍會沿圖形外框移動；固定連接線則維持在原本的連接點。想把繞得亂七八糟的線整個重來，可以選取後使用「調整 > 清除路徑點」（Alt+Shift+R）。

選到連接線之後，可以用上方工具列的連接線與路徑點按鈕，或右側的「樣式」分頁，換線型、兩端的箭頭，還有路徑樣式，例如直線、直角或曲線。範例中的回圈線用直角路徑最清楚，而且要讓它繞開途中的其他圖形。

整張圖的連接線風格最好一致，做法是選取其中一條調好的線，在右側「樣式」分頁最下方按「設為預設樣式」，之後新畫的線就會套用；已經畫好的線，則用「複製樣式」「貼上樣式」一次套過去。

圖形與連接線的文字標籤盡量寫短

流程圖好不好讀，幾乎取決於標籤的長短。標籤太長，圖形會被撐大、整張圖變得擁擠；標籤夠短，讀者掃一眼就知道每個步驟在做什麼，draw.io 的流程圖入門教學也提到，圖形上的標籤短，整張圖才容易一眼看懂。

圖形的標籤很好加，雙擊圖形直接輸入，或是單擊選取後直接打字，打完按 Esc 或 Ctrl+Enter 結束編輯，輸入的文字會保留下來。這個細節很容易漏掉，因為按 Enter 不會結束編輯，而是換行，標籤需要分成兩行時，按 Enter 或 Shift+Enter 都可以。範例中，各圖形的標籤依序是「開始」「送出聯絡表單」「收到通知信」「需求是否明確」「回覆報價」「來電或來信補問」「結束」，每一個都盡量控制在一行內。

連接線的標籤可以放在三個位置，分別是起點端、終點端與中段。在想加標籤的位置雙擊連接線就能輸入，範例中兩條從菱形出去的分支，就在線的中段分別加上「是」與「否」。

標籤位置不滿意的話，點一下標籤，拖曳出現的小黃色菱形就能調整。要注意的是，標籤多半會跟著連接線一起移動，但線重新繞過之後，手動調整過的標籤位置可能還要再微調，所以標籤最好等線的路徑確定之後再放。

用樣式面板統一配色、字型與預設樣式

圖形、連接線、標籤都就位之後，再統一處理外觀，效率最好。先選取要改的對象，需要同時改好幾個時，按住 Shift 逐一點選，或用 Ctrl+A 全選，這樣一次套用的樣式就會落在同一批圖形上。

右側「樣式」分頁最上方是一排調色盤，點選其中一個，會同時改變填色與外框色，左右箭頭可以看更多組合。如果品牌有固定的顏色，就點填色或線條旁邊的色彩按鈕，在頂端的輸入框直接填 16 進位色碼。「文字」分頁則負責字型、粗體與斜體、對齊方式與文字顏色，連接線的標籤也在這裡調。

配色的原則很單純，同類的步驟用同一種顏色，判斷用對比色，整張圖控制在 3 到 4 種顏色以內。範例中，起訖用深色底配白字，一般步驟用淺色底，判斷菱形用一種醒目的對比色，讀者不必看文字，就能從顏色分辨哪些是步驟、哪些是需要做決定的地方。

有兩個機制可以省下重複設定的時間。第一個是預設樣式，draw.io 會記住最近一次套用的樣式，讓下一個放上畫布的圖形直接沿用。選取一個調好的圖形，按右側的「設為預設樣式」，或按 Ctrl+Shift+D（macOS 為 Cmd+Shift+D），之後新放的圖形就是這個外觀；要恢復成原本的預設，則在沒有選取任何物件時按「清除預設樣式」，或按 Ctrl+Shift+R。

第二個是複製與貼上樣式，適合把某一個圖形的外觀套到另一批已經畫好的圖形上，做法是先選取來源，用「複製樣式」（Alt+C），再選取目標，用「貼上樣式」（Alt+V），macOS 則是 Option+C 與 Option+V。想看樣式背後的原始設定，可以選取圖形後按「編輯樣式」（Ctrl+E），會看到以分號隔開的 key=value 字串，例如 fillColor=#f8cecc;strokeColor=#b85450;，需要精準微調或複製到其他圖時，直接改這串字最快。

網站架構圖以樹狀版面排出頁面層級

網站架構圖和流程圖最大的差別，在於它描述的是階層，不是順序。流程圖講的是「先做什麼、再做什麼」，架構圖講的是「首頁底下有哪些頁面、每個頁面底下又分出哪些子頁」，所以版面最適合用樹狀，由上往下或由左往右一層層展開。這也是線上製圖工具常被拿來畫網站地圖的原因。

範例沿用龐果設計的網站，頁面層級是首頁底下分成關於我們、服務項目、文章專區、聯絡我們四個頁面，服務項目底下再分網站設計、品牌設計兩個子頁。做法有三種，頁面不多、想邊畫邊想的時候用手動，手上已經有頁面清單的時候用文字貼上，圖畫散了的時候用版面配置整理，三種做法也可以接力使用。

手動拉出首頁與子頁的層級

手動做法適合頁面不多、邊畫邊調整的情境。從左側圖形庫拖一個矩形，放在畫布上方當作首頁，把滑鼠移到首頁上，圖形四周會出現藍色箭頭，點選箭頭就可以複製出一個新圖形，並自動接上連接線，就這樣一層層往下接出子頁。

更快的方式，是選取圖形後按 Alt+Shift+方向鍵，直接複製並連線。需要注意的是，那個方向如果已經有圖形，這個快捷鍵不會再複製新圖形，只會接一條連接線到既有的圖形上，同一個方向要接第二個子頁時，得先把既有的子頁移開。這個方法省事的地方在於，每複製出一個圖形，連接線就跟著接好，不必再手動連線。

從文字貼上頁面階層一次產生

手上如果已經有頁面清單，例如網站改版前整理好的頁面盤點，從文字貼上會快得多。操作路徑是「調整 > 插入 > 進階 > 從文字…」，在跳出的對話框裡，右下方有個下拉選單，包含「列表、圖表、圓形、水平流線、垂直流線」，要畫階層就選「圖表」。

文字的寫法很單純，每一行寫一組「父頁->子頁」，箭頭 -> 代表連接線：

首頁->關於我們
首頁->服務項目
首頁->文章專區
首頁->聯絡我們
服務項目->網站設計
服務項目->品牌設計Code language: plaintext (plaintext)

貼好之後按「插入」，畫布上就會出現整棵樹。這裡有一個常見的陷阱，箭頭前後不能有多餘的空格，貼上前先檢查一遍，否則產生的圖形可能不如預期。中文的頁面名稱可以直接當標籤使用，不需要特別處理。

如果想在連接線上加說明，寫成「父頁->說明文字->子頁」就可以，例如 服務項目->主要服務->網站設計，「主要服務」會成為這條線的標籤。

套用版面配置並收合過長的分支

從文字產生的圖，常常散得很開或擠在一起，手拉出來的圖也可能歪歪斜斜，這時用「調整 > 版面配置」一次整理。階層類的圖，選擇「垂直樹狀」，所有分支就會由上往下整齊展開；頁面層級比較深、橫向空間比較充裕時，改選「水平樹狀」更好讀。選取要整理的圖形後，按下版面配置，在跳出的對話框調整圖形之間的間距，按「套用」即可。

版面配置裡的其他選項各有適合的圖。垂直流線與水平流線適合有流動感的結構，例如流程或心智圖；徑向圖讓分支從中心往外輻射；力導向配置圖適合網路圖與心智圖這類有叢集的結構；圓形則適合做簡報或資訊圖的元件；組織圖有專屬的版面，可以設定父子與兄弟節點之間的間距。

頁面一多，整棵樹就會拉得很長，這時可以替父節點開啟收合功能。選取父節點後，在右側「樣式」分頁最下方的屬性清單勾選 Tree Folding，圖形上會出現收合鈕，點一下就能收起或展開底下的分支。同一份清單裡還有 Tree Moving，勾選後拖曳父節點，底下整支分支會跟著一起移動。某個分支如果複雜到主圖塞不下，可以拆到同一份檔案的另一個分頁，再從父節點連結過去，主圖就能維持簡潔。

用 Mermaid 與 Generate 先產出圖表草稿

除了手動畫，draw.io 還提供兩種用文字當輸入的方式，一種是貼上 Mermaid 語法，一種是用自然語言描述後請工具產生。這兩種都適合當作草稿的起點，產出之後仍要自己檢查流程邏輯，再用前面學到的連接線與樣式修整。

Mermaid 是一種用文字描述圖表的語法，常用來寫流程圖與 UML 圖。操作路徑是「調整 > 插入 > Mermaid…」，貼上語法，下拉選單可以選「圖表」或「圖片」，按「預覽」會另外開一個小視窗顯示結果，確認沒問題再按「插入」。以詢價流程為例，語法可以這樣寫：

graph TD; A[開始] --> B{需求明確?}; B -->|是| C[回覆報價]; B -->|否| D[補問需求]Code language: plaintext (plaintext)

選「圖表」，插入的是一組放在 Mermaid 容器群組裡、可以逐一編輯的 draw.io 圖形與連接線，改文字、顏色、位置都和手動畫的一樣；語法也保存在群組裡，選取其中的圖形後按左上角的筆形圖示就能修改語法，再按「套用」重新產生，改過的樣式與標籤會保留，但手動調整的位置與尺寸會重新排過。選「圖片」，插入的則是一張 SVG 圖片，裡面的形狀不能拆開調整，但雙擊圖片同樣可以重新編輯 Mermaid 語法並套用更新。語法裡的中文標籤可以直接使用，插入後的結果若和預期不同，再手動調整即可。

Generate 的入口在工具列的閃爍星星按鈕，或是「調整 > 插入 > 產生」。使用時先在輸入框描述想要的圖，並且一開始就說明圖表類型，例如「流程圖，描述網站聯絡表單送出後的詢價處理」，按 Enter 送出。生成的結果出現在對話框裡，確認內容後按「+」把圖加到畫布，之後就和一般的 draw.io 圖形一樣，可以再編輯。對話框裡也能繼續追問，請它修改已經生成的圖。

資料會流向哪裡，使用前值得先弄清楚。預設情況下，Generate 使用 draw.io 託管的後端，系統會依圖表類型自動挑選合適的大型語言模型。這個功能只看得到自己在這次對話裡生成的圖表資料，以及使用者主動分享的內容；想讓它修改目前的圖，可以在輸入框旁按「+」，選擇附加整份圖表、目前的頁面，或只附加選取的範圍。

不希望圖表交給外部服務的話，有兩個做法。一是在「其他 > 組態…」填入自己的 API 金鑰，改用自己的服務；二是在 Generate 對話框把模型切換成「剪貼簿」，這個模式不需要 API 金鑰，它會把請求複製到剪貼簿，由使用者自行貼到慣用的 AI 工具，拿到回應之後再回到 Generate 對話框按「貼上」，把回應放回 draw.io。另外，也可以在組態中把 AI 功能整個停用。無論用哪一種方式，產出的圖只是草稿，詢價流程這類牽涉公司作業的圖，每一步是否符合實際作法，仍然要自己逐一確認。

PNG、SVG 與原檔的匯出設定

圖畫完之後，最後一步是依用途決定匯出什麼格式。選錯格式的代價不大，但有兩個常見的坑，一是 PNG 沒勾「包含我的圖表的副本」，之後就無法回頭編輯，二是 SVG 直接放進 WordPress，文字可能不顯示。依用途挑好格式、留意這兩處設定，就能避開。

匯出的入口在「檔案 > 匯出為」，子選單包含 PNG、JPEG、WebP、動畫、SVG、PDF、HTML、XML、URL、JSON 與進階。實際會用到的格式與用途，大致如下：

JPEG 比較適合照片，不建議用在圖表上，它的有損壓縮容易讓細線與文字邊緣變得模糊，也無法內嵌圖表資料。PNG 是點陣圖，放大後會變糊，高縮放比例時檔案也會變大；SVG 則是向量，不受放大影響。

PNG 匯出要調縮放、留邊框並內嵌圖表副本

選擇「檔案 > 匯出為 > PNG…」，會跳出匯出視窗。「縮放」決定輸出的清晰度，數字拉得越高越清楚，但檔案也越大；要放進網頁的圖，縮放通常調高一些，在高解析度螢幕上比較不會顯得模糊。「大小」可以選擇只匯出圖表範圍或整個頁面。

「透明背景」適合要疊在彩色頁面或投影片背景上的圖，沒勾的話預設是白底。想要只匯出其中一部分，可以先選取那些圖形再匯出，輸出就只包含選取的範圍。「包含我的圖表的副本」要特別留意，勾選之後，匯出的 PNG 會內嵌圖表資料，之後把這張 PNG 拖回 draw.io，仍然可以繼續編輯。

「進階」區域另外有寬度、高度、DPI、邊框寬度、外觀（淺色或暗色）、陰影與網格等選項。邊框寬度可以在圖形外圍留一圈空白，避免圖貼著邊緣被裁掉；DPI 只有在要求印刷等級的高解析度時才要調整。常用的設定組合，可以從視窗上方的「預設集」另存，下次一鍵套用。範例中的詢價流程圖要匯成網頁用的 PNG，縮放拉高一些、邊框留一點空白，再勾選包含副本，就能得到一份清楚、又保有編輯彈性的檔案。

SVG 放進 WordPress 前先關閉兩個文字設定

SVG 檔案小、放大不糊，很適合放在網頁上，但放進 WordPress 這類網站有一個陷阱。draw.io 預設的文字格式，會用到 SVG 內的 foreign objects，部分平台不支援，結果就是匯出的 SVG 在網頁上看不到文字，或是版面跑掉。

處理方式是匯出前先調整兩個文字設定。先在畫布空白處按 Ctrl+A 全選，到右側「文字」分頁展開「進階」，取消「格式化文字」；接著在畫布按右鍵選「選擇頂點」（Ctrl+Shift+I），選取所有圖形，再回到「文字」分頁的「進階」，取消「自動換行」。這兩個選項都關掉之後，文字就會以一般 SVG 文字呈現。

設定完成就可以匯出：「檔案 > 匯出為 > SVG…」，同樣能勾選「包含我的圖表的副本」，讓別人拿到檔案後仍然可以匯入 draw.io 修改。另外要留意，WordPress 本身預設不接受上傳 SVG，需要有支援 SVG 的外掛才行。如果不想處理這些，直接匯出成 PNG 是最省事的選擇。

PDF、URL 與 .drawio 原檔的用途

這三種匯出的定位不同。.drawio 原檔是日後修改圖表的本體，無論圖匯成什麼格式，原檔一定要自己留一份，存在電腦或雲端都可以。其他格式如果沒有內嵌圖表資料，原檔一旦遺失，就很難再還原成可以編輯的圖。

PDF 適合列印與多頁的正式文件，draw.io 的說明文件也建議列印時用 PDF，不要用 PNG，因為印刷解析度的 PNG 檔案太大。匯出 PDF 時也能勾選「包含我的圖表的副本」，之後把 PDF 拖進 draw.io 就可以再編輯；若匯出 PDF 時遇到錯誤，改用「檔案 > 列印」並選擇列印成 PDF，也能得到同樣的結果。

URL 的做法是把整張圖編碼在網址裡，對方點開看到的是一份複本，不會開啟也不會改到你的原圖，適合臨時分享給同事確認。如果希望對方直接動手修改，就給 .drawio 原檔，或是勾選了包含副本的 PNG、SVG。

drawio 的操作其實不難，難的是第一次動手時不知道哪些功能值得先學。從一條自己最常重複的流程開始，用空白圖表放好圖形、接上連接線、加完標籤再統一上色，最後把原檔存成 .drawio、另外匯出一份 PNG，這樣走完一輪，大部分的製圖需求就已經摸過一遍。往後遇到更複雜的圖，只是把同樣的動作換個內容再做一次。