用免費工具畫出你家的平面圖：兩個工具的完整步驟

charles

上一篇量好了，這篇把草圖變成能用的平面圖。

兩個工具，先看你要哪一種成果。



工具一：Floorplanner（線上，五分鐘出圖）

適合：只想快點做出 Picture Elements 版本的人。

網址：floorplanner.com（免費帳號就夠用）

步驟：

• 註冊一個免費帳號
  
• 建立新專案 → 選空白
  
• 用「牆」工具拉出外框 —— 就是畫四條線圍成一個框
  
• 在裡面拉牆分隔房間
  
• 雙擊牆可以輸入精確長度（把你量的數字填進去）
  
• 加上門和窗（拖進來就好）
  
• 放家具（選配，但放了比較好認）
  
• 匯出成圖片
  

匯出的設定很重要：

• 選 2D 俯視圖，不要選 3D
  
• 解析度選最大（免費版通常有上限，盡量高）
  
• 格式選 PNG
  

其他類似的免費工具（都差不多）：

• Sweet Home 3D（可以下載安裝，不用網路）
  
• RoomSketcher
  
• Planner 5D
  

選哪個都可以，重點是能匯出一張 2D 的 PNG。

工具二：Inkscape（免費，可以做動畫）

適合：想做 SVG 版本、想要真正的動畫效果的人。

網址：inkscape.org（免費開源，Windows / Mac / Linux 都有）

這個比較花時間，但做出來的東西完全不一樣 ——
房間可以漸變顏色、燈可以發光、門可以轉動。



Inkscape 最基本的四個工具

不用學整套 Inkscape，會這四個就能畫平面圖：

• 方形工具（R） —— 畫房間
  
• 選取工具（S 或 F1） —— 移動、縮放
  
• 文字工具（T） —— 標房間名
  
• XML 編輯器（Ctrl+Shift+X） —— 改元素的 id（最重要）
  

畫平面圖的順序

第一步：設定畫布大小

檔案 → 文件屬性

設成一個好算的尺寸，例如 1000 × 600 px。

訣竅：讓畫布的比例跟你家的實際比例一樣。
例如你家是 10 米 × 6 米，畫布就設 1000 × 600，
這樣 1 px = 1 公分，畫的時候直接填你量的數字就好。

第二步：用方形畫出每個房間

按 R 選方形工具，拉一個方形。

然後在上方的工具列直接輸入 X / Y / W / H：

1. 客廳：X=0    Y=0    W=400  H=312
2. 餐廳：X=400  Y=0    W=250  H=312
3. 廚房：X=650  Y=0    W=350  H=312
4. 玄關：X=0    Y=312  W=180  H=288
5. 主臥：X=180  Y=312  W=320  H=288
6. 浴室：X=500  Y=312  W=180  H=288
7. 次臥：X=680  Y=312  W=320  H=288

複製代碼

用輸入數字的方式，不要用滑鼠拖 —— 拖的話永遠對不齊。

第三步：設定顏色和邊框

物件 → 填充和邊框（Ctrl+Shift+F）

• 填充：淺灰（例如 #F4F6FA）
  
• 邊框：深灰（例如 #3A4250），寬度 3px
  

第四步：給每個元素一個 id（關鍵！）

這一步是 SVG 版本的核心。

按 Ctrl+Shift+X 打開 XML 編輯器，
選中一個房間，把它的 id 改成對應的實體 ID：

1. 客廳的方形  →  id = light.living_room
2. 主臥的方形  →  id = light.bedroom
3. 廚房的方形  →  id = light.kitchen

複製代碼

之後 ha-floorplan 就是靠這個 id 把圖形跟實體接起來的。



第五步：另存成 SVG

檔案 → 另存為 → 選 純 SVG（Plain SVG）

不要選「Inkscape SVG」 —— 那個格式裡面有一堆 Inkscape 專用的東西，
檔案會變很大，而且有時候會干擾。

兩個一開始就要避開的坑

坑一：不要用「群組」包住房間

Inkscape 裡按 Ctrl+G 會把東西群組起來。

群組之後那些物件會多一層 transform，CSS 動畫會跑掉
（元素可能飛到畫面外，或者旋轉的時候繞著奇怪的點轉）。

需要群組的話等最後再做，而且要接動畫的元素不要群組。

坑二：不要用「連結」的圖片

如果你在 SVG 裡插入 PNG 圖片，Inkscape 預設是「連結」而不是嵌入。

問題：那個連結的路徑是相對於 SVG 檔案的，
但在 HA 的儀表板上，它會變成相對於網頁網址去找 —— 找不到，圖就破了。

解法：

• 插入圖片時選「嵌入」，不要選「連結」
  
• 或者 ha-floorplan 的設定裡有一個路徑前綴的選項可以修正
  

還有一條最省事的路：手機拍照

如果你真的不想畫圖 ——

把建商給的格局圖拍照，用手機的內建編輯功能裁切、調亮，直接用。

醜一點沒關係，家人看得懂就好。

我第一版就是拍權狀上的平面圖，用了三個月都沒換。



圖片的準備建議

不管用哪種方法，匯出的圖片最好符合：

• 寬度 1000-2000 px —— 太小在平板上會糊，太大載入慢
  
• PNG 格式（SVG 版本另當別論）
  
• 背景乾淨 —— 把不需要的標註、尺寸線、logo 去掉
  
• 顏色淺一點 —— 底圖太花的話，上面放的圖示看不清楚
  
• 檔案大小控制在 500KB 以內
  

顏色淺一點這條很重要。

我看過很多人用很漂亮的 3D 渲染圖當底圖，結果上面的圖示完全看不到。

底圖的角色是背景，不是主角。

---

下一篇：把圖放進 HA。

會講 `/config/www` 和 `/local` 到底是什麼關係 ——
這是新手最常卡住的一步。