這篇文章是我為DEV 教育軌道：使用 Google AI Studio 建立應用程式提交的。
我建造了什麼
我厭倦了用臃腫的 Web 應用來練習系統設計問題或建立一個系統設計問題。所以我想到了自己建立一個。我從一個包含少量元件（例如負載平衡器、API 閘道、資料庫和一個自訂元素）的簡單畫布開始。
然後我開始逐步加入功能
步驟1：
加入箭頭來連接不同的元件
第 2 步：
在元件中加入編輯選項，我可以在其中拖動元件並將其移動到畫布中，編輯它們的名稱，調整它們的大小以及將它們從畫布中刪除
步驟3：
讓畫布尺寸無限大
步驟4：
在畫布中使用滑鼠滾動加入縮放選項
步驟5：
新增更多元件，例如使用者、Web 用戶端、快取等，並在元件部分中新增捲軸
最後一步：
新增匯出功能以 png 或 jpeg 格式匯出此設計
瞧！應用程式已經上線並且可以執行了。
示範
在這裡查看並分享您的設計
未來範圍
現在是時候加入更多功能了。其中很少
-
新增建立流程圖的選項
-
複製單一元素的選項
-
能夠同時移動多個元素
等等。
請在評論區提出你的想法，讓它變得更大更好。這樣我們就可以擁有自己的開源免費畫布，無需任何遙測資料。
我的經歷
有幾次，Gemini 接近正確，但無法進行程式碼修改。我不得不特意要求繼續修改程式碼，它才能繼續執行。這有點煩人，但結果真的很棒。我很喜歡用這個新工具進行氛圍編碼。計劃免費為公眾建置更多。
建立您自己的設計並在聊天中分享，並透過您的建議激勵我們
原文出處：https://dev.to/sroy8091/my-own-hld-designer-darwin-57np
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章