公司研發(fā)的管理系統(tǒng)有工作流圖形化設(shè)計(jì)和查看功能，這個(gè)功能的開(kāi)發(fā)歷史比較久遠(yuǎn)。在那個(gè)暗無(wú)天日的年月里，IE幾乎一統(tǒng)江湖，所以順理成章地采用了當(dāng)時(shí)紅極一時(shí)的VML技術(shù)。
后來(lái)的事情大家都知道了，IE開(kāi)始走下坡路，VML這個(gè)技術(shù)現(xiàn)在早已滅絕，導(dǎo)致原來(lái)的工作流圖形化功能完全不能使用，所以需要采用新技術(shù)來(lái)重寫(xiě)工作流圖形化功能。
多方對(duì)比之后，決定采用zrender庫(kù)來(lái)實(shí)現(xiàn)（關(guān)于zrender庫(kù)的介紹，請(qǐng)看http://ecomfe.github.io/zrender/），花了一天的時(shí)間，終于做出了一個(gè)大致的效果模型，如下圖所示：
流程圖由兩類(lèi)部件組成：活動(dòng)部件和連接弧部件，每一類(lèi)部件包含多個(gè)性狀不同的部件。
以活動(dòng)部件為例，圓形的是開(kāi)始活動(dòng)，平行四邊形是自動(dòng)活動(dòng)，長(zhǎng)方形是人工活動(dòng)，等等。
在代碼實(shí)現(xiàn)上，定義了Unit（部件基類(lèi)），所有的部件都繼承自這個(gè)基類(lèi)。通過(guò)Graph類(lèi)來(lái)管理整個(gè)流程圖，包括所有部件、上下文菜單等等都由Graph來(lái)統(tǒng)一管理和調(diào)度，代碼如下：
