無限畫布
畫布不會畫滿。想到哪畫到哪,縮到 10% 也能一眼看全整張圖。
這幾件事,都在同一張畫布上完成。
單機運行,內容只存在自己的電腦裡,不做網路儲存和互動。
不註冊、不選模板,這點開就是畫布。
基礎圖形
草圖、正式流程圖、介面原型和腦圖,用的是同一套工具和同一張紙。想法在哪一層,就在哪一層畫,不用先決定這是什麼類型的文件。
畫布不會畫滿。想到哪畫到哪,縮到 10% 也能一眼看全整張圖。
選好形狀就開始連,連線自己找路徑。版面亂了一鍵重排,不用手動對齊每一根線。
導覽列、表單、卡片、彈跳窗都是現成組件,拖出來就是一屏可講的原型。
十二種佈局、八套配色,拖曳一個節點整棵樹自動重排。折疊、批註、邊界和關聯線都在。
行列和職責帶自己保持對齊,加一行不會把整張圖擠歪。
草稿的語氣讓人願意提出意見。要交付時,一個開關換成規整線條。
導入與轉換
文件裡的 Mermaid、倉庫裡的 PlantUML、draw.io 和 Visio 的存檔、別處導出的腦圖,拖進來就變成畫布元素。
graph LR A[接單] --> B{庫存充足?} B -->|是| C[出庫] B -->|否| D[補貨]
右邊這些是元素,不是圖片——可以拖走一個節點、改一句文案、換一種配色,再接著往下畫。
變成可編輯元素
節點、連線、配色都還原成畫布元素,接著改。 PlantUML 引擎跑在你的瀏覽器裡,原始碼不會傳送到任何渲染伺服器。
原件攤開閱讀
不轉格式、不丟原件,拖進來就能在畫布上翻頁讀。
變成高亮程式碼區塊
高亮跟著語言走,網頁程式碼還能當場渲染出來看。
接不住的也告訴你怎麼辦:舊版二進位 .vsd 會提示先在 Visio 裡另存為 .vsdx;Axure .rp 能辨識出來,並給你「匯出 SVG 再導入」這條路。
文件與程式碼
把 PDF、合約、報表或一段程式碼拖進來,它們不是要下載的附件,而是能在畫布上直接翻頁、直接讀取的一塊內容。
語法高亮跟著語言走。寫的是網頁程式碼,畫布上立刻能看到渲染出來的樣子。
逐頁翻,也能一次鋪上對照。原始文件始終留在這塊元素裡,隨畫布一起分享。
圖片處理
截圖貼進來往往還要再修一刀。裁掉多餘的、遮住敏感的、把幾張拼成一張,都在畫布上完成,不用來回切圖片工具。
大畫布性能
畫布用久了會變重,這是所有白板的真問題。我們把它當成會失敗的測試來管:每次改動都在真實瀏覽器裡跑一萬個元素的拖曳和縮放,指標退了就不許發版。
| 場景 | 實測 | 意義 |
|---|---|---|
| 一萬元素同屏拖曳 | 9.5 ms | 幀耗時 p95。60fps 的預算是 16.7 ms,還剩一半餘裕。 |
| 拖曳中的掉幀 | 0.23 % | 超出 60fps 預算的幀佔比,一千幀裡約兩幀。 |
| 縮放到 10% | 5 ms | 從滾輪輸入到畫面響應,p95。 |
| 二十張 4K 圖 | ↓ 70 % | 分級預覽相比全尺寸解碼省下的開銷,快取控制在 192 MiB 內。 |
測量條件:Chromium 150、Apple M1 Max,真實 Canvas2D 渲染路徑,10,000 個全部位於首屏的元素,幀間隔取自
performance.now()
壁鐘。基準腳本和歷史結果都在開源倉庫。
橫向對照
轻想X 建置在 Excalidraw 之上,這一點不藏。下面只列我們真正往前走了的地方;對方也做得到的,照實寫。
| 維度 | 轻想X | Excalidraw | draw.io |
|---|---|---|---|
| 上手第一步 | 打開就是畫布。不註冊、不選儲存、不挑模板 | 同樣打開即畫 | 先選存放位置、檔案名稱和模板,過三個彈跳窗才見到畫布 |
| 資料去向 | 單機運行,內容只存在自己的電腦裡 | 同樣本機優先 | 本機或雲端儲存,首次要自己選對 |
| 心智圖 | 原生。十二種佈局,拖曳一個節點整樹重排,XMind 還原到配色 | 沒有原生腦圖,逐一框手動畫 | 樹形佈局,節點位置手動維護 |
| 文件原件 | PDF、Word、PPT、Excel 攤在畫布上翻頁讀 | 只能貼成圖片,原件另存 | 只能貼圖片或鏈接,原件另存 |
| 程式碼區塊 | 30+ 語言語法高亮,網頁程式碼即時渲染 | 純文字方塊 | 純文字方塊 |
| 圖片處理 | 裁剪、切片、馬賽克、拼圖 | 只有裁切 | 基本沒有 |
| 文件互通 | 讀 draw.io、Visio、XMind、Mermaid、PlantUML | Mermaid 能轉;draw.io 和腦圖讀不了 | 讀 Visio;腦圖讀不了 |
| 性能口徑 | 萬元素基準公開,指標退了不發版 | 沒有公開基準 | 沒有公開基準 |