[小嘗試] 畫組織圖..

最近我看到一些網站，很多地方都是字，唯獨組織圖是用"圖"，然後就在放大/縮小頁面之間，顯得很不協調，因為字太清楚，而圖卻模糊了，而且這代表著，如果人事有改變，就要有人負責去maintain那張圖，重繪，然後上傳到網站嗎?，然後我心裡就想說，試試看用html去畫組織圖，於是就做了這件事情xd

只是想嘗試一下而已，至於有沒有人這樣做過，我想應該是一定有..，只是我就想要自己來試一下:P，然後感覺起來還不錯，至少字很清晰的，我比較習慣於看的清楚的畫面xd

Check out this Pen!

不過一開始我沒有自己畫mock-up(很久沒碰photoshop..)， 就直接開notepad寫了><
這個Demo畫面，都是寫hard code，刻ul>ol的格式，
然後困難度的部分，我想要畫到很複雜的組織圖，會需要很多時間研究，

如果想要從後端接資料來顯示，
那個json的格式，很容易走到一個誇張的境界，應該沒有這麼簡單(我猜的

Demo圖:若有個人詳細資料時，hover時會出現

Demo圖:hover到整個department時，框線改變


其實是蠻有趣的，值得花時間研究更多方法，呵呵