ProcessOn 入門圖文教程：註冊、建檔、模板、設計器、協作、匯出全流程

什麼是 ProcessOn？

HTML5 線上繪圖工具，支援流程圖、UML、BPMN、E-R 圖、原型圖、思維導圖等，無需安裝、跨平台、自動儲存雲端、支援即時協作，Visio 輕量替代方案。

新手 7 步上手

1. 註冊/登入： 官網 processon.com，支援 GitHub/Google/微信/郵箱快捷登入。未登入可試用但無法長期保存。
2. 基本資料 (可略過)： 設定暱稱、頭像、職業標籤。
3. 新手引導 (建議走一遍)： 3 分鐘互動教學，掌握拖曳、連線、樣式切換。
4. 新建檔案： 右上角「新建檔案」→ 選擇類型 (流程圖/原型/思維導圖…)。
5. 選擇模板 (可略過)： 官方提供常用模板 (泳道圖、用戶旅程、資料庫 ER 圖…)，套用即刻上手。
6. 設計器介面速覽：
   • ① 檔案名 (可點擊重命名)
   • ② 選單列 (檔案/編輯/檢視/排版/協作/分享)
   • ③ 工具列 (對齊/分佈/圖層/樣式/文字/連線樣式)
   • ④ 圖形庫 (依圖類動態切換)
   • ⑤ 更多圖形 (搜尋/自訂圖形庫)
   • ⑥ 邀請協作 (生成連結/郵件邀請，同時編輯)
   • ⑦ 分享協作 (公開連結/嵌入代碼/匯出圖片/PDF/Visio/SVG)
   • ⑧ 懸浮導覽 (縮放/圖層/網格/參考線)
   • ⑨ Chrome 擴充功能 (網頁截圖轉圖形、快速新建)
7. 開始繪圖 (GIF 動態演示)： 拖曳圖形 → 雙擊編輯文字 → 拖曳連接點建立連線 → 工具列調整顏色/線型/字體 → 對齊分佈 → 匯出 PNG/PDF/SVG/VSDX。

進階技巧

• 容器/泳道： 先拉入「容器」再放入節點，移動容器自動帶動內容。
• 樣式復用： 格式刷 (工具列刷子圖標) 一鍵同步樣式。
• 版本歷史： 選單「檔案」→「版本歷史」可回滾任意時間點。
• 批次匯出： 多頁文件可一次匯出 ZIP 包含所有頁面圖片。

免費版 vs 付費版 差異