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

Graphviz

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

一個簡單的示例代碼如下:

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

執(zhí)行編譯后:

dot -Tjpg lz.dot -o lz.jpg

就會生成下面的圖片

接著我們便可以建立一個簡單的模型來構(gòu)建我們的技能樹。

簡單的技能樹

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

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

即Web前端依賴于JavaScript、HTML、CSS，而Node.js依賴于JavaScript，當(dāng)然我們也需要數(shù)據(jù)的支持，大部分的網(wǎng)站都是數(shù)據(jù)驅(qū)動型的開發(fā)。而構(gòu)成完成的開發(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開發(fā)"
        "JavaScript" -> "Node.js" -> "Web服務(wù)端"
        "SQL/NoSQL" -> "Web服務(wù)端"
        "Web服務(wù)端" -> "Web開發(fā)"
    }

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