在開(kāi)始設(shè)計(jì)新的技能樹(shù)——Sherlock的同時(shí)，結(jié)合一下原有的技能樹(shù)，說(shuō)說(shuō)如何去設(shè)計(jì)，新的技能樹(shù)還很丑。

Graphviz

Graphviz （英文：Graph Visualization Software的縮寫(xiě)）是一個(gè)由AT&T實(shí)驗(yàn)室啟動(dòng)的開(kāi)源工具包，用于繪制DOT語(yǔ)言腳本描述的圖形。它也提供了供其它軟件使用的庫(kù)。Graphviz是一個(gè)自由軟件，其授權(quán)為Eclipse Public License。其Mac版本曾經(jīng)獲得2004年的蘋(píng)果設(shè)計(jì)獎(jiǎng)。

一個(gè)簡(jiǎn)單的示例代碼如下:

graph example1 {
    Server1 -- Server2
    Server2 -- Server3
    Server3 -- Server1
}

執(zhí)行編譯后:

dot -Tjpg lz.dot -o lz.jpg

就會(huì)生成下面的圖片

接著我們便可以建立一個(gè)簡(jiǎn)單的模型來(lái)構(gòu)建我們的技能樹(shù)。

簡(jiǎn)單的技能樹(shù)

先以JavaScript全棧作一個(gè)簡(jiǎn)單的示例，他們可能存在下面的依賴關(guān)系:

• "JavaScript" -> "Web前端"
• "HTML" -> "Web前端"
• "CSS" -> "Web前端"
• "Web前端" -> "Web開(kāi)發(fā)"
• "JavaScript" -> "Node.js" -> "Web服務(wù)端"
• "SQL/NoSQL" -> "Web服務(wù)端"
• "Web Server-Side" -> "Web開(kāi)發(fā)"

即Web前端依賴于JavaScript、HTML、CSS，而Node.js依賴于JavaScript，當(dāng)然我們也需要數(shù)據(jù)的支持，大部分的網(wǎng)站都是數(shù)據(jù)驅(qū)動(dòng)型的開(kāi)發(fā)。而構(gòu)成完成的開(kāi)發(fā)鏈的則是前端 + 服務(wù)端。

于是我們有了這張圖:

而我們的代碼是這樣的:

    digraph tree
    {
        nodesep=0.5;
        charset="UTF-8";
        rankdir=LR;
        fixedsize=true;
        node [style="rounded,filled", width=0, height=0, shape=box, fillcolor="#E5E5E5", concentrate=true]
        "JavaScript" ->"Web前端"
        "HTML" -> "Web前端"
        "CSS" -> "Web前端"
        "Web前端" -> "Web開(kāi)發(fā)"
        "JavaScript" -> "Node.js" -> "Web服務(wù)端"
        "SQL/NoSQL" -> "Web服務(wù)端"
        "Web服務(wù)端" -> "Web開(kāi)發(fā)"
    }

上面舉出的是一個(gè)簡(jiǎn)單的例子，對(duì)應(yīng)的我們可以做一些更有意思的東西，比如將dot放到Web上，詳情見(jiàn)下一篇。