Draw your home. Flip the lights. Let Home Assistant deal with the YAML.
One HTML file · no build step · no dependencies · 12 languages
Mirror: ming-kun.github.io — may be unreachable from mainland China 国内可能打不开
You want a floor plan on your Home Assistant dashboard.
The usual route: open a vector editor, hand-draw ten rooms, export a PNG, then write YAML that pins every entity to a pixel coordinate you measured by squinting. Then someone buys a new lamp, and you do the whole thing again.
This is that, in a browser tab, in about four minutes.
Drag rooms onto the canvas. Drop lights and curtains into them. Hit export. The layout you drew is the entity registry — the data model is shaped like Home Assistant's own floor → area → entity tree, so exporting is a projection, not a translation.
🏠 Rooms that behave — drag them in and they auto-space by two cells, so nothing hides behind anything else. Eleven room types, multiple floors, reorder and delete freely.
💡 Five device types, each mapped to a real HA domain:
| Drop this in | You get |
|---|---|
| Smart ceiling light | light · brightness + color_temp |
| Dimmer switch | light · brightness |
| Smart switch | switch |
| Smart curtain | cover · curtain · position |
| Roller blind | cover · shade · position |
🌗 Eight lighting states, all of them real — day/night × lights on/off × curtains open/closed, plus continuous sliders for brightness and curtain position. Press D to flip day and night. Click a lamp on the plan to toggle it. Watch the room actually respond.
📦 Export that lands — four artifacts and a background image:
picture-elementsYAML — the native HA card. Nothing to install.ha-floorplanconfig +home.css— if you have HACS and want the fancy onescene.json— the raw scene model- Background PNG, at exactly the projection the coordinates assume
🌍 12 languages — English, 中文, Français, Deutsch, Italiano, Español, Português, Nederlands, Polski, Русский, 한국어, 日本語. Your smart home shouldn't be monolingual just because your thermostat is.
Easiest path is the live demo — nothing to download.
Otherwise, there isn't an install. That's not an oversight, it's the whole point.
git clone https://github.com/Ming-kun/mk-ha-floorplan-editor.git
open mk-ha-floorplan-editor/index.htmlYou may run npm install in that directory if it makes you feel more at home. Nothing will happen. There is no package.json, no node_modules, and no 3 a.m. dependency audit in your future.
Works offline too — the only thing it ever fetches is a webfont.
- Import from HA → copy the template into HA's Developer tools → Template, paste the result back. Your real areas, floors and entity ids arrive as rooms. (Nothing connects to HA; you do the copy-paste.) Remove anything you don't want on the plan with ×.
- Arrange rooms, pick day or night
- Export to Home Assistant → Files → download the kit and unzip it into
config/www/floorplan/ - picture-elements tab → copy → in HA: Add card → Manual → paste
The kit is a base image with every light off, plus one transparent "lit" layer per room. The card shows a room's layer whenever any of its lights is on, so the plan lights up with your house. Switches with device_class: outlet don't count as lights.
Re-export? Bump the ?v= in the YAML so browsers drop the cached images. Pasting an old scene.json into Import brings a plan back for editing.
Everything you see — walls, furniture, lamps, curtains — is the same box primitive, shaded across three faces. A lighting change therefore adjusts a handful of coefficients instead of re-deriving geometry, which is why all eight states stay visually consistent instead of slowly drifting apart.
It's rendered as a runtime-assembled SVG string. No canvas, no WebGL, no framework. 2:1 isometric projection, the finest projection 1997 had to offer, and still undefeated for this job.
Does it send my floor plan anywhere? No. It doesn't even contact its own author. Everything runs in your tab.
Where's my data? In your tab. Your language choice goes to localStorage, wrapped in a try/catch so private-browsing mode degrades quietly instead of exploding.
Can I use this commercially? Yes — Apache-2.0. Go ahead.
Why is the moon a crescent? Because a full disc looked like a grey circle and nobody could tell it was the moon. It took three attempts and a lecture about fill-rule semantics. Don't ask.
你想在 Home Assistant 的面板上放一张户型图。
常规路线是:打开矢量编辑器,手画十个房间,导出 PNG,再对着屏幕眯着眼量像素,手写 YAML 把每个实体钉到坐标上。然后家里添了一盏灯,整套重来。
这个页面把它压缩成浏览器里的四分钟。
把房间拖进画布,往里塞灯和窗帘,点导出。你画的布局本身就是实体注册表 —— 数据模型是照着 HA 自己的 floor → area → entity 结构长的,所以导出是投影,不是翻译。
🏠 房间会自己让位 —— 拖进来自动留两格间隙,谁也不挡谁。十一种房型,支持多楼层,增删改序随意。
💡 五种设备,每种都对得上真实的 HA domain:
| 拖进去的 | 得到的 |
|---|---|
| 智能吸顶灯 | light · 亮度 + 色温 |
| 调光开关 | light · 亮度 |
| 智能开关 | switch |
| 智能窗帘 | cover · curtain · 开度 |
| 智能卷帘 | cover · shade · 开度 |
🌗 八种光效状态,每一种都真在算 —— 昼/夜 × 开灯/关灯 × 开帘/拉帘,亮度和窗帘开度还能连续调。按 D 切昼夜,点图上的灯直接开关,房间会跟着亮起来。
📦 导出是能直接用的 —— 四份产物加一张背景图:
picture-elementsYAML —— HA 原生卡片,什么都不用装ha-floorplan配置 +home.css—— 装了 HACS、想要更花哨的那版scene.json—— 场景模型原始数据- 背景 PNG,投影关系和坐标严丝合缝
🌍 12 种语言 —— 英文、中文、法、德、意、西、葡、荷、波兰、俄、韩、日。你的智能家居没必要因为温控器只会说一种语言就跟着只说一种。
最省事的是直接打开在线版,什么都不用下。
真要本地跑的话——也不用装。这不是偷懒,这就是重点。
git clone https://github.com/Ming-kun/mk-ha-floorplan-editor.git
open mk-ha-floorplan-editor/index.html你要是心里不踏实,也可以在目录里跑一下 npm install。什么都不会发生 —— 没有 package.json,没有 node_modules,将来也不会有凌晨三点的依赖审计等着你。
断网也能用,它唯一会去取的东西是字体。
- 从 HA 导入 → 把模板贴进 HA 的「开发者工具 → 模板」,再把右侧结果贴回来。你家真实的区域、楼层、实体 id 直接变成房间。(页面不连 HA,复制粘贴是你来。)不想上图的实体点 × 删掉
- 摆好房间,选白天还是黑夜
- 导出到 Home Assistant → 文件 → 下载素材包,解压到
config/www/floorplan/ - picture-elements 标签页 → 复制 → 回到 HA:「添加卡片 → 手动」→ 粘贴
素材包 = 一张全屋熄灯的底图 + 每个房间一张透明的「亮灯」图层。房间里任意一盏灯开着,卡片就显示那一层 —— 户型图跟着你家一起亮灭。device_class: outlet 的插座不算灯。
重新导出后记得改一下 YAML 里的 ?v=,不然浏览器会拿缓存的旧图。之前导出的 scene.json 贴进「导入」就能接着改。
你看到的一切 —— 墙、家具、灯具、窗帘 —— 都是同一个 box 图元,拆成三个面分别着色。所以切换光效只是改几个系数,不用重新推导几何,八种状态之间才不会各走各的、慢慢对不上。
渲染是运行时拼出来的 SVG 字符串。没有 canvas,没有 WebGL,没有框架。2:1 等距投影 —— 1997 年就有的技术,干这活至今没输过。
它会把我的户型图传走吗? 不会。它连作者都不联系。所有东西都在你这个标签页里跑完。
数据存哪? 就在你标签页里。语言偏好写 localStorage,外面套了 try/catch,隐私模式下会安静地退回默认值,不会崩。
能商用吗? 能,Apache-2.0,随便用。
月亮为什么是月牙? 因为画成整圆之后看着就是个灰圆饼,没人认得出那是月亮。中间改了三版,还顺带被 fill-rule 的语义教育了一次。别问了。
Made by MK · mklab.homes