將程式碼演算法視覺化的互動式線上平台

從文字說明和靜態圖片中學習演算法是很枯燥的。 因此有許多很棒的網站提供了檢視各種演算法的動畫。 然而，對於程式設計人員來說，沒有什麼比將實際運作程式碼視覺化更容易理解的了。

algorithm-visualizer 是一個互動式線上平台，可以將程式碼中的演算法視覺化。

筆記

algorithm-visualizer 有部署到一個公開的網站 https://algorithm-visualizer.org/讓你在線上測試，進去後你就會看到這個測試平台已經內建了許多演算法程式範例，目前這些範例都是用 javascript 寫的

但是在 UI 上你會看到可以切換到 Java/C++/Javascript 這三種版本

原來algorithm-visualizer 的 UI 左下方有一個 Scratch Paper ，這些選項是讓你切換 Java/C++/Javascript 程式語言來練習你自己的演算法，文件上說明是在 Scratch Paper 下方的 New 去新增你的演算法，例如我選 Java，algorithm-visualizer 會幫我產生一個可以馬上執行的 Java 的測試演算法框架，使用者就利用這個產生的框架開始在裡面寫演算法練習，螢幕的左邊可以看到演算法視覺化的輸出結果

線上的測試平台還可以跟你的 Github 帳號做整合，原本以為這個功能會去同步你的 github 專案中的程式碼做程式碼視覺化，但是目前還找不到這個功能 ( 也許會將你寫的演算法存成 gist ，可以試看看)

algorithm-visualizer 內建有 fork 功能，也就是你也可以 fork 內建的演算法範例然後再去修改成自己的版本做練習

你也可以為這個便利的開源工具貢獻演算法，作者是將演算法放在這個 repository

algorithm-visualizer 也可以安裝到你自己的電腦中，方法如下

1. Fork 這個開源專案

2. git clone https://github.com/<your-username>/algorithm-visualizer.git

3. 安裝 Docker

4. 安裝相依套件

cd algorithm-visualizer 
npm install 
npm run dev

5. 開啟瀏覽器到 http://localhost:8080/

專案網址

• https://github.com/algorithm-visualizer/algorithm-visualizer

支持 Soft & Share

❤️您應該有留意到，我們的網頁並不會出現干擾人的跳出煩人的廣告或是在內容中嵌入廣告，因為我們發現這樣對閱讀網頁的內容體驗真的是不好!

如果您覺得我們提供的內容服務還不錯，歡迎透過對以下產品/服務的購買投資來支持本站的營運走得更遠

如果暫時還不需要以下的付費服務，幫我們把這個網站分享給有需要的朋友，您的小小舉動會對 Soft & Share 有莫大的幫助！感謝您的支持！

🎈如果您點選優惠連結後，還是沒有看到優惠價格，請將瀏覽器的 cookie 清除 ( 清除 udemy 網站的就可以了 )，然後重新點選優惠連結並登入 Udemy 就可以了

• ❤️記得透過電腦瀏覽器登入 udemy ，使用這個✨優惠連結✨購買線上課程，本站可獲得 udemy 推薦獎金，歡迎透過我們的 A-Z 關鍵字索引 或 Udemy 策展找到您想要的課程
• ❤️訂閱開源報報 – 週一到週五每天使用中文報導三則開源專案
• ❤️LN+ for udemy/youtube/hahow/web 無縫整合 Notion 成為線上學習平台筆記工具
• ❤️更多付費服務（電子書/其他線上課程平台/軟體服務 ）……

---

---

• 演算法 ( 使用 javascript )
• 演算法 ( 使用 Java )
• 演算法 ( 使用 C++ )

不受 FB 演算法影響，歡迎透過 e-mail 訂閱網站更新